Cannot figure out when to hide and show loading animation with JQuery

Question

I have a loading animation which I initially hide in my application.js file:

$('#loading_field').hide();

I have an autocomplete field, and I want the animation to appear when the user starts typing, and for it to disappear when the autocomplete suggestion results appear. Below is my jquery code for the jquery ui autocomplete plugin:

$(".showable_field").autocomplete({
    minLength: 1,
    source: '/followers.json',
    focus: function(event, ui) {
       $('.showable_field').val(ui.item.user.name);
       return false;
    },
    select: function(event, ui) {
        var video_id = $('#video_id_field').val();
        var user_id = ui.item.user.id;
        $.post("/showable_videos.js", {video: video_id, user: user_id});
        $(':input','#new_showable_video').not(':button, :submit, :reset, :hidden').val('');
        return false;
    }
});
var obj = $(".showable_field").data('autocomplete');
obj && (obj._renderItem = function( ul, item ) {
    return $( "<li></li>" )
       .data( "item.autocomplete", item )
       .append( "<a>" + item.user.name + "</a>" )
       .appendTo( ul );
});

Where should I show and hide the animation?

RwwL · Accepted Answer · 2011-05-27 21:59:14Z

4

Well, jQuery UI automatically adds the class 'ui-autocomplete-loading' to your input when it is loading remote data, so the absolute easiest way to do this is to simply put an animated GIF in as the background image on your input when that class is present.

That's what they do in the remote-loaded example on jQueryUI.com (note that you have to type two more more characters to kick off the ajax call in this example).

<style>
  .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>

answered May 27, 2011 at 21:59

RwwL

3,3081 gold badge25 silver badges25 bronze badges

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

2 Comments

g.d.d.c Over a year ago

This is a great CSS way to do it as well. Good answer.

RwwL Over a year ago

Thanks. Yours seems useful if the OP really wants to manipulate some other element to show the animation; upvoted.

g.d.d.c · Accepted Answer · 2011-05-27 22:00:33Z

2

Because you're using AJAX to load the suggestions I think this should work for you:

$('#loading_field').ajaxStart(function () {
  $(this).show();
}).ajaxStop(function () {
  $(this).hide();
});

answered May 27, 2011 at 22:00

g.d.d.c

48.3k12 gold badges105 silver badges116 bronze badges

1 Comment

user773804 Over a year ago

however this kind of falls apart if you have loading animations in different places...

Collectives™ on Stack Overflow

Cannot figure out when to hide and show loading animation with JQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related