Traditional way of performing AJAX operation in Rails

Magic of performing AJAX operation in Ruby on Rails

There are tons of tutorials explaining how we can use the traditional way to perform AJAX operation. So basically, this section will cover various ways through which we can perform AJAX operation (let’s be more specific AJAX operation in Rails application).

Basic way to perform AJAX operation

Let’s start with a very basic way to perform AJAX operation as below,

index.html.erb
<a href=”<%= some_randoms_path %>” id=”random_id”>Button/Link</a>
OR
<%= link_to “Button/Link”, some_randoms_path, id: ”random_id” %>

I’m considering the scenario where on click of <a> tag will retrieve some data from index method of SomeRandomsController which will validate/process information and give out some response without reloading or interfering display of the loaded web-page (via AJAX operation in short). For doing such an operation we simply need to add the following line of code given below,

some_randoms.js
$(document).on(‘click’, ‘#random_id’, function(){
 $.ajax({
  url: ‘/some_randoms/index.json’,
  data: {random_param:”Hello there!”},
  dataType: “json”,
  success: function(response) {
  var response = data.random_param_name;
  alert(“Response is => ” + response)
 },
 error: function(error){console.log(error)}
 });
});

Note 1 : Be sure with the dataType used in the code, it could be of type ‘json’ or ‘text’ depending on the data that needs to be sent or operation to perform in the controller end.

Note 2 : The field ‘url’ used can be static or dynamic depending upon the controller method to be called. Let’s say dynamic url with some id/slug is included in the url link then the url can simply be defined as,var url_value = window.location.pathname + ‘.json’ OR var url_value = window.location.href + ‘.json’

The type ‘success’ will be called after a successful response is received from the controller else ‘error’ will be called and the operation defined in it gets performed. But for now we have just sent the request to index method of SomeRandomsController, in which the data will get processed and response will be generated as below,

some_randoms_controller.rb
def index
  # your code/ logic goes here
  return render json: { random_param_name: “Random event created successfully!”}
end

And that’s it. The response will be sent to the view (index.html.erb) and in the javascript file the ‘ajax:success’ is defined already to perform further operation.In case response gets failed, code in error field will get performed.

Shorthand for AJAX operation

The shorthand for AJAX operation will include performing the desired operation using jQuery which again can be presented in different ways and one of them is given as below,

some_randoms.js
$.get(‘/some_randoms/index.json).done(function(data) {
  var response = data.random_param_name;
  alert(“Response is => ” + response);
}).fail(function(error) {
  console.log(‘Error: ‘ + error);
});

Similar to this, another way to perform the desired operation (which gives additional way to include data to send along with dataType to the controller) can be given as below,

some_randoms.js
$.get( “/’some_randoms/index.json”, {random_param:”Hello there!”}, function(data){
  alert(“Response is => ” + data);
}, “text”);

Note 1 : The request type to send via such techniques can also be of type ‘post’ which can be given as ‘$.post’ instead of ‘$.get’ at the beginning.

Rails way of performing AJAX operation using remote:true is also a great way to perform the same operation with less coding.

Ofcourse their can be other ways to perform AJAX operation using Javascript/Jquery, so keep exploring!