Загрузите загруженную страницу AJAX после обновления

Question

Я пытаюсь понять, как динамическую страницу, загруженную AJAX, можно перезагрузить после обновления одной из записей. На моей странице есть следующий сценарий jquery.

<script type="text/javascript"> 
function showUser(str) { 
    if (str == "") { 
     $("#txtHint").empty(); 
     return; 
    } 
    $("#txtHint").load("data_ajax.php?q=" + str); 
} 
$(document).ready(function() { 
    $("#txtHint").delegate(".update_button", "click", function() { 
     var id = $(this).attr("id"); 
     var dataString = 'id='+ id ; 
     var parent = $(this).parent(); 
     $.ajax({ 
      type: "POST", 
      url: "data_update_ajax.php", 
      data: dataString 
     }); 

     return false; 
    }); 
}); 
</script> 

Я думал, что я мог бы получить это было сделано с кодом ниже, если я называю его изнутри странице data_ajax.php после загружает соответствующие данные из базы данных, но он обновляет всю страницу.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#ref_butn").click(function(){ 
location.reload(); 
    }); 
}); 
</script> 

Я знаю, что это можно сделать, просто не уверен, куда обратиться после поиска ответа на некоторое время.

Answer 1

Ответ Бена работал, но он привел меня к тому, чтобы найти более простой способ сделать это. Поэтому я по сути назвал оригинал function showUser(str) { на кнопке и просто должен был дать ему выбранное значение $ _GET.

<button name="users" onClick="showUser(this.value)" value="<?php echo $_GET['q']; ?>">Refresh Content</button> 

Эта кнопка была размещена на странице data_ajax.php, а не родительский index.php для всех, кто хочет сделать то же самое. Таким образом, каждый раз, когда я нажимаю кнопку Refresh Content, таблица обновляется без перезагрузки страницы, и я больше не теряю загруженный контент.

Answer 2

Вы бы просто делать то, что вы сделали, чтобы сначала заполнить ее:

$("#txtHint").load("data_ajax.php?q=" + str); 

Это загрузит ваш «новый» AJAX и переписать то, что в настоящее время в #txtHint с ним.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#ref_butn").click(function(){ 
    //location.reload(); 
    $("#txtHint").load("data_ajax.php?q=" + str); // I don't know where str comes from, but you get the idea. 
    }); 
}); 
</script> 

Answer 3

Часть/блок/дела страницы не могут быть обновлены, но могут быть динамически обновляются с данными обратного вызова.

На стороне сервера эхо-данные, которые вы хотите отобразить на стороне клиента. Например:

//Successful update in the database 
$callback = array('heading' => 'Success!', 'message' => 'The data was successfully submitted'); 
echo json_encode($callback); 

Чтобы получить данные, вы передать функцию обратного вызова success для вашего АЯКС блока.

 $.ajax({ 
      type: "POST", 
      url: "data_update_ajax.php", 
      data: dataString, 
      dataType: 'json', 
      success: function(data) { 
         $('#yourDiv .heading').text(data.heading); 
         $('#yourDiv .message').text(data.message); 
        } 
     });