ajax-ops Declarative Ajax Operations

Welcome to ajax-ops demo, a productive way to make ajax apps.

This is a single page app made using all static content. Most of the magic here is triggered by data-toggle="ajax-load".

The side-pane contains some buttons which do some ajax magic, click "demo" from nav bar to get back here.

Loading Content

As you can see the "refresh" button which is actually just an anchor tag <a> in people box that contains an "href" to the text file containing the new number to be shown in the counter "span" which is indicated using the selector like this data-target="#connected-count" and the type of this content is text data-format="text" which means if it contains markup they will be shown as is this is why the other button called "hack" did not show the alert.

Try the [+] button on the side panes, it loads HTML partial containing a form in the main pane. (you can use active forms in your web framework just make sure to render the partial not the entire page with full layout). The mark up that made this was very obvious:

<button data-url="demo/data/newpost.html" data-toggle="ajax-load" data-target="#main-pane">+</button>

Fetching Raw Date and Rendering it

You can fetch raw data in JSON formate from server then pass it to your favorite js templates like handlerbars. Just like the above we pointed to the json data using "href" or "data-url" and target selector, but the difference here that we passed template name data-template="post" (we have have a template called "post" which renders the post content and its comments)

<a href="#" data-url="demo/data/post1.json" data-toggle="ajax-load" data-template="post" data-target="#main-pane">post 1</a>

The refresh button in the "post" view also work despite being newly added via ajax, it fetches fresh comments and add them at the top using data-how="prepend"

<button class="btn btn-default" type="button" data-toggle="ajax-load" data-url="demo/data/fresh.json" data-template="comments" data-target="#comments-box" data-how="prepend">refresh</button>

Ajax forms magic

Click on [+] and try to submit. it will use ajax to submit the form. The magic comes from this simple attribute: onsubmit="return ajax_ops.submit_form(this);" which will submit the form and replace it with new contnt. To make this possibe using static files we used GET method to fetch a partail response but it will work on POST.

Handling errors

Click on "tweet 2" link on side pane which points to a non-exiting page (404). A template called "flashmsg" will be used. It will appear on the closest content class you can customize this using the following global setting: ajax_ops.flashmsg_opts.selector='.content:first'.

Complex multi-target operations

You can specify selectors that matches more than one element each specifies its own template.

<a data-toggle="ajax-load" href="/posts/today.json" data-target=".posts">my link</a>
<div class="posts" data-template="posts_titles"></div>
<div class="posts" data-template="full_posts"></div>

Ajax Modals Magic

You can see how simple is to create rich experience using ajax-modals and modal-forms, just try the following

click login from nav bar or from add comment side box
click on forgot password and note that the stacked modals
submit fotgot password form and see how it works, close success dialog and go back to login dialog.
click on register and note that it automatically closed the other modal.
click on login while in register modal and note the same thing
submit login dialog and see the failed login
submit the failed login form and see how it successfully logged you and
note that the success login cause the navbar login link to display avatar and the side box not also show the avatar

the above magic worked like this

any link/button with data-toggle="ajax-modal" will trigger modal pointed by "href" or "data-url"
the content of the url will be wrapped by a >div< with bootstrap modal classes (can be overriden) and shown
like register link it may be set to replace the current modal by having data-modal-attr='{"replace":1}'
the modal form might use onsubmit="return ajax_ops.modal_form(this);" which is based on submit_form we talked about.
you can tell it to close the modal on success by passing options to modal_form
the response to modal_form used ajax_ops.refresh('.me'); to refresh all user related elements
the nav link and the comment side box uses the same me.json to render two different templates from the same data

Even more complex operations

You can use data-toggle="ajax-ops" instead of data-toggle="ajax-load". Which instead of getting data or content it gets op-codes. Click on "tweet 1" link, you will see a button called "show more comments", clicking it will hide the button and append a text saying "no more comments" . It gets a list of operations each has 2 or 3 items, the operation, the target and the params

[
    ["remove","#more-comments"],
    ["load","#comments", {"how":"append", "text":"no more comments"}]
]

The other button appends templated data beside removing the button.

[
	["remove","#rel-posts"],
	["load","#comments", {"how":"append", "template": "post", "data": {
		"username":"Khaleel Tahseen", "content": "This is a SECOND test post", "comments": [{"username":"Ali Obada", "content": "this is a comment"}, {"username":"Khaleel Ahmed", "content": "this is another comment"}, {"username":"Ali Obada", "content": "this is a comment"}, {"username":"Khaleel Ahmed", "content": "this is another comment"}]
		}
	}]
]

People

Posts +

Tweets +

Add comment

Issues +