Как автоматически обновить div при успешном выполнении ajax

Question

Я пытаюсь обновить div, который содержит таблицу, в которой отображаются данные после успешной вставки новых данных с использованием ajax.

Вот мой код:

            $("span.save").live('click', function() { 

                var id = $(this).attr('id');
                var name = $('.ingr_name_' +id).val();
                var amount = $('.amt_' +id).val();
                var unit = $('.unit_' +id).val();

                if(name.length > 0 && amount.length > 0 && unit.length > 0)
                {   
                    var dataString = "id=<?php echo $this->uri->segment(3); ?>&name=" +name +"&amount=" +amount +"&unit=" +unit;

                    //alert(dataString);

                    $.ajax({
                       type: "POST",
                       url: "<?php echo base_url(); ?>recipe/add_ingr",
                       data: dataString,
                       success: function(){                         
                           //I wanted to refresh the div here. Where the div's id="ingredients_list"

                           alert('Recipe ingredient added.')
                       },
                       error: function(xhr, status, error) {
                            alert(error)
                       }
                    });

                    return false;
                }
                else
                {
                    alert("Please fill out all fields.");   
                }

            });

Я искал, как сделать обновление div, но они не соответствуют моим потребностям для этой проблемы. Кто-нибудь может мне с этим помочь? Спасибо за вашу помощь.

Answer 1

В обработчике success вызова ajax вы получите ответ в первом аргументе.С его помощью вы можете создать нужную разметку и затем добавить ее в элемент ingredients_list.

success: function(response){
    //Using response object create the desired markup for recipe table 

    $("#ingredients_list").html("markUpCreatedUsingResponseFromServer");
    alert('Recipe ingredient added.')
 }