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:

Double-click on the values below to make them editable.

Bob's Your Uncle

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.
  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:

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>
    <input type="hidden" name="id" value="413">
    <button class="save">save</button>
    <button class="cancel">cancel</button>
$('.ajaxfetch-asform .save').live('click',function(){
$('.ajaxfetch-asform .cancel').live('click',function(){

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>
Here's what others have said:
OMG, hawt!
Mixing JS logic with HTML markup? You suck!
(what you type won't actually be submitted in this static demo)


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.