Ajax wait till redirect to finish executing.

Question

I have basically the same problem as the one described in the link below, but I dont find the solution to be very clear. I want my ajax success function to wait until the window function is finished executing, THEN modify the divs. Instead, it modifies the divs of the current page, then redirects. AJAX: on success redirect then modify new page

main.js

$("#form").submit( function(e) {
    e.preventDefault();
    var id = $('#searchbar').val(); // store the form's data.   
        $.ajax({
                url: '/search',
                type: 'POST',
                data: {id:id}, 
                dataType: 'text',


            success: function(data) {

                //Redirect to the page where we want to display the data
                window.location.href = '/test';


                data = JSON.parse(data);
                console.log(data);
                $("#count").text("we analyzed...");
                $("#result1").text(data.county);
                $("#totals").text("with a score of..");
                $("#result2").text(data.totalSentiments);


   },
   error: function(jqXHR, textStatus, errorThrown){
     console.log("error")
     alert(textStatus, errorThrown);
  }
});

});

Answer 1

I Will Suggest you Javascript Local Storage .

main.js

$("#form").submit( function(e) {
    e.preventDefault();
    var id = $('#searchbar').val(); // store the form's data.   
        $.ajax({
                url: '/search',
                type: 'POST',
                data: {id:id}, 
                dataType: 'text',


            success: function(data) {

                //Redirect to the page where we want to display the data
                window.location.href = '/test';


                data = JSON.parse(data);
                console.log(data);
                // Store
                localStorage.setItem("count", "we analyzed...");
                localStorage.setItem("result1", data.county);
                localStorage.setItem("totals", "with a score of..");
                localStorage.setItem("result2", data.totalSentiments);

   },
   error: function(jqXHR, textStatus, errorThrown){
     console.log("error")
     alert(textStatus, errorThrown);
  }
});

});

On Ready on same page:

jQuery(document).ready(function(){
    if (localStorage.count) {
        $("#count").text(localStorage.count);
    }
    if (localStorage.result1) {
        $("#result1").text(localStorage.result1);
    }
    if (localStorage.totals) {
        $("#totals").text(localStorage.totals);
    }
    if (localStorage.result2) {
        $("#result2").text(localStorage.result2);
    }
});

Local Storage Store Data in Browser Storage. You Also Can Remove Data From Local Storage.

Answer 2

setting the value of location.href will cause a full page refresh.

Therefore all your scripts will be wiped out.

If you REALLY wants to use the result of a ajax call to a redirected page, you should store this response data somewhere, then reuse it on your new page.

//save "data" in localSotorage
localStorage.myAjaxResponse = data; //if data is JSON then use: JSON.stringify(data) instead.

Then on your "/test" page, create a script to check for the value on the localStorage then display it.

    data = JSON.parse(localStorage.myAjaxResponse);
    console.log(data);
    $("#count").text("we analyzed...");
    $("#result1").text(data.county);
    $("#totals").text("with a score of..");
    $("#result2").text(data.totalSentiments);

Although, there are other better ways to accomplish what you want.

Answer 3

You can do something like this:

On your ajax success:

data = JSON.parse(data);
console.log(data);
window.location.href = '/test?county='+data.county+'&sentiment='+totalSentiments;

Then on your test page write in javascript block:

   var params={};
   window.location.search
          .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
            params[key] = value;
          }
        );
    if (params.length > 0) {
        $("#count").text("we analyzed...");
        $("#result1").text(params['county']);
        $("#totals").text("with a score of..");
        $("#result2").text(params['sentiments']);
    }