I have a php file which retrieves data from a MySql database and display it. But the database have more no of data say 100. But in my php file I have planned to display 6 at a time just by using
LIMIT start_value, 6.
Then at the bottom I have a pan which contains the following code
<a href="index.html?start_value=start_value+6">1</a>
<a href="index.html?start_value=start_value+12">2</a>
<a href="index.html?start_value=start_value+18">3</a>
<a href="index.html?start_value=start_value+24">4</a>
<a href="index.html?start_value=start_value+30">5</a>
<a href="index.html?start_value=start_value+36">6</a>
So now the issue is if anyone clicks the link above the whole index.html will be reloading which will be annoying. Is there any way to display the new data from the database just by reloading that particular DIV after clicking any of the links?
Is there any way to display the new data from the database just by reloading that particular DIV after clicking any of the links?
Yes, there is. You need to use the XMLHttpRequest object and DOM. In one word: AJAX
The best way is to use a framework like jQuery or Prototipe.
Here you can find an example. You should replace the "latest_scores.html" page, in that example, with another page "latest_scores.php". The php script will create the refreshed content that can be placed inside your div.
You should look into jQuery javascript library which allows you to load content with ajax with ease because ajax is what you're looking for! PHP is a server side language, it works on the server and is not dynamic, you're looking for something working on the client side and that's Javascript.
You have two options:
Ajax, which allows you to retrieve data from the server with JavaScript, which you can then use to manipulate the DOM. The basis of Ajax is the XMLHttpRequest object, which allows you to retrieve data completely behind-the-scenes in JavaScript. Note that Ajax is limited by the Same Origin Policy, but for what you're describing, that's fine — you'll be loading data from the same origin.
Frames (e.g., iframe elements), which you can load content into by setting their src property.
Of the two, Ajax is much more flexible.
References / further reading:
Side note: Although obviously you can use XMLHttpRequest and the DOM methods directly, note that there are cross-browser differences (and outright bugs), which can be smoothed over for you by a good library like jQuery, Prototype, YUI, Closure, or any of several others. They also provide a lot of useful utility functionality, allowing you to focus on the actual problem you're trying to solve rather than the details of the plumbing.
For example, here's how you would send an Ajax request to a server using jQuery and have an element on the page updated with the HTML fragment the server sends back:
$("#target").load("get_the_data.php", {article: x});
That says: Request an HTML fragment from get_the_data.php sending it the parameter article with the value from the x variable, and put that HTML fragment inside the element that has the HTML id "target". That would be a good 10 lines of code if you didn't use a library. Now, that's not a lot, but repeat that over and over (and in the process deal with an IE bug around looking up elements by their id), and you see how it can add up.
I do recommend you read the references above so you know how the libraries are doing what they're doing (it's not magic), but there's no reason not to leverage the hard work people have done to make this stuff easier.
If you had a page that served myaction, like index.html?start_value=start_value+6 for example, you could do this:
setInterval(myaction, 20000); //every 20 seconds
function myaction() {
$("#quoteContainer").load("index.html?start_value=start_value+6");
}