CODEWITHSUNDEEP
phpmysqlajaxjqueryweb
MetalGear753
MetalGear753

Reputation: 13

Refresh a DIV with AJAX that requires MySQL queries + PHP

I am currently working on a website that is coded primarily with PHP/MySQL and HTML5 as a means to learn the code and become better. I used to work for a forum that used AJAX to reload the latest posts as if the user had just refreshed the webpage, except it just changed the content dynamically without a full reload.

My webpage: http://vgrnews.com

My specific situation is as follows: The homepage loads the four latest announcements and (soon to be) comments from the MySQL DB and displays them soonest -> latest. It is inside of a div called maincontent.

What I want to do: Have the announcements show up dynamically with AJAX regardless of the user refreshing or not. It would probably poll the server roughly every 5-10 seconds.

I don't plan to keep the homepage refreshing like that, but once I add more content it would be good to know how to refresh a div at regular intervals. I have read up on AJAX, but I don't quite understand all of the logistics, they just give you the code and expect you to pick it up. It is hard to morph the code to be applicable for my website if I don't understand it.

Sorry for the long read and thanks for all the replies!

Upvotes: 0

Views: 4217

Answers (2)

Nick Mitchinson
Nick Mitchinson

Reputation: 5480

I will clarify on Alexander's answer for you. What the load() function is doing is performing an AJAX request to the given URL, and then setting the HTML of the selected div(s) to be the returned content. This means that your server should return proper HTML (and only the HTML you want in that div).

You can see http://api.jquery.com/load/ for more information on load().

If you plan on having your server return an JSON (or XML) representation of the information, you will have to use a jQuery get() (http://api.jquery.com/get/), and then process the returned data with a callback.

Note that both get() and load() are simply implicit applications of the jQuery ajax() method (http://api.jquery.com/jQuery.ajax/)

EDIT:

The setTimeout is just making the browser call the function ever x milliseconds. This is what will have it check every x seconds.

Upvotes: 0

Alexander Nenkov
Alexander Nenkov

Reputation: 2910

function reload_content() {
  $('#latest_post').load('ajax/get_latest.php');
}

window.setInterval(reload_content, 10000);

Upvotes: 1

Related Questions