1

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")) %>");
    });
 });

Thanks so much

EDIT: I changed the code in health.js, I don't understand what this is not working. If I take out the ajax:beforeSend and ajax:success then ajax:complete will load. If those two are in there nothing works.

looloobs
  • 761
  • 2
  • 11
  • 24
  • Perhaps this is answered in the following question: http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery – mliebelt Jul 23 '11 at 14:34

1 Answers1

1

When a user clicks on something that would load a partial, I immediately reveal my throbber ( loading image ).

$(".throb_2").fadeIn();

Then in the file that is loading show.js.haml, I hide it again when the partial is being called.

==  $(".throb_2").fadeOut();
==  $(".opened_gallery").html("#{ escape_javascript(render :partial => 'photo_index') }").hide().fadeIn();

Update

It sounds like I should brief you up on how I call AJAX calls in general..

Step 1.. render your link_to to return false;

$(".ajax").live("click", function(){
 $.get($(this).attr("href"), null, null, "script");
 return false;
});

Now any link that you add the .ajax class too will call the controller/action, but not actually redirect your browser.

In my case, this action was my show action. But I don't have a show.html.erb file, I have a show.js file. And in that file, I perform the javascript methods above.

Trip
  • 25,831
  • 41
  • 146
  • 260
  • Alright so I a sure this is really obvious, but in my code I have a link_to, fading in an image makes complete sense. I am just lost on where to actually put the code that is called when my link_to is called. Or maybe I just don't understand what should be happening. Thanks for your help. – looloobs Jul 23 '11 at 19:09
  • thanks for your help, I edited my original post to show what I have now, it still doesn't work but I can't seem to understand why. – looloobs Jul 24 '11 at 13:42