• Registered: 2009-04-17
  • Posts: 22

Topic: ajax before:send, success, complete requests not working

I am new to using Jquery in Rails. Could anyone provide a working example of a message that content is loading. I do not want to use the global ajaxStart because I don't want it called everytime.  I have partials that are pretty content heavy and would like to have a message just pop up telling people it is loading.  I have looked around and see bits and pieces of code to accomplish this, but I don't seem to grasp where all this goes.  Anything to point me in the right direction would be great. 

My code: index.html  <%= link_to 'Health & Beauty', health_contacts_path, :action => 'health',  :remote => true %>

health.js 

function (){
  $(".health")
    .bind("ajax:beforeSend",  function() {
  $("#spinner").show('slow');
    });
    .bind("ajax:success", function() {
  $("#spinner").hide();
    });
    .bind("ajax:complete", function(event, data, status, xhr) {
       $("#content").html("<%= escape_javascript(render(:partial => "health")) %>");
    });
});

Last edited by looloobs (2011-07-24 10:01:15)

  • Registered: 2007-06-11
  • Posts: 230

Re: ajax before:send, success, complete requests not working

Are these partials loading on the page load?  So when you come to the page, there are several different sections that are loading content and you want to give a spinner (similar to something like an iGoogle homepage)?

From your code it looks like you want to load the partials when you click the "Health & Beauty" link.  If so, this would work.  In concept, you're giving the remote link a CSS class to grab a hold of.  The jquery rails plugin does this differently; I think it has a data-remote attribute?  Can't remember...but you could grab that element instead of the class if you wanted.

What this code does is when you click the link it shows the spinner.  Your AJAX request then hits the server, which does some processing, and then the server returns javascript code to be executed by the browser which hides the spinner.

# html page
<%= link_to "H & B", health_contacts_path, remote: true, class: "remote" %>
<div id="content"></div>

# js file, assuming you've got the Document.ready... stuff already there
$("a.remote").live("click", function() {
  $("#spinner").show(); // recommend making this a utility method
});

# contacts_controller.rb
def index
  @contacts = Contact.all # whatever you want here...
end

# contacts/index.js.erb (important naming convention)
$("#content").html("<%= escape_javascript(render(:partial => "health")) %>");
$("#spinner").hide();

Not tested, but I'm writing without any coding in front of me, so hard to test right now.  It should work, though.

  • Registered: 2011-09-02
  • Posts: 1

Re: ajax before:send, success, complete requests not working

looloobs: I think you want to remove the semicolons at the end of the beforeSend and success bind calls.  They break the chaining of the calls.

You can think of it as writing thing.set_firstname('a');.set_lastname('b'); instead of thing.set_firstname('a').set_lastname('b').  See how the extra semicolon in the middle of the first version orphans the call to set_lastname so that it no longer refers to thing?