Refreshing contents of a Div without refreshing the entire page

Question

I have around 90 divisions in my page which can navigated by next and previous buttons.

Now these divisions have textboxes which retrieves tables values from the database on page refresh.

The thing with this kind of refresh is that if I'm on the 67th division and the page reloads, it goes back to the first divsion. I want that if I press a button inside any div, that div only will refresh with new table values from the database.

I have come across several codes, but none of it refreshes the div at realtime, for example if I save two textbox values, it will show the textbox values at that time. If I go then to phpmyadmin and delete one of the rows, come back to the textbox and press the refresh button,it should just update the textbox values with new data, in this case only first row should be present

$result = mysql_query("SELECT * FROM du_contacts where DU_no=$du_no");
$row = mysql_fetch_array($result);

<td><input type="Text" name="DU"  maxlength="25" value="<?php echo $row[1]; ?>" id="DU_contact_name_0" >

This is how i retrieve data in to the textbox.. all i want is when i press a button, the data in the textbox should change to the recent data in table.

Answer 1

Use ajax call or load to make that div content refresh its data

$("#id").load('content.html');

or

$.ajax({
        type:"GET",
        url:"your_url",
        data: qS,
        datatype: 'html',
        success: function(data){
           $("#div").html(data);
        }
    }).done(function() {
        alert('done')
    });

Try this out: https://stackoverflow.com/a/22577506/2498251

An example:

http://jsfiddle.net/pX5kr/

Answer 2

you can have a link inside each div to refresh the specific div for example lets say it looks like this:

<div id="firstDiv"><a href="javascript:void(0)">Refresh</a></div>

$( document ).ready(function() {

    $('a').on('click', function(e){
        e.preventDefault();
        var which_div = $(this).parent().attr('id');
//do refresh to that specific div
    });

});