Loader not disappearing after AJAX result is received

Question

I have page that displays data through AJAX, till the time the result is being fetched I wish to display a loader and as soon as the result is fetched I want that the loader should disappear. Below is part of the code where I am trying to display the loader

var onSubmit = function(e) 
    {
        var txtbox = $('#txt').val();
        var hiddenTxt = $('#hidden').val();

        $("#walkaway").hide();
        $("#submitamt").hide();
        $("#xtrabutton").hide();

        LodingAnimate();
        $.ajax(
            {
                type: 'post',
                url: 'test2.php',
                dataType: 'json',   
                data: {txt: txtbox,hidden: hiddenTxt},
                cache: false,
                success: function(returndata) 
                    {
                        $('#first').html(returndata[0]);
                        $('#second').html(returndata[0]);
                        $('#third').html(returndata[0]);
                    },
                error: function() 
                    { 
                        console.error('Failed to process ajax !');
                    }
            });

            function LodingAnimate() 
            {
                $("#maillist").html('<img src="img/ajax-loader.gif" /> Please Wait Loading...');
            }   
    };

On click of a button the above AJAX is executed, after the click the loader runs but even after I get the reply(in console) the loader keeps on running, but in actual it should have disappeared.

@ssilas777 thats the issue, i am not able to hide the loader — , Sep 09 '15 at 07:03

ssilas777 · Accepted Answer · 2015-09-10T03:24:33.947

3

You should hide/remove the loader manually after ajax call completes, add Jquery Complete call back and add the code to remove the loader in it.

Jquery Complete - This call back will execute after success and error call back executed.

     $.ajax(
            {
                type: 'post',
                url: 'test2.php',
                dataType: 'json',   
                data: {txt: txtbox,hidden: hiddenTxt},
                cache: false,
                success: function(returndata) 
                    {
                      //Success code
                    },
                error: function() 
                    { 
                        //error code
                    },
                complete:function()
                    {
                     //This block will execute after success/error executes.
                     //Make the loader div empty
                     $("#maillist").empty();
                    }
            });

edited Sep 10 '15 at 03:24

answered Sep 09 '15 at 07:04

ssilas777

9,672
4
45
68

Why not use `$("#maillist").empty();` instead? – D4V1D Sep 09 '15 at 07:05
@D4V1D, yeah, both will work, and .empty() looks more readable – ssilas777 Sep 09 '15 at 07:06
@ssilas777 i am getting error in console: Uncaught SyntaxError: Unexpected identifier – Sep 09 '15 at 07:08
@ssilas777: correct way to execute any operation after ajax call is completed. – Tushar Sep 09 '15 at 07:09
@samuel, Please check if you have the correct syntax. – ssilas777 Sep 09 '15 at 07:11

Loader not disappearing after AJAX result is received

1 Answers1