Question

I am trying to refresh the div that contains a table that show the data after a successful insertion of new data using ajax.

Here’s my code:

            $("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.");   
                }

            });

I’ve been searching how to do the div refresh but they don’t fit my needs for this problem. Can anyone help me with this? Thank you for your help.

Answer 1

In the success handler of the ajax call you will get a response in the first argument. Using that you can create the desired markup and then append it into ingredients_list element.

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

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