Question

I have a pop up from where the value is selected. When I select the value the control goes to server via ajax call and in callback method I have the HTML page generated.

I’ve tried to set the value to div like this to a div.

$("#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName").replaceWith($('#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName', msg).html());

When I use the above line, the value is getting set to the div for the first time but after that, whenever I select a new value and the ajax call happens, the value is not getting set and the whatever I had set for the first time remains.

UPDATE:

The ajax method I use to set the values:

function getCustomerDetails(customerName,viewName) {
    var global = window.document

        $.ajax({
             type: "POST",
            url: viewName,
            data: {
                id: customerName
            },
            success: function (msg) {


                global.getElementById("CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName").innerHTML = $('#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName', msg).html();

                alert($('#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName', msg).html());
                alert($('#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_PackingMethod', msg).html());

                $("#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName").replaceWith($('#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_CustomerName', msg).html());
                $("#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_PackingMethod").replaceWith($('#CIMtrek_dvDialogListCtrlPlaceholder_CIMtrek_DailyshipCo_PackingMethod', msg).html());

            }
        });

}

How do I update the new value to the div?

Answer 1

Judging from the fact that your AJAX works the first time but not after .replaceWith() it’s probably because all event handlers are removed when you replace a node with a piece of HTML fragment.

You should register your event handlers using .on() or .delegate() on nodes that will not get removed throughout the lifetime of your app.

Let’s assume you have this structure:

<div id="mybase">
   <div class="mysel">
       <select name="test"><option /> ... </select>
   </div>
</div>

And assume you register event handlers like this:

$('#mybase input[name="test"]').change(function() {
    // replace $('#mybase .mysel') with something that has the same dropdown
});

Now your event handler would be gone and any changes in the dropdown are not firing your event handler.

Instead you could do this:

$('#mybase').on('change', 'input[name="test"]', function() {
    // replace $('#mybase .mysel') with something that has the same dropdown
});

Hope that helps.