Question

I’m trying to create a pop up box (with jQuery) that can handle forms, and for the most part, I have it all working. The only issue that I have is that on a successful login and/or register, PHP sends a header location to redirect to the user to their “home”, and it creates an endless loop of redirects with in the div that I loaded the form.

How would I go about reading if there was a location header sent on the post request, and then to get the actual URL that is being sent as the new location?

This is what I have tried so far (among other things):

$('.register').live('submit', function(e) {

    e.preventDefault();

    var form_data = $(this).serialize() + '&register=register&js=true';

    $.post(site_path + '/register', form_data, function(data, text, xhr) {

        alert(xhr.getResponseHeader("Location"));

        // $('.overlay_container').html(data);

    });

});

Not sure what exactly I’m doing wrong, but as far as I know, something along those lines should work. I also tried doing this with a plain AJAX post request to no expected result.

Just to note, there wont always be a location header sent; only when someone successfully logs in, registers, etc.

Ideally, this is what I am trying to accomplish:

$('.register').live('submit', function(e) {

    e.preventDefault();

    var form_data = $(this).serialize() + '&register=register&js=true';

    $.post(site_path + '/register', form_data, function(data, text, xhr) {

        var header_location = xhr.getResponseHeader("Location");

        if(header_location == null) {

            $('.overlay_container').html(data);

        }else{

            window.location = header_location;

        }

    });

});

Answer 1

As far a I am aware, you can not actually read a Location header as JavaScript follows it until they stop, and then sends the headers back, meaning that I get the headers of the destination page, and not the page that was initially posted to.

Therefore, I have edited my redirect function that I have in my PHP script to send a custom header if the page was requested using JavaScript (or jQuery).

public function redirect($redirect = NULL) {

    global $_CONFIG;

    if($_POST['js'] == 'true') {

        exit(header('Redirect: ' . $_CONFIG['site']['path'] . '/' . $redirect));

    }else{

        exit(header('Location: ' . $_CONFIG['site']['path'] . '/' . $redirect));

    }

}

That way I can read if the a redirect was actually sent, and handle it properly on the JavaScript (jQuery) end of things.

Here’s what the final result looks like:

$('.popup').on('submit', '.register', function(e) {

    e.preventDefault();

    var action = $(this).attr('action'), form_data = $(this).serialize() + '&register=register&js=true';

    $.post(action, form_data, function(data, text, xhr) {

        var header_location = xhr.getResponseHeader('Redirect');

        if(header_location == null) {

            $('.overlay_container').html(data);

        }else{

            window.location = header_location;

        }

    });

});