CODEWITHSUNDEEP
javascriptphpjqueryajax
S S
S S

Reputation: 1503

Display loading icon and then redirect to new page

Lets say I have one page "page1" which consist of some info and a button named "Add".

When I click on this button, it opens a popup modal window that consists of a form with around 10 fields and submit button. Once I click on this button, I used ajax post to submit the form and at the server side it does insert and update operation and return success or failure result.

During this ajax process, I am displaying a loading image. What I am trying is just after this loading image it should redirect to new page. Lets say "page2". But in my code, i see after this loading stops , I see the modal window and "page1" for about 2-3 seconds and then only it redirects to "page2".

I am not sure if my question is logical or not but still if there is any method to stop it. Below I have ajax processing code.

Thank you.

   $.ajax({
        type: 'POST',
        url: 'page2.php',
        data: {
            'data': form_data
        },
        success: function(response)
        {
            var arr = JSON.parse(response);
            if(arr.success == true) {
                window.location.href = 'page3.php';
            }
            else {
                alert('There are some error while saving record.');
            }
        },
        beforeSend: function()
        {
            $('.loader').show().delay(9000);
        },
        complete: function(){
            $.fancybox.close();
            $('.loader').hide();
        }
    });

Upvotes: 0

Views: 2450

Answers (1)

Andrei Todorut
Andrei Todorut

Reputation: 4526

$.ajax({
     success: function(response)
     {
        ...
        if(arr.success == true) {
            ...
        }
        else {
            ...
            $('.loader').hide();
        }
     },
     ...
     complete: function(){
         $.fancybox.close();
     }
});

Don't hide the loader after ajax request is done.

Upvotes: 2

Related Questions