0

I'm having trouble displaying a spinner in a Rails 3.2 app that uses jQuery.

Entering site/assets/javascripts/application.js displays the code below so I know it is loading.

Updated with feedback - In my assets/javascripts/site.js:

$(document).ready(function() {
  $("#change_item").change(function() {
    $("#spinner").show();
    var item_id = $(this).val();
    var url = "/system/" + item_id + "/change_item/";
    $.post(url, item_id, function(html) {
    $("#spinner").hide();
    window.location.reload(true);
    });
  });
});

The pull down menu:

<%= select_tag "current_item", options_from_collection_for_select(current_user.accessible_items, "id", "name", session[:item]), :id=>"change_item" %>

In my layout file:

    <div id = "spinner" style = "display:none;"><%= image_tag "spinner.gif" %></div>

I've compared what I'm doing to numerous Google results but am having trouble determining what I'm doing wrong.

Thanks.

Jay
  • 6,206
  • 11
  • 48
  • 82
  • What is `#change_item`? – Mischa Jun 09 '13 at 14:46
  • @Mischa, It is the id of the pull down menu that changes the item. Put it in the question. – Jay Jun 09 '13 at 14:57
  • Since you accepted Adit's answer it seems your problem is solved. Could you let us know what the problem actually was? Just curious... – Mischa Jun 11 '13 at 03:51
  • @Mischa, I had a mix of ajax and post in the code. Removed ajax. Refreshed the page and used the pull down menu again. It still didn't work. Shut down my laptop, came back to it later, and with no additional change it was working. – Jay Jun 12 '13 at 12:43

2 Answers2

2

Hi Jay in your code up you are using a mix of jQuery.post() AND jQuery.ajax: the first is actually a shorthand of the other, so you should use only one.

Your code should be like this:

  $.post(url, item_id, function(html) {
    window.location.reload(true);
    $("#spinner").hide();
  });

The third argument is the callback for the ajax call.

You could in fact even shorten this code up using ujs which is a very simple way to simplify these operations, but this depends on your actual code; is especially good if you have links which points unobtrusively to other pages.

--

Update after your comment - "The part that is not working is $("#spinner").show()": to me this works flawless:

<%= select_tag "current_item", options_from_collection_for_select(User.all, 'id', 'name'), :id=>"change_item" %>

$(document).ready(function() {
  $("#change_item").change(function() {
    $("#spinner").show();
    // any code after this line should not affect the #spinner.show()
  });
});
Adit Saxena
  • 1,617
  • 15
  • 25
  • 2
    It also raises the question of why the OP is bothering with Ajax if they're just going to reload the page anyway... – Dave S. Jun 09 '13 at 13:45
  • @Adit, thanks. I updated the jQuery per your input. The part that is not working is $("#spinner").show() not hide. – Jay Jun 09 '13 at 14:34
1

It's seems select_tag generates an id automatically. I'm not sure if you can manually override it. See examples in the API I'm linking to.

So, in your case:

<%= select_tag "current_item", ... %>

will generate the following HTML:

<select name="current_item" id="current_item">

The solution would be to use #current_item instead of #change_item in your JavaScript. This is the only thing I can think of. Other than this your code works fine.

(Except of course the nonsensical use of window.location.reload(true); after an Ajax call. Why use Ajax if you're going to reload the page anyway?)

If this doesn't solve your problem, please post the generated HTML for the select tag.

Mischa
  • 42,876
  • 8
  • 99
  • 111
  • its true the second part of your statement but in fact the id of rails' select_tag can be overridden - please check with this example: <%= select_tag "current_item", options_from_collection_for_select(User.all, 'id', 'name'), :id=>"change_item" %> – Adit Saxena Jun 09 '13 at 22:26