1

I am having an issue with AJAX being the dominant action in a JQuery function. I would like this code to be somewhat linear and async doesn't seem to have an effect. What I am trying to do is display a "loader", and then hide said "loader" when the script has finished. I have many other instances of this but without the AJAX call. Instead I have used $.post, but for this specific instance $.ajax meets my needs better.

Desired result:

I would like to display the "loader" the instant "select_add_user".change is called. I would like the loader to stay put until the script (including the ajax) is finished.

Actual result:

The ajax loads FIRST without even displaying the loader, and then on "#select_sub_group".append the loader displays for a millisecond while the script appends my HTML.

Here is my script:

<script type="text/javascript"> $("#select_user_add").change(function(){ $("#loader:hidden").show("fast"); $('#select_sub_group').html(''); var appendD = ""; txt=$("#select_user_add").val(); $.ajax({ async: false, // For async, so it finishes running url: "get_ug.php", data: { id: txt }, type: "POST", dataType: "json", success: function(data){ $.each(data, function() { appendD = appendD + '<option id="usg' + this.id + '" value="' + this.id + '">' + this.label + '</option>'; $('#lgroup_' + this.id).css('background-color', '#CCFFCC'); }); } }); $('#select_sub_group').append(appendD); $("#loader").hide("fast"); }); </script>

Racking my brain on this one .. It's either REALLY simple, or REALLY hard .. lol

Improve this question
3
  • 1
    I would remove async: false and put $('#loader').hide("fast"); inside your success function. Commented Jul 11, 2012 at 16:58
  • @lbstr -- Please submit an answer really quick .. I'd like to give you the "green check mark". Thanks! Commented Jul 11, 2012 at 17:23
  • You're welcome! I've added an answer. Nothing more than a copy/paste of my comment, but it sounds like you get the idea.. Commented Jul 11, 2012 at 19:06

4 Answers 4

Reset to default
1

I would remove async: false and put $('#loader').hide("fast"); inside your success function.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Put this $("#loader").hide("fast"); inside the success: function.

success: function(data){ $.each(data, function() { appendD = appendD + '<option id="usg' + this.id + '" value="' + this.id + '">' + this.label + '</option>'; $('#lgroup_' + this.id).css('background-color', '#CCFFCC'); }); $("#loader").hide("fast"); }
Improve this answer

4 Comments

I moved it inside, no effect.
Where is the onclick function, inside that, give the $("#loader:hidden").show("fast");!
If you look at the top of the code its called directly after $("#select_user_add").change -- Same as a .click, but it's a <SELECT> menu, so there is no .click.
you had it almost right .. I guess I had to take the async: false out whilst moving the hide into the success function. Thanks!
0

Use the beforeSend callback to start your loader, then the complete callback to stop the loader.

http://api.jquery.com/jQuery.ajax/

Improve this answer

1 Comment

I tried that to no avail, it still "blinks" the loader. ..... beforeSend: function(){ $("#loader:hidden").show("fast"); },
0

The container for your spinner should look like this in your HTML:

<div id="loader" style="display:none"></div>

To show the loader:

$("#loader").show("fast");

To hide the loader:

$("#loader").hide("fast");
Improve this answer

1 Comment

thanks for your reply .. but I can get the thing to show, just not in the right order.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.