zacksheppard · August 29, 2015 14:04 · Jul 29, 2014 · Jul 29, 2014 · Jul 29, 2014 · Jul 29, 2014
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -1,4 +1,4 @@
-Notes from Flatiron School lecture w08.d04 showing different ways to us AJAX forms in Rails.
+Notes showing different ways to us AJAX forms in Rails.
 We will use a Todo list as an example domain for the examples.
 
 

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -76,7 +76,7 @@ Convention over configuration!
 $('ul').prepend("<%=j render @list %>")
 // it renders the @list object passed to it. By convention it looks for a 'list' partial to render.
 ```
-
+----
 `views/lists/_list.html.erb`
 ```ruby
 <li>

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -3,7 +3,7 @@ We will use a Todo list as an example domain for the examples.
 
 
 ### Lowest level of abstraction
----------------------------------
+----
 `views/lists/index.erb.html`  This will create the list input form
 (__Note__: This should also work in Sinatra)
 ```ruby
@@ -21,7 +21,7 @@ We will use a Todo list as an example domain for the examples.
 </ul>
 ```
 
----------------------------------
+----
 `/assets/javascripts/lists.js` This will listen to the form, catch the request, send it to the create route and reply modifying the page.
 ```javascript
 // create a function to handle the form data
@@ -51,6 +51,7 @@ remote: true is part of [rails/jquery-rails](https://github.com/rails/jquery-rai
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server using the original action.
 
+----
 `views/index.erb.html`  Create the list input form
 ```ruby
  # The 'remote: true' here is the key that makes this work.
@@ -69,6 +70,7 @@ When you tell the form it is a remote form it adds what's known as the 'universa
 Convention over configuration!
 * If we were submitting a form for a nested resource (for a list task for instance) the form_for would instead look like this `<% form_for [@list, Task.new], remote: true do |f| %>` Because task is a nested resource, and rails knows to look for a POST route of `list/1/task` we just need to pass it which list and rails will automatically use that route.
 
+----
 `views/lists/create.js.erb`
 ```javascript
 $('ul').prepend("<%=j render @list %>")
@@ -83,6 +85,7 @@ $('ul').prepend("<%=j render @list %>")
 </li>
 ```
 
+----
 `/assets/javascripts/lists.js` Notice that this file isn't here at all in this pattern
 ```javascript
 // The string injection is handled in the create.js.erb file

diff --git a/form_tag_remote_note.md b/form_tag_remote_note.md
@@ -1,2 +0,0 @@
-http://stackoverflow.com/questions/4227775/rails-form-for-remote-true-is-not-calling-js-method
-

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -89,13 +89,3 @@ $('ul').prepend("<%=j render @list %>")
 // The event handler has been abstracted away in remote: true
 // the post has also been abstracted away in remote: true. When using remote: true a new attribute to the form 'data-remote="true"'
 ```
-
-
-[continue at 2:27 from first vid]
-http://flatiron-videos.s3.amazonaws.com/ruby-005/remote-true-ajax.mp4
-http://flatiron-videos.s3.amazonaws.com/ruby-005/low-level-remote-true.mp4
-
-
-resources
-http://pcrglennon.github.io/blog/2014/07/20/starting-a-new-sinatra-app-from-scratch/
-http://guides.rubyonrails.org/working_with_javascript_in_rails.html
diff --git a/form_tag_remote_note.md b/form_tag_remote_note.md
@@ -0,0 +1,2 @@
+http://stackoverflow.com/questions/4227775/rails-form-for-remote-true-is-not-calling-js-method
+
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -44,17 +44,17 @@ $(function(){
 
 ```
 
-### AJAX form using `remote: :true`
+### AJAX form using `remote: true`
 
 This uses a built in rails method called remote to let the form know it will be using a remote submission that isn't the norm.
-remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
+remote: true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server using the original action.
 
 `views/index.erb.html`  Create the list input form
 ```ruby
- # The 'remote: :true' here is the key that makes this work.
-<% form_for List.new, remote: :true do |f| %>
+ # The 'remote: true' here is the key that makes this work.
+<% form_for List.new, remote: true do |f| %>
   <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">
 <% end %>
 
@@ -67,7 +67,7 @@ When you tell the form it is a remote form it adds what's known as the 'universa
 * For this example the original action would be POST to the `def create` route with html and automatically get view/create.html.erb back.
 * It will now take the same POST to `def create` but since the request was in JS, it will look for view/create.js.erb instead. 
 Convention over configuration!
-* If we were submitting a form for a nested resource (for a list task for instance) the form_for would instead look like this `<% form_for [@list, Task.new], remote: :true do |f| %>` Because task is a nested resource, and rails knows to look for a POST route of `list/1/task` we just need to pass it which list and rails will automatically use that route.
+* If we were submitting a form for a nested resource (for a list task for instance) the form_for would instead look like this `<% form_for [@list, Task.new], remote: true do |f| %>` Because task is a nested resource, and rails knows to look for a POST route of `list/1/task` we just need to pass it which list and rails will automatically use that route.
 
 `views/lists/create.js.erb`
 ```javascript
@@ -86,8 +86,8 @@ $('ul').prepend("<%=j render @list %>")
 `/assets/javascripts/lists.js` Notice that this file isn't here at all in this pattern
 ```javascript
 // The string injection is handled in the create.js.erb file
-// The event handler has been abstracted away in remote: :true
-// the post has also been abstracted away in remote: :true. When using remote: :true a new attribute to the form 'data-remote="true"'
+// The event handler has been abstracted away in remote: true
+// the post has also been abstracted away in remote: true. When using remote: true a new attribute to the form 'data-remote="true"'
 ```
 
 

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -91,7 +91,7 @@ $('ul').prepend("<%=j render @list %>")
 ```
 
 
-[continue at 1:55 from first vid]
+[continue at 2:27 from first vid]
 http://flatiron-videos.s3.amazonaws.com/ruby-005/remote-true-ajax.mp4
 http://flatiron-videos.s3.amazonaws.com/ruby-005/low-level-remote-true.mp4
 

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -51,7 +51,6 @@ remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-ra
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server using the original action.
 
-(Note: This example doesn't use a database so there would be a Where does the post go that isn't included here.)
 `views/index.erb.html`  Create the list input form
 ```ruby
  # The 'remote: :true' here is the key that makes this work.
@@ -68,11 +67,12 @@ When you tell the form it is a remote form it adds what's known as the 'universa
 * For this example the original action would be POST to the `def create` route with html and automatically get view/create.html.erb back.
 * It will now take the same POST to `def create` but since the request was in JS, it will look for view/create.js.erb instead. 
 Convention over configuration!
+* If we were submitting a form for a nested resource (for a list task for instance) the form_for would instead look like this `<% form_for [@list, Task.new], remote: :true do |f| %>` Because task is a nested resource, and rails knows to look for a POST route of `list/1/task` we just need to pass it which list and rails will automatically use that route.
 
 `views/lists/create.js.erb`
 ```javascript
-// ?? Need to look up the j render. I assume it's javascript render? 
 $('ul').prepend("<%=j render @list %>")
+// it renders the @list object passed to it. By convention it looks for a 'list' partial to render.
 ```
 
 `views/lists/_list.html.erb`

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -93,4 +93,9 @@ $('ul').prepend("<%=j render @list %>")
 
 [continue at 1:55 from first vid]
 http://flatiron-videos.s3.amazonaws.com/ruby-005/remote-true-ajax.mp4
-http://flatiron-videos.s3.amazonaws.com/ruby-005/low-level-remote-true.mp4
+http://flatiron-videos.s3.amazonaws.com/ruby-005/low-level-remote-true.mp4
+
+
+resources
+http://pcrglennon.github.io/blog/2014/07/20/starting-a-new-sinatra-app-from-scratch/
+http://guides.rubyonrails.org/working_with_javascript_in_rails.html
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -91,6 +91,6 @@ $('ul').prepend("<%=j render @list %>")
 ```
 
 
-[continue at 1:33 from first vid]
+[continue at 1:55 from first vid]
 http://flatiron-videos.s3.amazonaws.com/ruby-005/remote-true-ajax.mp4
 http://flatiron-videos.s3.amazonaws.com/ruby-005/low-level-remote-true.mp4
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -65,8 +65,10 @@ When you tell the form it is a remote form it adds what's known as the 'universa
 </ul>
 ```
 
-For this example the original action would be POST to the `def create` route with html and automatically get view/create.html.erb back.
-It will now take the same POST to `def create` but since the request was in JS, it will look for view/create.js.erb instead. Convention over configuration!
+* For this example the original action would be POST to the `def create` route with html and automatically get view/create.html.erb back.
+* It will now take the same POST to `def create` but since the request was in JS, it will look for view/create.js.erb instead. 
+Convention over configuration!
+
 `views/lists/create.js.erb`
 ```javascript
 // ?? Need to look up the j render. I assume it's javascript render? 

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -49,7 +49,7 @@ $(function(){
 This uses a built in rails method called remote to let the form know it will be using a remote submission that isn't the norm.
 remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
 
-When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server. 
+When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server using the original action.
 
 (Note: This example doesn't use a database so there would be a Where does the post go that isn't included here.)
 `views/index.erb.html`  Create the list input form
@@ -65,6 +65,8 @@ When you tell the form it is a remote form it adds what's known as the 'universa
 </ul>
 ```
 
+For this example the original action would be POST to the `def create` route with html and automatically get view/create.html.erb back.
+It will now take the same POST to `def create` but since the request was in JS, it will look for view/create.js.erb instead. Convention over configuration!
 `views/lists/create.js.erb`
 ```javascript
 // ?? Need to look up the j render. I assume it's javascript render? 

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -87,4 +87,6 @@ $('ul').prepend("<%=j render @list %>")
 ```
 
 
-[continue at 1:33 from first vid]
+[continue at 1:33 from first vid]
+http://flatiron-videos.s3.amazonaws.com/ruby-005/remote-true-ajax.mp4
+http://flatiron-videos.s3.amazonaws.com/ruby-005/low-level-remote-true.mp4
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -50,7 +50,7 @@ This uses a built in rails method called remote to let the form know it will be
 remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server. 
-----------------------------
+
 (Note: This example doesn't use a database so there would be a Where does the post go that isn't included here.)
 `views/index.erb.html`  Create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -50,9 +50,8 @@ This uses a built in rails method called remote to let the form know it will be
 remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server. 
-
-(Note: This example doesn't use a database so there would be a Where does the post go that isn't included here.)
 ----------------------------
+(Note: This example doesn't use a database so there would be a Where does the post go that isn't included here.)
 `views/index.erb.html`  Create the list input form
 ```ruby
  # The 'remote: :true' here is the key that makes this work.

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -51,7 +51,7 @@ remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-ra
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server. 
 
-(__Note:__ This example doesn't use a database so there would be a Where does the post go that isn't included here.
+(Note: This example doesn't use a database so there would be a Where does the post go that isn't included here.)
 ----------------------------
 `views/index.erb.html`  Create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -51,7 +51,7 @@ remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-ra
 
 When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server. 
 
-__Note:__ This example doesn't use a database so there would be a Where does the post go that isn't included here.
+(__Note:__ This example doesn't use a database so there would be a Where does the post go that isn't included here.
 ----------------------------
 `views/index.erb.html`  Create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -45,6 +45,7 @@ $(function(){
 ```
 
 ### AJAX form using `remote: :true`
+
 This uses a built in rails method called remote to let the form know it will be using a remote submission that isn't the norm.
 remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
 

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -5,6 +5,7 @@ We will use a Todo list as an example domain for the examples.
 ### Lowest level of abstraction
 ---------------------------------
 `views/lists/index.erb.html`  This will create the list input form
+(__Note__: This should also work in Sinatra)
 ```ruby
 <% form_for List.new do |f| %>
   <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -3,9 +3,6 @@ We will use a Todo list as an example domain for the examples.
 
 
 ### Lowest level of abstraction
-
-
- (Note: This should also work in Sinatra)
 ---------------------------------
 `views/lists/index.erb.html`  This will create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -4,7 +4,8 @@ We will use a Todo list as an example domain for the examples.
 
 ### Lowest level of abstraction
 
-(Note: This should also work in Sinatra)
+
+ (Note: This should also work in Sinatra)
 ---------------------------------
 `views/lists/index.erb.html`  This will create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -4,7 +4,7 @@ We will use a Todo list as an example domain for the examples.
 
 ### Lowest level of abstraction
 
-(__Note__: This should also work in Sinatra)
+(Note: This should also work in Sinatra)
 ---------------------------------
 `views/lists/index.erb.html`  This will create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -4,7 +4,7 @@ We will use a Todo list as an example domain for the examples.
 
 ### Lowest level of abstraction
 
-__Note__: This should also work in Sinatra
+(__Note__: This should also work in Sinatra)
 ---------------------------------
 `views/lists/index.erb.html`  This will create the list input form
 ```ruby

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -3,6 +3,7 @@ We will use a Todo list as an example domain for the examples.
 
 
 ### Lowest level of abstraction
+
 __Note__: This should also work in Sinatra
 ---------------------------------
 `views/lists/index.erb.html`  This will create the list input form

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -5,9 +5,8 @@ We will use a Todo list as an example domain for the examples.
 ### Lowest level of abstraction
 __Note__: This should also work in Sinatra
 ---------------------------------
-`views/index.erb.html`  This will create the list input form
+`views/lists/index.erb.html`  This will create the list input form
 ```ruby
-
 <% form_for List.new do |f| %>
   <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">
 <% end %>
@@ -35,13 +34,57 @@ function createList(event){
     // prepend that data fomratted into a new li
     new_list_html = '<li><a href="lists/'+ json.id +'">'+ json.name +'</li>
     $('ul').prepend(new_list_html)
-
   });
-
 };
 
+// Event listener that will call the above function.
 $(function(){
   $("form.new_list").submit(createList);
 })
 
-```
+```
+
+### AJAX form using `remote: :true`
+This uses a built in rails method called remote to let the form know it will be using a remote submission that isn't the norm.
+remote: :true is part of [rails/jquery-rails](https://github.com/rails/jquery-rails) 
+
+When you tell the form it is a remote form it adds what's known as the 'universal handler' which will select that form, bind an event to it's submit action, take off the original form envelope (the standard form submission), take the form data, put it in a new AJAX envelope, and send it out to the server. 
+
+__Note:__ This example doesn't use a database so there would be a Where does the post go that isn't included here.
+----------------------------
+`views/index.erb.html`  Create the list input form
+```ruby
+ # The 'remote: :true' here is the key that makes this work.
+<% form_for List.new, remote: :true do |f| %>
+  <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">
+<% end %>
+
+<ul id="todo-list">
+  # The iterator '<% @lists.each do |list| %>' is now taken care of in `views/lists/create.js.erb`
+  # The li itself is now in a partial in ``views/lists/_list.html.erb``
+</ul>
+```
+
+`views/lists/create.js.erb`
+```javascript
+// ?? Need to look up the j render. I assume it's javascript render? 
+$('ul').prepend("<%=j render @list %>")
+```
+
+`views/lists/_list.html.erb`
+```ruby
+<li>
+  <div class="view"><label><% link_to list.name, list %></label>
+  </div>
+</li>
+```
+
+`/assets/javascripts/lists.js` Notice that this file isn't here at all in this pattern
+```javascript
+// The string injection is handled in the create.js.erb file
+// The event handler has been abstracted away in remote: :true
+// the post has also been abstracted away in remote: :true. When using remote: :true a new attribute to the form 'data-remote="true"'
+```
+
+
+[continue at 1:33 from first vid]
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -22,7 +22,7 @@ __Note__: This should also work in Sinatra
 </ul>
 ```
 
---------------------------------------
+---------------------------------
 `/assets/javascripts/lists.js` This will listen to the form, catch the request, send it to the create route and reply modifying the page.
 ```javascript
 // create a function to handle the form data

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -4,7 +4,7 @@ We will use a Todo list as an example domain for the examples.
 
 ### Lowest level of abstraction
 __Note__: This should also work in Sinatra
-
+---------------------------------
 `views/index.erb.html`  This will create the list input form
 ```ruby
 
@@ -22,6 +22,7 @@ __Note__: This should also work in Sinatra
 </ul>
 ```
 
+--------------------------------------
 `/assets/javascripts/lists.js` This will listen to the form, catch the request, send it to the create route and reply modifying the page.
 ```javascript
 // create a function to handle the form data

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -3,9 +3,11 @@ We will use a Todo list as an example domain for the examples.
 
 
 ### Lowest level of abstraction
-_Note_: This would also work in Sinatra
+__Note__: This should also work in Sinatra
+
+`views/index.erb.html`  This will create the list input form
 ```ruby
-## views/index.erb.html  Create list input form
+
 <% form_for List.new do |f| %>
   <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">
 <% end %>
@@ -20,9 +22,8 @@ _Note_: This would also work in Sinatra
 </ul>
 ```
 
+`/assets/javascripts/lists.js` This will listen to the form, catch the request, send it to the create route and reply modifying the page.
 ```javascript
-// /assets/javascripts/lists.js Listen to the form, catch the request, send it to the create route and reply modifying the page.
-
 // create a function to handle the form data
 function createList(event){
   // prevent the form from submitting a normal http POST

diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -3,8 +3,9 @@ We will use a Todo list as an example domain for the examples.
 
 
 ### Lowest level of abstraction
+_Note_: This would also work in Sinatra
 ```ruby
-## views/index.erb.html Task list and input form
+## views/index.erb.html  Create list input form
 <% form_for List.new do |f| %>
   <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">
 <% end %>
@@ -17,5 +18,28 @@ We will use a Todo list as an example domain for the examples.
     </li>
   <% end %>
 </ul>
+```
+
+```javascript
+// /assets/javascripts/lists.js Listen to the form, catch the request, send it to the create route and reply modifying the page.
+
+// create a function to handle the form data
+function createList(event){
+  // prevent the form from submitting a normal http POST
+  event.preventDefault();
+
+  // AJAX post, using the forms specified "action". serialize() makes it a string. then JSON makes it JSON, which is a hash.
+  $.post($this).attr("action"),$(this).serialize(), function(json){
+    // prepend that data fomratted into a new li
+    new_list_html = '<li><a href="lists/'+ json.id +'">'+ json.name +'</li>
+    $('ul').prepend(new_list_html)
+
+  });
+
+};
+
+$(function(){
+  $("form.new_list").submit(createList);
+})
 
 ```
diff --git a/rails_ajax_forms.md b/rails_ajax_forms.md
@@ -0,0 +1,21 @@
+Notes from Flatiron School lecture w08.d04 showing different ways to us AJAX forms in Rails.
+We will use a Todo list as an example domain for the examples.
+
+
+### Lowest level of abstraction
+```ruby
+## views/index.erb.html Task list and input form
+<% form_for List.new do |f| %>
+  <input id="new-todo" placeholder="What needs to be done?" autofocus="" autocomplete="off">
+<% end %>
+
+<ul id="todo-list">
+  <% @lists.each do |list| %>
+    <li>
+      <div class="view"><label><% link_to list.name, list %></label>
+      </div>
+    </li>
+  <% end %>
+</ul>
+
+```
Original file line number	Diff line number	Diff line change
		@@ -1,2 +0,0 @@
		http://stackoverflow.com/questions/4227775/rails-form-for-remote-true-is-not-calling-js-method
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		http://stackoverflow.com/questions/4227775/rails-form-for-remote-true-is-not-calling-js-method