CODEWITHSUNDEEP
javascriptphpjqueryajax
katie hudson
katie hudson

Reputation: 2893

Javascript redirect on Ajax success

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

Upvotes: 0

Views: 2365

Answers (3)

AlexBerd
AlexBerd

Reputation: 1504

// 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/

Upvotes: 0

Cheezy Code
Cheezy Code

Reputation: 1715

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";

Upvotes: 0

Ishan Shah
Ishan Shah

Reputation: 1676

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");
        });
    })

Upvotes: 1

Related Questions