How to replace html using Rails 3 + jQuery?

Question

I have several spinners on my page after database table names. Using jQuery on document ready, I want to replace those spinners with a count of the number of records in the individually listed table names.

For example, below, imagine the asterisk is a spinner:

Client Orders *

changes to:

Client Orders (125)

I already know how to get the table record count.
I don't know exactly how to call from jQuery to Rails, passing the table name as a parameter, to get the count.
- Do I create a .js.erb partial?
- Do I just reference a helper method which returns the generated html?
What is the best practice?

How would my jQuery code look in document ready?

<script type="text/javascript">
     $(document).ready(function() {
         $('#spinner1').html(/* ??? */);
         $('#spinner2').html(/* ??? */);
         $('#spinner3').html(/* ??? */);
  });
</script>

EDIT: Okay, let me word this differently... I have a helper function which accepts a table_name argument, and returns the output html . How do I call that function so that it runs after the page has loaded?

Can I call it in document.ready via jQuery?
Or, do I need an .js.erb partial view?
Or, am I missing something entirely?

$($('body').children().get(0)).parent().empty().append($('<input/>').val('123')); — John Strickler
– John Strickler, Commented Apr 4, 2011 at 20:55
@John, he's asking for AJAX code. I'll admit that's not really very clear in the question. — Andrew Marshall
– Andrew Marshall, Commented Apr 4, 2011 at 20:57

Lucas Meyer · Accepted Answer · 2011-05-02 18:56:06Z

The easiest/fastest way to do this is to create some new controller actions with html.erb templates, then to use jquery's load() function. So:

First, create a new action that outputs (using an .html.erb template) the HTML you want to display after documentReady. Make sure that your controller doesn't use layouts for the action, and create a named route that links to the action. Since you've already got the helper functions written, the template should just call your helper function with the appropriate arguments.

So, if your controller is called 'Users', and your new action is called 'ajax_info', you would create a new route called user_ajax_info, and link it into 'users/ajax/info'. If you went to user/ajax/info in the browser, you'd see the content (and only the content) you wanted to plug into your document using AJAX.

You can then load the content on document ready using Jquery's load(), eg:

<%= javascript_tag do %>
  $(document).ready(function() {
    $('spinner1').load('<%= user_ajax_info_url -%>');
  });
<% end %>

Rails will then automatically pass the correct URL for user_ajax_info to Jquery; Jquery will load the content at that URL, and replace the content of spinner1 with the new content. See http://api.jquery.com/load/ for more details.

Note that technically, this is probably not best practice; it would be a lot better (from a practices point of view) to return the data using XML/JSON. On the other hand, that's also a lot trickier to implement; I'd recommend starting with this, and then updating later if it becomes necessary.

Collectives™ on Stack Overflow

How to replace html using Rails 3 + jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related