Обновить содержимое div на форме submit (ajax)

Question

На моей странице У меня есть форма, которая вставляет новую запись в базу данных. На той же странице есть DIV, который содержит текущий набор результатов.

То, что я пытаюсь сделать, это обновить только DIV (не всю страницу) при отправке формы. Затем DIV будет содержать последние записи (в том числе только что добавленные).

$('#add-variants-form').submit(function(){ 
    $.ajax({ 
     url: 'admin/addvariants', 
     type: 'POST', 
     dataType: 'html', 
     data: $(this).serialize(), 
    }); 

    return false; 
}); 

<div id="current-rows"> 
<?php while($variant=mysql_fetch_array($variants)) { ?> 
    <div class="row"> 
    // resultset   
    </div> 
<?php } ?> 
</div> 

Я установил $variants изнутри моего контроллера (заранее):

$variants=Catalog::getProductVariants($product['id']); 

В идеале я не хочу возвращаться весь груз HTML, который будет введен, чтобы этот DIV.

Answer 1

Я положил содержимое «токоприемники строк» ​​DIV в собственном индивидуальном виде файл:

<div id="current-rows"> 
    <?php include("_current-rows.php"); ?> 
</div> 

И в моем контроллере действия «addvariants» Я просто сделать это:

$variants=Catalog::getProductVariants($_POST['product_id']); 
include('application/view/admin/catalog/_current-rows.php'); 

Это ответ, который возвращается к моей функции успеха jQuery.

Answer 2

Установите новый контент в обработчике успеха запроса ajax. Попробуйте

$('#add-variants-form').submit(function(){ 
    $.ajax({ 
     url: 'admin/addvariants', 
     type: 'POST', 
     dataType: 'html', 
     data: $(this).serialize(), 
     success: function(newContent){ 
      $('#current-rows').html(newContent); 
     } 
    }); 

    return false; 
}); 

Answer 3

Я думаю, что проще использовать .load метод, который впрыскивает ответ от сервера к данной DIV, что-то вроде:

$('#idOfYourDiv').load('/your/url', {params: params}); 

в качестве альтернативы вы можете использовать $ .ajax , как:

$('#add-variants-form').submit(function(){ 
    $.ajax({ 
     url: 'admin/addvariants', 
     type: 'POST', 
     dataType: 'html', 
     data: $(this).serialize(), 
     success: function(data) { 
     $('#yourDiv').html(data); // html will insert response, response is stored in "data" variable 
     } 
    }); 
    return false; 
}); 

на PHP сайт просто повторить то, что вы хотите, чтобы отображаться, например

foreach($results as $result){ 
    echo $result."<br />"; 
} 

надежда, что помогает