CODEWITHSUNDEEP
javascriptphpjqueryajax
Cephou
Cephou

Reputation: 297

Refresh current page at the end of PHP Ajax call

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.

Upvotes: 0

Views: 2821

Answers (3)

Ben Jazia Mohamed
Ben Jazia Mohamed

Reputation: 1

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

Upvotes: 0

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

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)

Upvotes: 3

Tsuna
Tsuna

Reputation: 2198

$.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()
    }
});

Upvotes: 1

Related Questions