Javascript redirect on Ajax success

Question

I have a quiz type application. Each question has two answers with a value of 1 or 2. When the quiz is complete, if they have a score lower than 10, they get redirected to a page.

This is my code for this part.

while (n < numResults) {
    increment = minScore + (interval * n);
    if (totalScore <= increment) {
        if(totalScore <= 10) {
            $.ajax({
                method: "POST",
                url: "handleData.php",
                dataType: "json",
                data: { answers: ansArray, page: window.location.href }
            })
            .done(function( msg ) {
                window.location.href("www.page2.html");
            });
        } 
        return;
    } else {
        n++;
    }
}

I have a few things I am trying to solve. Firstly, before the redirect, some data (answers and url) is posted to PHP so I can process it. One thing I pass is the current window url. The reason I do this is because the url has a format like

www.page1.com?a=1&b=2&c=3

In PHP, I parse this url and grab the values.

My first problem is that although the data is successfuly sent to PHP and handled, and returns a response of Success, the done function never seems to fire, therefore no redirect occurs (I put an alert in this function to ensure it is not firing). In PHP, after I process the data, I do this

var_dump($response); //Outputs Success
return json_encode($response);

The second thing I am trying to work out is the redirect url (page2.html). Within this page, I have a button. This button has a standard link, and then I need to give it some params from the initial url. So this pages button might be something like

www.externallink.com?a=1&c=2

How can I get the original URLs params into a button on the redirected url?

Thanks

If you want to load another page then why to use `ajax` ? Use form action instead! — Rayon, Oct 08 '15 at 12:35
`window.location.href` isn't a function. It's a property that you assign to: `window.location.href = URL` — Barmar, Oct 08 '15 at 12:50
You have to write `window.location.href("www.page2.html");` inside `success:function(data){` like `$.ajax({ //your_code success:function(data){ window.location.href("www.page2.html"); }); });` — Kausha Mehta, Oct 08 '15 at 12:56

score 1 · Answer 1 · answered Oct 08 '15 at 12:38

1

USE below function insted of done:

 $.ajax({
        method: "POST",
        url: "handleData.php",
        dataType: "json",
        data: { answers: ansArray, page: window.location.href }
        success:function(data){
            window.location.href("www.page2.html");
        });
    })

answered Oct 08 '15 at 12:38

Ishan Shah

1,665
2
20
42

shouldn't it be window.location.href = "www.page2.html"; ? – Benjamin Oct 08 '15 at 12:41
You can see difference between sucess and done from below link: http://stackoverflow.com/questions/8847829/what-is-difference-between-success-and-done-method-of-ajax – Ishan Shah Oct 08 '15 at 12:46
My script is freezing, trying to find out why – katie hudson Oct 08 '15 at 12:54

score 0 · Answer 2 · answered Oct 08 '15 at 12:46

0

For your 1st part:

Try putting the error function of jQuery ajax call. Sometimes when the return type of result does not match with the expected datatype of ajax call, then result comes in the response of error.

error: function (data, status, e) {

        }

For your 2nd part:

Attach click event for the button in the handler and read the current URL query string using window.location.search and then redirect using

window.location = newURL + "extra query params";

answered Oct 08 '15 at 12:46

Cheezy Code

1,685
1
14
18

@kate_hudson Refer this link as well for reading query string in Javascript http://stackoverflow.com/a/901144/5188835 - – Cheezy Code Oct 08 '15 at 12:47

score 0 · Answer 3 · answered Oct 08 '15 at 12:47

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function(data, textStatus, jqXHR) {
    alert( "success" );
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    alert( "error" );
  })
  .always(function(data|jqXHR, textStatus, jqXHR|errorThrown) {
    alert( "complete" );
  });

If you .done() callback never invoked, try to set debuggers or alerts inside .fail() or .complete() callback functions. Check if you have an error during ajax call and at all if the call has complete statement. Here more information: http://api.jquery.com/jquery.ajax/

Javascript redirect on Ajax success

3 Answers3