Question

I red some articles and similar questions on stack overflow but didnt really find any simple clean solution to this problem.

for example this is my ajax function:

  $.ajax({
            url: "/Home/AddSong",
            type: "POST",
            data: $("#AddTopTenFavForm").serialize(),
            success: function (data) { ShowMsg("Song Added Successfully"), $(container).find('ul').append('<li><a class="savedLinks" href="#" name="' + substr + '" >' + name + '</a> <span name= ' + data +' class="btnDeleteSong dontDoAnything">x</span></li>'); },
            error: function () { ShowMsg("There was an error therefore song could not be added, please try again") }
        });

I would like to call my functions:

 function ShowAjaxLoader() {
$("#dottedWrapper").fadeIn();
$("#loadingGifContainer").fadeIn();
}

 function HideAjaxLoader() {
$("#dottedWrapper").fadeOut(1000);
$("#loadingGifContainer").fadeOut(1000);
}

when Ajax request starts and when it finishes. Please help thanks

Answer 1

Call the show function before the ajax, then call the Hide function upon success or error

ShowAjaxLoader();
   $.ajax({
        url: "/Home/AddSong",
        type: "POST",
        data: $("#AddTopTenFavForm").serialize(),
        success: function (data) { 
          HideAjaxLoader();
          ShowMsg("Song Added Successfully"), $(container).find('ul').append('<li><a class="savedLinks" href="#" name="' + substr + '" >' + name + '</a> <span name= ' + data +' class="btnDeleteSong dontDoAnything">x</span></li>'); },
        error: function () { 
          HideAjaxLoader();
          ShowMsg("There was an error therefore song could not be added, please try again") }
    });