Refresh current page at the end of PHP Ajax call

Question

I'm having an ajax call which looks like this :

$.ajax({
  type: "POST",
  url: "myPHP.php",
  data: 1,
  success: window.location.reload()
});

And some php related to it :

<?php

// PDO CONNECTION

session_start();

$mission_id = $_POST['mission'];

$_SESSION['auth']->mission_id = $mission_id;

if($pdo->prepare('UPDATE client SET mission_id = ? WHERE id = 1;')->execute([$mission_id])) {
    // Creates a session to be read by the header at the page load
    $_SESSION['flash']['success'] = 'Good.';
} else {
    $_SESSION['flash']['danger'] = 'Problem.';
}

?>

In my header.php (that I include at each page), I have a code which reads the session['flash'], display the message associated, then destroy it. In my page, I have a php condition which look after the session['auth']->mission_id and display content according to it.

I'm willing to refresh the page once the php code has entirely finished in order for the session flash to be displayed and the conditions occured by the session mission_id to be taken into account.

The problem is that when I execute my Ajax code, the page reloads but like if the php session (flash and mission_id) were not ready. I have to reload manually to see the changes.

I tried solutions using complete instead of success, and even setTimeout but it didn't work.

I know the PHP works because I can see the change in my database occured by the PHP.

I tried :

$.ajax({
  type: "POST",
  url: "myPHP.php",
  data: myDatas,
  success: setTimeout(window.location.reload(), 3000)
});

And some other stuff.

Thank you for your help.

Jonathan Lonowski · Accepted Answer · 2017-04-30T19:07:41.013

In both of these...

success: window.location.reload()

success: setTimeout(window.location.reload(), 3000)

...the parenthesis after reload are calling the method immediately. What's provided to either success: or setTimeout() is the method's return value, similar to:

var _result = window.location.reload();

$.ajax({
  type: "POST",
  url: "myPHP.php",
  data: 1,
  success: _result
});

To delay the call until the time of the event, you'll have to provide a function object directly. One option for doing that with methods like reload() is to wrap their call in another function.

success: function () {
    window.location.reload();
}

Or:

function onSuccess() {
    window.location.reload();
}

// ...
success: onSuccess // no calling parenthesis

In some cases, providing the method directly may also work.

success: window.location.reload

Though, doing so will often alter the meaning of this for the method and may require it to be bound beforehand.

success: window.location.reload.bind(window.location)

The following code didn't applied correctly, and displayed the alert immediatly. — Cephou, Apr 30 '17 at 19:32
@Cephou [How can I pass a parameter to a setTimeout() callback?](https://stackoverflow.com/questions/1190642/how-can-i-pass-a-parameter-to-a-settimeout-callback) – To provide an argument, since that requires calling the function, you'll also want a wrapping function for `setTimeout()` to call. `success: function () { setTimeout(function () { alert("test"); }, 10000) }` — Jonathan Lonowski, Apr 30 '17 at 20:33

score 1 · Answer 2 · answered Apr 30 '17 at 18:58

$.ajax({
    type: "POST",
    url: "myPHP.php",
    data: myDatas,
    success: function () {
        setTimeout(window.location.reload(), 3000)
    }
});

or

$.ajax({
    type: "POST",
    url: "myPHP.php",
    data: myDatas,
    success: function () {
        window.location.reload()
    }
});

score 0 · Answer 3 · edited May 01 '17 at 01:48

0

data:mydatas ! mydatas is the data you will send to the PHP script . so you can specify your variable name and data like this:

var name=document.getElementById('name').value;
data:"name="+name+"age="+age

edited May 01 '17 at 01:48

TResponse

3,940
7
43
63

answered Apr 30 '17 at 19:48

Ben Jazia Mohamed

1
1

Refresh current page at the end of PHP Ajax call

3 Answers3