How to output content and redirect using ajax and jquery?

Question

I am building a registration form with jquery which should handle the request via Ajax. My code:

$.ajax( 
{ 
    type: "POST", 
    url: "http://www.example.com/register.php", 
    data: $("#register-form").serialize(),
    cache: false,
    success: function(message)
    {   
                    $("#reg_notification").html(message).fadeIn(400);               
    }           
});

Now the register.php should either output an error if for example the email address is not valid and this will be put into the div reg_notification. If no error is made, then the user should be redirected to a "welcome page". But it is important that this page is not allways static, so in other words, I can not use a location.href in the jquery code but want to use

header("Location: http://www.example.com")

in PHP. The problem is that the user wont be redirected but the content of www.example.com will be put inside the div reg_notification.

I found a similar problem here: How to manage a redirect request after a jQuery Ajax call but the difference is that there they are using json which I can not use due to my server and they are also redirecting inside the javascript and not in the php file.

You can't redirect in the PHP file and expect the browser to redirect also. You could replace the entire page with the result from the request. — Adrian Lynch, Feb 22 '12 at 14:09
Do you have an example of a site that does what you're asking? — Adrian Lynch, Feb 22 '12 at 14:10
@AdrianLynch Yeah, for example https://twitter.com/signup. At least thats how I want it to work, but Im not sure what method they are using. — Chris, Feb 22 '12 at 14:14

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

Impossible with header redirection.

Use something like that:

...
success: function(message)
{   
     $("#reg_notification").html(message)
          .fadeIn(400, function() {window.location = "url"});
}

or

success: function(response)
{   
     if (response.success) {
          $("#reg_notification").html(response.message)
               .fadeIn(400, function() {window.location = response.redirectTo; } );
     } else {
          // somethings else
     }
}

in php:

header("Content-type: application/json");
echo json_encode(array(
    "success" => true,
    "message" => "some message",
    "redirectTo" => "my url"
));

UPDATE header redirect impossible because XMLHttpRequest transparently follows to redirect url for get result. See there

edited May 23 '17 at 09:59

Community

1
1

answered Feb 22 '12 at 14:17

komelgman

6,949
2
18
18

Your first example would allways redirect me even if an error has occured. In the second example, how would I tell the script where to redirect to? – Chris Feb 22 '12 at 14:22
I now have json on my server so I tried this and I dont get why it doesnt work: `$.ajax( { type: "POST", url: "http://www.example.com/register.php", data: $("#register-form").serialize(), dataType: "json", success: function(data, textStatus) { if (data.redirect) { window.location.replace(data.redirect); } else { $("#signin_message").replaceWith(data.form); } } });` And then in the php: `header("Content-type: application/json"); echo json_encode(array( "success" => true, "form" => "some message", "redirect" => "http://www.example.com" ));` – Chris Feb 22 '12 at 14:49
first step add console.log(data); and check result.. if data valid json object then try window.location = data.redirect... – komelgman Feb 22 '12 at 14:54

How to output content and redirect using ajax and jquery?

1 Answers1