php header does not work with ajax. Issue with reloading with js

Question

So I am using an ajax request to post data into a php script. At some point, the php script redirects.

Well at least it should be. But it does all kind of weird things

header('Location: index.php');

It get's all the content in index.php and puts it in the callback area.

So I decided to reload the page using javascript. And this is what I got

$.post('booking.php',
{
    firstname : $('#firstname').val().trim(),
    lastname : $('#lastname').val().trim()
},function(data){   
        window.location = 'index.php';
        $('.notification-booking').html(data);
});

Problem is. There is some feedback being given. What I have up there displays the feedback for a moment then reloads the page. Which woukd be cumbersome if the user hasn't finished reading the text. So I would like to do the following.

1. reload the page,
2. display the feedback
3. Eat a donut and be happy.

In exactly that order I have no. 3 under control. Help out on number 1

Answer 1

You could pass variables to the second page via JavaScript through the URL, then retrieve them via PHP. That way you can display information for as long as the user needs to read it.

Javascript on first page

window.location = 'second.php?firstVar=' + firstname + '&secondVar=' + lastname + ';

Then inside second.php, you can retrieve the value of those variables, and display them as you please.

<?php
$first = $_GET['firstVar'];
$last  = $_GET['secondVar'];
?>

I recommend you redirect the user via Javascript instead of PHP headers because according to this thread it's really easy to screw up PHP headers. I'm assuming that's why you're getting weird behavior.