CODEWITHSUNDEEP
javascriptphpajaxhttp-redirect
Shairyar
Shairyar

Reputation: 3356

Saving data via AJAX, once done only then redirect the user

I am working on a form which is saved via ajax, this part is working perfectly fine. The problem I am having is user looses the data when before saving the form he clicks on another link which redirects the user to another page.

As a solution, I thought of using JavaScript function so onclick of hyperlink I am prompting the user to save the data before moving on. I am utilizing the same function that saves the data via AJAX and upon successful saving redirect the user. This is what my prompt looks like. 

function saveThenRedirect(redirect) {
    if (confirm("Please save your data before moving away") == true) {
        update();// AJAX function that saves the data
        window.location = redirect;//redirect the user
    } else {
        window.location = redirect;
    }
}

The thing is before the update(); function gets the chance to save the data, user gets redirected or while it is in process of saving the redirection takes place. So this is what I need help in, what can i do to run the update() function first and only once it is done running redirect the user?

Note: I did look into window.onbeforeunload but i decided to go with a simple prompt and then use function to save and redirect.

This is what my update function looks like

function update() {
    $.ajax({
        type: "POST",
        url: "classes/data.class.php",
        data: $("#pay-form").serialize(),
        beforeSend: function () {
            $('#dvloader').show();
        },
        success: function (html) {
            var load1 = new $.Deferred();
            var load2 = new $.Deferred();
            var load3 = new $.Deferred();
            var load4 = new $.Deferred();

            $.when(load1, load2, load3, load4).then(function () {
                $('#dvloader').hide();
            });

            $('#income-expense-div').load('dashboard-sidebar.php', function () {
                load1.resolve();
            });
            $('#pay-div').load('dashboard-pay.php', function () {
                load2.resolve();
            });
            $('#assets-div').load('dashboard-assets.php', function () {
                load3.resolve();
            });
            $('#liabilities-div').load('dashboard-liabilities.php', function () {
                load4.resolve();
            });
        }
    });
}

I will really appreciate any help.

Please note that update is the SAME function being used with Save button (where redirection is not required). If I add the redirect inside ajax success call the user will get redirected. This redirect is ONLY needed if user clicks on another link, so the saving needs to take place first and then redirection

Upvotes: 0

Views: 1590

Answers (2)

Mark
Mark

Reputation: 861

Try adding a variable to your code, in the update function:

// Adding a redirect variable...
function update( redirect ) {

And then inside the success function, check for the redirect variable...

success: function (html) {

    // Other code here

    if(redirect == true) {
        saveThenRedirect();
    }
}

And then when you call update from the save button:

update( false );

Or from the Redirect option:

update( true );

Alternatively you can wrap the update function in another call or further abstract the two calls, but this works well enough in this case. Probably you should have two functions instead of one and they should call additional functions as needed.

Upvotes: 1

Ankush Jain
Ankush Jain

Reputation: 7069

create an Hyperlink like

<a data-href="url" href="javascript:void(0)" id="submitForm">Submit</a>

Bind onclick event like this

$("#submitForm").click(function(e){
    e.preventDefault();

    // store url in a variable
    var url=$(this).data("href");

    // create a callback in update() function which will be called when ajax request completes
    update(function(){
    // now redirect the user
     window.location = url;
    });

});

Add a callback in your function like this

function update(callback) {
        $.ajax({
            type: "POST",
            url: "classes/fact-find-data.class.php",
            data: $("#pay-form").serialize(),
            beforeSend: function () {
                $('#dvloader').show();
            },
            success: function (html) {
           ...............................
            in the end
            callback();
          }
    });
}

Upvotes: 1

Related Questions