How can I use JQuery to load content from a database via a ruby on rails action method?

Question

I have a page which needs to pull content from a database and potentially other sources.

This is how I've structured my ruby on rails application.

/Index - this has three different sections which needs to load in three different types of content. Each one will take different amount of time to return, as such I want to display a loading message while I'm playing for each div to be filled with data.

To load the data, ideally I want to call into a Ruby method on my controller and then render a partial.

I've had a search around, but I can't see how you can load the page index and then load data from action methods as a separate action.

Answer 1

You need to use ajax for that.

http://docs.jquery.com/Ajax

I don't know how to use ruby or ruby on rails. But I guess the concept is the same.

An example:

$.post("yourAjaxTarget.html",{ //html as an example
    attribute1: "blabla",
    attribute2: 1234
      }, function(data){
         //do something
      }, "json");

Answer 2

Assuming that you installed jRails plugins.

class MyController < ApplicationController

  def index
    # your main action
  end

  def long_section
    # this method should accept XHR requests
    # and render the HTML view
    # long_section.html.erb
    render :layout => false # or partial
  end

  def very_long_section
    # this method should accept XHR requests
    # and render the HTML view
    # very_long_section.html.erb
    render :layout => false # or partial
  end

end

In your index.html.erb view.

<h1>Index</h1>

<div id="index">First section here.</div>
<div id="second">Second section here.</div>
<div id="third">Third section here.</div>

<%= remote_function(:action => "long_section", :update => "second") %>
<%= remote_function(:action => "very_long_section", :update => "third") %>

Answer 3

If you're using a more recent version of Rails, and wanted to do this in an unobtrusive fashion as possible, you'd use the :respond_to options in your controller, like so:

class MyController < ApplicationController

  def first_method
     respond_to do |format|
        format.html # this handles normal requests asking for html
        format.js # this handles requests asking for javascript to be sent instead
      end
  end

end

If you're responding to a click, you'd do something like firing the query like so on the page

$("a.element_you_click_to_trigger").click(function(e) {
  e.preventDefault(); // make sure clicking doesn't trigger unneeded event bubbling
  $.ajax({url: "/controller/first_method", type: "POST", dataType: "script"}); // send a request and tell the server that you want javascript back
}

Just like you have an index.html.erb file in your views folder for that controller, you'd have a similar first_method.js.erb file in relevant views folder along side your index.html.erb file:

views
  controller
    index.html.erb
    first_method.js.erb

This will return javascript that gets executed client side, but it gets build server side, so you can contain rails ERB fragments, so you can do something like this:

$('#loading_placeholder_element').html('<%= escape_javascript(render(:partial => "create")) %>');

// do some other stuff you fancy in the page

// then make the next call once the other stuff is over (you may need to add this as a call back on an animation):
$.ajax({url: "/controller/second_method", type: "POST", dataType: "script"});

You'd then repeat the same process again for each of the others longer methods that fsmf highlighted.

I found this Railscast on jQuery incredibly helpful when I was learning this a couple of months ago, and I'd really recommend it.

Hope this helps !