Ajax Resource - Javascript implementation of REST resource

Installation

Update Rakefile

To include the ajax_resource installation tasks, add following to Rakefile:

  require 'task/ajax_resource'

Run installer task

To install, run the ajax_resource:rails:install task:

  rake ajax_resource:rails:install

This will install ajax_resource-src.js and ajax_resource-min.js to Rails.root/public/javascripts directory.

AjaxResource.Form

AjaxResource.Form allows to make a form handle submission and error handling of an AjaxResource.

Example

Suppose you have a form to create a new Story resource, such as:

  <div class="new-story-form { 'author_id' : 5 }">
    <div class="error" style="display: none"><p>Please review following errors:</p><ul></ul></div>

    <label for="body"><p>Your story:</p></label>
    <textarea name="story[body]"></textarea></p>
    <input type="submit" value="Publish" /></p>
  </div>

  <ul class="story-list">
  </ul>

In your story.js file you would need to specify the Story resource with something like:

  var Story = function(spec) {
    this._author_id = spec.author_id;

    // initialize the AjaxResource.Base functionality
    AjaxResource.Base.apply(this, [ { resource : 'story', controller : 'stories' } ]);
  };

  // include the AjaxResource.Base functionality
  jQuery.extend(Story.prototype, AjaxResource.Base.prototype);

  // override the prefix to be 'user/authors/:author_id'
  Story.prototype.prefix = function() {
    return '/user/authors/' + this._author_id;
  };

Finally, hook form functionality into the created form using the Story model:

  jQuery(document).ready(function() {
    jQuery("div.new-story-form").each(function() {
      var form = this;
      var story_form = new AjaxResource.Form(this, {
        on_create: function(model) {
          alert("Successfully created a story!");

          // add the story html to the story list
          jQuery('ul.story-list').prepend("<li>"+story.html()+"</li>");
        },
        model: function() {
          // build a new story using the author_id specified in metadata of this form
          // (using jQuery metadata plugin)
          return new Story(form.metadata().author_id);
        }
      });
    });
  });

And that’s it! If the returned request contains errors (e.g. { "story" : { "errors" : [ [ "Body", "is blank" ] ] } }) it will automatically update the ul in the errors div. If the story was successfully created, it will invoke the on_create callback with the update story passed as parameter.