I am building a site with PHP & MySQL. Some queries return multiple records. Each record gets a separate page. The user can navigate between pages (records) with arrows.
Till here everything works fine.
But there is something irritating... When the user navigate to other page, the whole page is repainted (header, body, footer etc). I wants to update only the body or even only the images and some relevant text from MySql that belong to the new record, without reloading everything.
Another annoyance which connected: While navigation the new page appears on users' browser from beginning, so users have to scroll down every time they click an arrow.
Thanks!
You are talking about AJAX
It's a technology doing exactly what you need
1. You form the page itself - header, footer and a middle container.
Say, it can be <div id="container"></div>.
2. You form an GET or POST request in JavaScript (I recommend jQuery) to a little separate script, say ajax.php. Usually parameters tell it what do fetch and return. Say, an example call would look like /ajax.php?page=about
Google jQuery.ajax, jQuery.get and jQuery.post methods on how to do it.
3. What that script does - it returns the middle of the page content, in clear HTML form.
4. On successful data load your main JavaScript inserts the content it got into the "container".
Like, $("#container").html( content );
That's basically it!
You will need to change your navigation though from being links like <a href="..."> to JavaScript, performing AJAX requests to load different content, etc etc.
Make a ajax request without moving away from the current page, and get the response that can be easily displayed on any div inside body. For further details jquery.ajax()