AJAXFetch Demo

AJAXFetch is a jQuery Plugin that lets you specify portions of your HTML that should fetch another HTML partial over AJAX and modify the current page with the result. What makes it unique is that it does this without you writing any JavaScript. The most common usage is to swap out a static portion of the page with a form for editing it, and then swap that back for the updated result. For example:

Since this demo doesn't have any server-side logic, the forms don't actually do anything when submitted. Normally you would post to a URL that saved the changes and then returned the HTML partial with updated values. This demo file is also static HTML: in practice, you should use a templating language to load the same partial for each static value during initial load as is used when the form returns. (You don't want the same presentation markup in the initial page and the HTML partial.)

Using AJAXFetch

1. Include the jQuery library in your HTML.
2. Include the AJAXFetch library in your HTML.
3. Add an ajaxfetch-and_____ CSS class (e.g. ajaxfetch-andswap) to any elements you want to trigger fetching.
4. For elements other than forms and links, add an href="..." attribute specifying the URL from which to fetch the content. (Yes, this is syntactically-invalid.)
5. (optional) Add an ajaxfetch-on_____ CSS class (e.g. ajaxfetch-onclick or even ajaxfetch-onmouseover) specifying the event that should trigger the fetch. Defaults to ajaxfetch-ondblclick for elements other than forms and links.
   • You can use ajaxfetch-onmanual to prevent any automatic event registration. In this case, you should call the ajaxfetch() method on a jQuery selection for your element when you want to make the call. See the ajaxfetch-asform example below.
6. (optional) Add an ajaxfetch-_______="..." custom attribute with the ID of another element on the page to affect with the results. Defaults to affecting the element the class is on. (Yes, this is also syntactically-invalid.)

You can perform different actions from the swap-out mode demonstrated above. The supported CSS mode classes are:

• ajaxfetch-andswap - replace this element (or another) with fetched content.
• ajaxfetch-andinsertbefore - add fetched content before this element (or another).
• ajaxfetch-andinsertafter - add fetched content after this element (or another).
• ajaxfetch-andremove - remove this element (or another).
• ajaxfetch-andappend - add fetched content to the end of this element (or another).
• ajaxfetch-andprepend - add fetched content to the start of this element (or another).
• ajaxfetch-andreset - after a successful form submission, reset the submitting form.

If you want to submit a set of HTML elements as a form (e.g. a table row with form elements inside), place the CSS class ajaxfetch-asform on the parent element. You will also need to supply form attributes on the element, and set up handlers to invoke the submission directly. For example:

<tr class="ajaxfetch-andswap ajaxfetch-asform ajaxfetch-onmanual" action="/update_item" method="post" ajaxfetch-reloadfrom="/partial/item/413">
  <td><input type="text" name="name" value="Bob's Your Uncle"></td>
  <td>
    <input type="hidden" name="id" value="413">
    <button class="save">save</button>
    <button class="cancel">cancel</button>
  </td>
</tr>
...
$('.ajaxfetch-asform .save').live('click',function(){
  $(this).closest('.ajaxfetch-asform').ajaxfetch();
});
$('.ajaxfetch-asform .cancel').live('click',function(){
  $(this).closest('.ajaxfetch-asform').ajaxfetch_reload();
});

Resetting Forms

The following example shows how to use AJAXFetch to dynamically append the results of a form submission to another element on the page and reset the form:

<div id="comments">Here's what others have said: ...</div>
<form action="new_comment.html" class="ajaxfetch-andappend ajafetch-andreset" ajaxfetch-append="comments">
  <textarea name="mycomment" cols="80" rows="3"></textarea>
  <button type="submit">add my comment</button>
</form>

License

AJAXFetch is released under an MIT License.

This page and the AJAXFetch library are copyright © 2008-2013 by Gavin Kistner. Comments, corrections, and criticisms are welcome.