Which is the preferred method: utilizing ajax calls from assets/javascript/.js or .js.erb views?

Question

Which is the preferred method: utilizing ajax calls from assets/javascript/.js or .js.erb views?

I am developing an admin service on Rails that communicates with a network communicator.

Here is my challenge: When a user clicks a button, they are presented with network groups to choose from. Once the user selects a group, they should be able to see the associated IP addresses. There are two forms on the page, and I need to send data to the page twice without causing it to reload.

The first server response provides a list of network group names.

The second server response displays a list of IP addresses within the selected group.

Now, here's the question:

What is the best approach to take after a user makes a request?

Using JS.ERB

This involves getting the data, putting it into views/some_file.js.erb, and including "respond_to{ |format| format.js }" in the controller. The expected outcome is for the browser to receive JavaScript, run the code on the client side, and then append the data into a table on the page.
Utilizing Ajax with JavaScript in the assets/javascript folder

In this scenario, data is sent to the client in JSON format. JavaScript code then makes an Ajax call to the server, receives the JSON data, and appends it into the table on the page.

I would appreciate an explanation detailing the advantages and disadvantages of each method. Thank you.

javascript ruby-on-rails ajax json erb

Answer 1

Answer №1

To effectively handle this task, it would be optimal to initiate an AJAX request to another controller action such as groups#names within your groups_controller.rb file and have that particular action render JSON content.

This can be accomplished through a JavaScript asset like app/assets/javascripts/script.js, with the following code snippet:

$('#get-group-names-button').live('click', function(event) {
  event.preventDefault();
  $.ajax({
    url: "/groups/names",
    type: 'post',
    data: {'groupId': 'whatever'}
  });
});

Subsequently, in the groups_controller:

def names
  if group_names
    render :json => group_names, :status => 200
  else
    render :status => 400
  end
end

Following this, you can parse the JSON response using jQuery's done() method on the client side and append the data accordingly with relevant HTML formatting using JavaScript.

For improved functionality, consider utilizing a client-side framework like Backbone.js alongside a templating language such as Handlebars.

If you require further guidance, refer to this insightful Railscast episode on the topic created by Ryan Bates

Answer 2

To effectively handle this task, it would be optimal to initiate an AJAX request to another controller action such as groups#names within your groups_controller.rb file and have that particular action render JSON content.

This can be accomplished through a JavaScript asset like app/assets/javascripts/script.js, with the following code snippet:

$('#get-group-names-button').live('click', function(event) {
  event.preventDefault();
  $.ajax({
    url: "/groups/names",
    type: 'post',
    data: {'groupId': 'whatever'}
  });
});

Subsequently, in the groups_controller:

def names
  if group_names
    render :json => group_names, :status => 200
  else
    render :status => 400
  end
end

Following this, you can parse the JSON response using jQuery's done() method on the client side and append the data accordingly with relevant HTML formatting using JavaScript.

For improved functionality, consider utilizing a client-side framework like Backbone.js alongside a templating language such as Handlebars.

If you require further guidance, refer to this insightful Railscast episode on the topic created by Ryan Bates

Which is the preferred method: utilizing ajax calls from assets/javascript/.js or .js.erb views?

Answer №1

Similar questions

NodeJS: Extract images based on specified coordinates

Tips on Including Static Header and Footer in Multiple HTML Pages

Creating immersive experiences with fabric.js in fullscreen mode on canvas

Issue: 'The server cannot be started because the path is not defined' error message appears

The `.append()` function includes HTML content as plain text

Steps for retrieving each element from a List of JSONObjects stored in ArrayList named 'json':

Submitting information retrieved through an AJAX request to a MySQL database using PHP

What is the best way to combine the elements within an array with the elements outside of the array in order to calculate their sum?

Using jQuery to dynamically load custom post type data in WordPress upon clicking

Modify follow status once axios request is completed in Vue

What is the best way to implement an alert box in MVC without triggering a page redirection?

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Use Puppeteer and Node.js to repeatedly click a button until it is no longer present, then initiate the next step

In the world of React in Meteor, the command event.preventDefault() doesn't seem

Using VueJS for Dynamic Class Binding

Issues with Ajax response causing PHP and HTML submit button to not function properly

Managing multiple Socket.io connections upon page reload

What is the process for importing the util module in Node.js?

how can you activate a modal without relying on bootstrap?

Getting rid of background color in a tooltip using Material UI

Which is the preferred method: utilizing ajax calls from assets/javascript/*.js or *.js.erb views?

Answer №1

Similar questions

NodeJS: Extract images based on specified coordinates

Tips on Including Static Header and Footer in Multiple HTML Pages

Creating immersive experiences with fabric.js in fullscreen mode on canvas

Issue: 'The server cannot be started because the path is not defined' error message appears

The `.append()` function includes HTML content as plain text

Steps for retrieving each element from a List of JSONObjects stored in ArrayList named 'json':

Submitting information retrieved through an AJAX request to a MySQL database using PHP

What is the best way to combine the elements within an array with the elements outside of the array in order to calculate their sum?

Using jQuery to dynamically load custom post type data in WordPress upon clicking

Modify follow status once axios request is completed in Vue

What is the best way to implement an alert box in MVC without triggering a page redirection?

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Use Puppeteer and Node.js to repeatedly click a button until it is no longer present, then initiate the next step

In the world of React in Meteor, the command event.preventDefault() doesn't seem

Using VueJS for Dynamic Class Binding

Issues with Ajax response causing PHP and HTML submit button to not function properly

Managing multiple Socket.io connections upon page reload

What is the process for importing the util module in Node.js?

how can you activate a modal without relying on bootstrap?

Getting rid of background color in a tooltip using Material UI

Which is the preferred method: utilizing ajax calls from assets/javascript/.js or .js.erb views?