Change in upgrade for DOM?

Apr 10, 2013 at 9:43 PM
Hi,

We do some movement of elements in the DOM and after the upgrade to jQuery 1.7 and 2.4 of the toolkit we have noticed that moving an element is causing issues if that element contains a DateTime control.

For example we setup up a DIV which contains a MVC controls toolkit datetime control. When the page is loaded we then move that DIV in to its proper location:
        if ($('.overlay').length > 0) {
            $('.overlay').append("<div id='createDiv' class='overlay-container' style='display:none'>" + $('#createDivTemplate').html() + "</div>");
            $('#createDivTemplate').remove();
        }
However this is causing an error to be thrown in the toolkit:
var S = $("#" + J + "_Hidden").data("_Curr"); 
var o = S.getDate();
because the _Curr data is empty and therefore S.getDate(); throws an error. This used to work fine in the prior version.

Cheers,

Craig
Coordinator
Apr 11, 2013 at 7:47 AM
not sure I understood you setup but I see two possible causes:
  1. When you would like to reuse a removed dom element you should use detach instead of remove because remove destroys the dom element by unbinding all events handlers and releasing all .data
  2. If the above doesnt resolve for sure there is a problem of timing, that is you remove the element from the dom before the DateTime is initialized. As a general rule elements that must be removed must wait their initialization before being detached. So do the detach also in the document ready in the meanwhile you may make the involved element invisible with display: none. If also this doesnt resolve put a call to your function at the end of the document so iths document ready is executed for sure as last handler....This should solve...let me know.
Jun 28, 2013 at 2:34 AM
Hi, I've finally managed to get some time to relook at this issue (plus being forced to upgraded jQuery to 1.9).

To resolve the issue I had to remove the template from the DOM before I re-added it in the correct place. This then ensured that the MVC toolkit updated the correct date.

I.e.
        if ($('.overlay').length > 0) {
            var html = $('#createDivTemplate').html();
            $('#createDivTemplate').remove();
            $('.overlay').append("<div id='createDiv' class='overlay-container' style='display:none'>" + html + "</div>");
        }
Cheers,

Craig