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.

Don't use load because its deprecated officially by jQuery instead of this timeout functions — Sunil Pachlangia, Apr 13 '15 at 10:22
@ Ankit that is the code i came across when i searched for my question, i only pasted it here so that i could show what code i have come across, you trying to help would be nicer rather than you just pointing out mistakes — Sanat, Apr 13 '15 at 11:21

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

2

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/

edited May 23 '17 at 12:30

Community

1
1

answered Apr 13 '15 at 10:19

Elad

891
5
15

as i said i have around 90 divisions, everytime i refresh it refreshes to the first DIV, is there a way that it stays in the curent div? – Sanat Apr 13 '15 at 10:49
is that url the page in which my div is? because it doesnt work, it refreshes back to the first div, i want it stay where it is and update its data – Sanat Apr 13 '15 at 11:08

score 0 · Answer 2 · answered Apr 13 '15 at 12:48

0

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
    });

});

answered Apr 13 '15 at 12:48

Elad

891
5
15

yes i want exactly that, a link or a button inside each div to refresh it manually..i understand this statement "$(this).parent().attr('id'); " identifies the div, but can you give me the exact refresh statement? – Sanat Apr 14 '15 at 05:07
after you got the id of the specific div you go the ajax call that I mention in my first answer and on the success function you update that div you want: $("#div").html(data); – Elad Apr 14 '15 at 07:46

Refreshing contents of a Div without refreshing the entire page

2 Answers2