CODEWITHSUNDEEP
jqueryajax
user659025
user659025

Reputation:

jQuery: Different ajaxStart and ajaxStop for different events

Okay, I've created little page where different elements trigger different AJAX calls.

If I had only one loading image I'd be good off with ajaxStart and ajaxStop. But I want to have different loading images to appear on different AJAX calls.

What would work of course is something like:

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

$.ajax({
    complete:function()
    {
        $("img#loader").hide();
    }
});

But is there a more elegant way to do this?

Upvotes: 2

Views: 1380

Answers (1)

Dipesh KC
Dipesh KC

Reputation: 3297

You could try generating the ajax image dynamically and remove on success function.Below is an example:

var loader = "<div id='loader'></div>";

you may define specific style for the id loader in your stylesheet or you could supply it immediately using jquery.you can even add overlays as per your need

var panelOverlay= $("<div id='panelOverlay'></div>").css({top:top, left:0,position:fixed, width:"100%", height:"100%", background:'#222', opacity:'.7'});

then display it before any ajax calls you make: then load

    $("#somediv").append(loader);
    $("#loader").show();
    $("#loader").fadeIn(400).html('<img align="absmiddle" src="/path/to/image/ajax-loader1.gif" />...Loading');

then you make your ajax calls

    $.ajax({
        url     :   ""

          ...

`

then after success function you could remove the loading image

        success :function(html){
            if(<your condition>){           

                                   ...
                                   ...
                $("#loader").fadeOut('slow',function(){$("#loader").remove();

I hope u got it ... load on the fly and remove when done!

Upvotes: 1

Related Questions