Jquery and Ajax in rails

This is a basic guide to utilizing Jquery and Ajax in Rails, written by Eric Chen, Christine Marquardt and Jesse Clayburgh.

Ajax: using Javascript to make requests to the server, parse the response, and update information on the current web page.

While Rails ships with CoffeeScript (a javascript compilier-- an more 'compact' way of writing Javascript), it's highly recommended to continue using Javascript like we've been using the past 3 weeks throughout phase II.

Rails uses a technique called "Unobtrusive JavaScript" to handle attaching JavaScript to the DOM.

Here's the simplest way to write JavaScript. You may see it referred to as 'inline JavaScript':

<a href="#" onclick="this.style.backgroundColor='#990000'">Paint it red</a>
When clicked, the link background will become red. Here's the problem: what happens when we have lots of JavaScript we want to execute on a click?

<a href="#" onclick="this.style.backgroundColor='#009900';this.style.color='#FFFFFF';">Paint it green</a>
Awkward, right? We could pull the function definition out of the click handler, and turn it into CoffeeScript:

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
And then on our page:

<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>
That's a little bit better, but what about multiple links that have the same effect?

<a href="#" onclick="paintIt(this, '#990000')">Paint it red</a>
<a href="#" onclick="paintIt(this, '#009900', '#FFFFFF')">Paint it green</a>
<a href="#" onclick="paintIt(this, '#000099', '#FFFFFF')">Paint it blue</a>
Not very DRY, eh? We can fix this by using events instead. We'll add a data-* attribute to our link, and then bind a handler to the click event of every link that has that attribute:

paintIt = (element, backgroundColor, textColor) ->
  element.style.backgroundColor = backgroundColor
  if textColor?
    element.style.color = textColor
 
$ ->
  $("a[data-background-color]").click ->
    backgroundColor = $(this).data("background-color")
    textColor = $(this).data("text-color")
    paintIt(this, backgroundColor, textColor)
<a href="#" data-background-color="#990000">Paint it red</a>
<a href="#" data-background-color="#009900" data-text-color="#FFFFFF">Paint it green</a>
<a href="#" data-background-color="#000099" data-text-color="#FFFFFF">Paint it blue</a>
We call this 'unobtrusive' JavaScript because we're no longer mixing our JavaScript into our HTML. We've properly separated our concerns, making future change easy. We can easily add behavior to any link by adding the data attribute. We can run all of our JavaScript through a minimizer and concatenator. We can serve our entire JavaScript bundle on every page, which means that it'll get downloaded on the first page load and then be cached on every page after that. Lots of little benefits really add up.


Normally, 
How do I create a link that submits a GET request via AJAX in Rails?
How do I make a form submit via AJAX?
How do I process the response from the server?
How do I control what HTTP verb/method (POST, GET, etc.) my AJAX requests make?



sources: http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html