Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 80 lines (54 sloc) 2.559 kB
91b765c @ratnikov Added a short README about installation.
authored
1
4a95460 @ratnikov Updated the readme to use rdoc style.
authored
2 = Ajax Resource - Javascript implementation of REST resource
3
4 = Installation
5
6 == Update Rakefile
7
8 To include the ajax_resource installation tasks, add following to Rakefile:
9
10 require 'task/ajax_resource'
11
12 == Run installer task
13
14 To install, run the <tt>ajax_resource:rails:install</tt> task:
15
16 rake ajax_resource:rails:install
17
9308ddb @ratnikov Changed + to <tt>
authored
18 This will install <tt>ajax_resource-src.js</tt> and <tt>ajax_resource-min.js</tt> to <tt>Rails.root/public/javascripts</tt> directory.
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
19
5c8613d @ratnikov Removed junk. Fixed naming.
authored
20 = AjaxResource.Form
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
21
5c8613d @ratnikov Removed junk. Fixed naming.
authored
22 <tt>AjaxResource.Form</tt> allows to make a form handle submission and error handling of an AjaxResource.
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
23
24 == Example
25
26 Suppose you have a form to create a new <tt>Story</tt> resource, such as:
27
119180c @ratnikov Reflected new changes in the readme
authored
28 <div class="new-story-form { 'author_id' : 5 }">
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
29 <div class="error" style="display: none"><p>Please review following errors:</p><ul></ul></div>
30
31 <label for="body"><p>Your story:</p></label>
32 <textarea name="story[body]"></textarea></p>
33 <input type="submit" value="Publish" /></p>
34 </div>
35
36 <ul class="story-list">
37 </ul>
38
39 In your story.js file you would need to specify the <tt>Story</tt> resource with something like:
40
119180c @ratnikov Reflected new changes in the readme
authored
41 var Story = function(spec) {
42 this._author_id = spec.author_id;
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
43
119180c @ratnikov Reflected new changes in the readme
authored
44 // initialize the AjaxResource.Base functionality
45 AjaxResource.Base.apply(this, [ { resource : 'story', controller : 'stories' } ]);
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
46 };
47
119180c @ratnikov Reflected new changes in the readme
authored
48 // include the AjaxResource.Base functionality
49 jQuery.extend(Story.prototype, AjaxResource.Base.prototype);
50
51 // override the prefix to be 'user/authors/:author_id'
52 Story.prototype.prefix = function() {
53 return '/user/authors/' + this._author_id;
54 };
55
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
56 Finally, hook form functionality into the created form using the <tt>Story</tt> model:
57
58 jQuery(document).ready(function() {
59 jQuery("div.new-story-form").each(function() {
119180c @ratnikov Reflected new changes in the readme
authored
60 var form = this;
4c0d070 @ratnikov NewForm => Form
authored
61 var story_form = new AjaxResource.Form(this, {
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
62 on_create: function(model) {
63 alert("Successfully created a story!");
64
65 // add the story html to the story list
119180c @ratnikov Reflected new changes in the readme
authored
66 jQuery('ul.story-list').prepend("<li>"+story.html()+"</li>");
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
67 },
119180c @ratnikov Reflected new changes in the readme
authored
68 model: function() {
69 // build a new story using the author_id specified in metadata of this form
70 // (using jQuery metadata plugin)
71 return new Story(form.metadata().author_id);
72 }
4e653f9 @ratnikov Updated the readme with exampel to use NewForm.
authored
73 });
74 });
75 });
76
77 And that's it! If the returned request contains errors (e.g. { "story" : { "errors" : [ [ "Body", "is blank" ] ] } })
78 it will automatically update the ul in the errors div. If the story was successfully created, it will invoke the
79 on_create callback with the update story passed as parameter.
Something went wrong with that request. Please try again.