CODEWITHSUNDEEP
jquery
Norman
Norman

Reputation: 6365

How to show and hide a loading .gif image when using jQuerys .change()

How can I show and hide a loding.gif image when using the code below? That's all the code there is. There's no beforeSend: or success: here.

$("#seg").change(function(){
$("#sSeg").load("/blah/blah.php?option="+$("#seg").val());
});

What happens here is, when a drop downs value changes it'll fetch new content for another drop down list. I wanted to add a loading.gif there so the user knows things are working.

Upvotes: 0

Views: 2299

Answers (4)

Ravinder Singh
Ravinder Singh

Reputation: 3133

Just create a div like this where you want to show the loading image and put a loading image inside it and set it's display as none by default and show it using jQuery.

<div id="loading"><img src="loading.gif"></div>

$("#seg").change(function(){
    $("#loading").css("display","block");
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val(),function(){ 
       $("#loading").css("display","none");
    });
});

Upvotes: 1

Gerald Schneider
Gerald Schneider

Reputation: 17797

your .change() function is your beforeSend: and .load has a callback function that is called when it is finished. this should work:

$("#seg").change(function(){
    $('#gif').show();
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val(), function() {
        $('#gif').hide();
    });
});

see the .load() documentation.

Upvotes: 1

realshadow
realshadow

Reputation: 2585

You can show the loading before using load and then hide it in load's callback function

$("#seg").change(function() {
    $('img.loading').show();
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val(), function() {
        $('img.loading').hide();
    });
});

Upvotes: 3

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Using your above example, the simplest way is to show the loading.gif and have it replaced with the dropdown by the load function...

$("#seg").change(function(){
    $("#sSeg").html("<img src=\"loading.gif\" />");
    $("#sSeg").load("/blah/blah.php?option="+$("#seg").val());
});

Upvotes: 1

Related Questions