refresh all divs in a php page using Ajax

Question

I have a php page with 9 different divs, These divs are updated after every page reload from mysql database. I want to do it automatically with out whole page refresh. Is it possible? I know this can be done by Ajax, but I don't understand how I do it. Can anyone please let me know the good tutorial on that?

Do you know http://google.com ? Type the headline of your question into the google search field — hek2mgl, Feb 07 '13 at 10:56
@hek2mgl Thanks for your suggestion, but I did it before with no luck. — Aemz, Feb 07 '13 at 11:00
@Aemz Tell me what you exactly not understood and I'll help. Please post some code or tutorials that have you already tried. Btw I've not downvoted the post — hek2mgl, Feb 07 '13 at 11:02

score 1 · Answer 1 · edited May 23 '17 at 12:04

If I understand your question right

window.setInterval(function(){
  // call your function here
  // make tha ajax call here to update the divs
  // this function will run every 5 secs and will make the AJAX call
  // write the function here to update the divs
}, 5000);

Read below

jQuery Ajax POST example with PHP

Update whole page on Ajax request

Ajax update on div with a id

If you don't want to update the page constantly, just make the AJAX calls which update the divs.

score 1 · Answer 2 · answered Feb 07 '13 at 11:09

There is a simple and effective way to do this with jQuery:

Overview: On the script you direct your ajax call to, have it query the database and echo out the updated HTML you want to replace within the div tags and then it's as simple as replacing the div html with the returned html in the anonymous function inside the success param:

Your Ajax call in your Javascript file

//wrap up your data in a GET style string seperated by ampersands (&)
var dataString = foo=1234&bar=12345

$.ajax({
  type: "POST",
  url: ajax.php,
  data: dataString,
  success: function(html) {
    $("#refresh_div").html(html);
},
  dataType: dataType
});

Then in your 'ajax.php' you access the variables you just sent to the PHP script via the $_POST superglobal

$foo = $_POST['foo'];
$bar = $_POST['bar']

$mysqli= new mysqli($params);
$stmt = $mysqli->prepare("SELECT * FROM myTable WHERE id=?");
$stmt->bind_param('i',$foo);
$stmt->execute();
$stmt->bind_result($result);
$stmt->fetch();
$stmt->close();

echo $result

All of the text/html that is echoes out will be passed back to the ajax success param as the html var and then you can replace the divs contents with jquery.

hope this helps.

refresh all divs in a php page using Ajax

2 Answers2