Inline Edit with jQuery UI date picker

Question

I am trying to implement inline edit for the date field (use jQuery UI date picker)

The code I am using is as below;

$(document).on("click",".editableDateTxt", function () {
    var currElmModelId = $(this).attr('data-model-id');
    var currElmModelAttr = $(this).attr('data-model-attr');
    var input = $('<input />', {'type': 'text','name':currElmModelAttr, 'style':'width:100px' ,'data-model-id': currElmModelId, 'data-model-attr': currElmModelAttr, 'class':'datePicker', 'value': $(this).html()});
    var parent = $(this).parent();
    parent.append(input);
    $(this).remove();

    input.datepicker().focus();

});

$(document).on("change", ".datePicker", function () {
    //alert($(this).val());
    var dataValid = $(this).attr('data-valid');
    if (dataValid == "Y") {
        var currElmModelId = $(this).attr('data-model-id');
        var currElmModelAttr = $(this).attr('data-model-attr');
        var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
        var parent = $(this).parent();
        parent.append(divEle);
        $(this).remove();
    }
});

$(document).on("blur",".datePicker", function () {
    if (this.hasAttribute('data-model-id')) {
        var dataValid = $(this).attr('data-valid');

        if (typeof dataValid == "undefined" || dataValid == "Y") {
            var currElmModelId = $(this).attr('data-model-id');
            var currElmModelAttr = $(this).attr('data-model-attr');
            var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
            var parent = $(this).parent();
            parent.append(divEle);
            $(this).remove();
            return false;
        }

    }   
});

Now when I select any date or do blur, I get the following error;

Missing instance data for this datepicker

I think the issue is related to the jQuery UI datepicker using data() So I have tried using detach() instead of remove()...

So I just used $(this).detach();

Could you guide me on the correct way of using detach() which might fix the issue...

Answer 1

You are probably having the same problem I was having. The code in your onblur is firing before the datepicker is completing its work so you are losing the input object before datepicker is done with it.

I was able to resolve this with one of the suggestions in the accepted answer on this question: https://stackoverflow.com/a/1814308/3434790

The solution that worked in my scenario was to wrap my code inside my on blur function in a setTimeout which effectively made it so that code ran after the datepicker was done doing its thing.

In your case I would suggest the following:

$(document).on("blur",".datePicker", function () {
setTimeout(function(){
    if (this.hasAttribute('data-model-id')) {
        var dataValid = $(this).attr('data-valid');

        if (typeof dataValid == "undefined" || dataValid == "Y") {
            var currElmModelId = $(this).attr('data-model-id');
            var currElmModelAttr = $(this).attr('data-model-attr');
            var divEle = $('<div />', {'class': 'editableDateTxt','name':currElmModelAttr, 'data-model-attr':currElmModelAttr,'data-model-id':currElmModelId,'html':$(this).val()});
            var parent = $(this).parent();
            parent.append(divEle);
            $(this).remove();
            return false;
        }
    }   
},100);

});