Question

for an li tag i am adding a div with multiple div dynamically like below.

 var divStr = "";
 divStr = divStr + "<div id='divTaskDetail"+id+"'>";
 divStr = divStr + "<div id='div1"+id+"'>.......</div>";
 divStr = divStr + "<div id='div2"+id+"'>.......</div>";
 divStr = divStr + "<div id='div3"+id+"'>.....<input class='btnSave' type='button' value='Save'  onclick='javascript:SaveTaskDetails(" + id + ")'/></div>";
 divStr = divStr + "<div id='div4"+id+"'>.......</div>";
 divStr = divStr + "</div>";

 $("#liTask"+id+"").append(divStr);

For the “save” button click in “div3” i want to refresh the “div3” region only. ie to rebind the div3 in the same position.
My code for getting the “div3” is below

    function SaveTaskDetails(id)
    {
         var CheckDivObj = $("#liTask"+id+"").children();
         var childNode = CheckDivObj.prevObject[0];
         var childTaskNode = childNode.childNodes[1];
         var childSubTaskNode = childTaskNode.children[3];
         if(childSubTaskNode != null)
         {
             $(""+childSubTaskNode.id+"").detach();
         }
    }

I can get the div3 in childSubTaskNode but i want to remove it and rebind in the same position. Is this posible…..
if so a sample code for detaching and rebinding at same position will be helpfull
Thanks in advance

Answer 1

I would do an ajax function to get the new div contents and then use the html function in jquery to change the html of the div you want to update.

$('#div3_save_button').click(function(){
    $.ajax({
        url:'my_script.php',
        type:'post',
        data:'data=some_data',
        success:function(data){
            // the data variable will contain proper html string for content of div 3, returned from my_script.php
            $('#div3').html(data);
        }
    });
});

This way we do not have to remove and replace div3, just replace the contents of div 3. See docs for html here