Last active
December 24, 2015 20:49
-
-
Save kierarad/6861105 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| A few things to note about AJAX and JQuery with Rails: | |
| 1- Rails ships with CoffeeScript (see coffeescript.org) | |
| 2- Jquery is officially bundled with the Rails (jquery-rails gem) | |
| 3- Rails uses Unobtrusive JavaScript (jquery_ujs library) | |
| Unobtrusive JavaScript? What's that? | |
| - ujs is a way to seperate your HTML, and CSS from your Javascript | |
| So how do we do that? Here is an example of obtrusive javascript: | |
| ``` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Example</title> | |
| </head> | |
| <body> | |
| <a href="#" onclick="alert('hello world!');">Click Here</a> | |
| </body> | |
| </html> | |
| ``` | |
| When we make this unobtrusive, we will remove the inline javascript and use and id to reference the link in a seperate file. | |
| The new HTML would look like this: | |
| ``` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>UJS Example</title> | |
| <script src="example.js"></script> | |
| </head> | |
| <body> | |
| <a href="#" id="alert">Click Here</a> | |
| </body> | |
| </html> | |
| ``` | |
| And the example.js would look like this (note this is in jQuery): | |
| ``` | |
| $(function(){ | |
| $("#alert").click(function(){ | |
| alert('hello world!'); | |
| }); | |
| }); | |
| Why is unobtrusive javascript important? | |
| - Cleaner code | |
| - Seperates your HTML from your javascript (therefore decouples it) | |
| - Allows us to use any javascript framework (such as Jquery! wahoo! thanks rails 3) | |
| So now that we've covered jQuery/UJS, how do we incorporate AJAX using rails? | |
| First we have to "turn on" AJAX for an element (ie: a form, button, or link). We do this by setting the remote option to true when using the Ruby helpers (form_for, form_tag, link_to, button_to). | |
| ``` | |
| <%= form_for (@model, remote:true) do |f| %> | |
| ... | |
| <% end %> | |
| ``` | |
| What exactly does setting the remote option to true do? | |
| When rails creates your form it will insert the data-remote attribute. (HTML 5 allows you to add any custom tag to an HTML element as long as it is proceeded by data). | |
| ``` | |
| <form data-remote="true"></form> | |
| ``` | |
| Notice that inline js is not being added to the form. | |
| Now that we've set our element to use AJAX, what do we handle a return from an AJAX call? | |
| We have to instruct our controller to respond to an AJAX request by pointing it to the js file in each respond_to block that we are going to call via AJAX. | |
| Once we've instructed our controller to respond we instruct the correlated view to perform our js and render accordingly. | |
| Each rails UJS AJAX call provides custom events that can be attached to: | |
| ajax:before - before the whole ajax business | |
| ajax:beforeSend - before the request is sent | |
| ajax:success - after completion, if the HTTP response was a success | |
| ajax:error - after completion, if the server returned an error ** | |
| ajax:complete - after the request has been completed, no matter what outcome | |
| ajax:aborted:required - when there are blank required fields in a form | |
| ajax:aborted:file - if there are non-blank input:file fields in a form | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment