Jeditable Datepicker onblur problem
        Posted  
        
            by Shobha Deepthi
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Shobha Deepthi
        
        
        
        Published on 2010-04-22T09:48:12Z
        Indexed on 
            2010/04/22
            9:53 UTC
        
        
        Read the original article
        Hit count: 693
        
Hi, I am using inline editing using Jeditable and datepicker. I have a column in my table which displays Date as a hyperlink. When I click on this it shows me the datepicker. And when a particular date is selected its updated in the backend and the cell now is updated with the changed value. However, am having problem with onblur event while changing month or years. This event gets triggered when I click on "Prev" or "Next" buttons on the datepicker control. This causes an exception when the date is selected. This works fine as long as the date selected is in the current month. I tried all possible solutions listed here:
stackoverflow.com/questions/2007205/jeditable-datepicker-causing-blur-when-changing-month
If settimeout the control does not change back to a normal hyperlink on closing the datepicker or on a true onblur event.
Here's my code,
$.editable.addInputType('datepicker', { element : function(settings, original) { var input = $(''); if (settings.width != 'none') { input.width(settings.width); } if (settings.height != 'none') { input.height(settings.height); } input.attr('autocomplete','off'); $(this).append(input); return(input); }, plugin : function(settings, original) { var form = this;
    settings.onblur = function(e) { 
        t = setTimeout(function() {
         original.reset.apply(form, [settings, self]);
        }, 100);
     };
    $(this).find('input').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd-M-y',
        closeAtTop: true,
        onSelect: function(dateText) { $(this).hide(); $(form).trigger('submit'); }
    });            
},
submit  : function(settings, original) { }
});
$(function() { $('.edit_eta').editable('update_must_fix_eta.php', { id: 'bugid', name: 'eta', type: 'datepicker', event: 'click', select : true, width: '50px', onblur:'cancel', cssclass : 'editable', indicator : 'Updating ETA, please wait.', style : 'inherit', submitdata:{version:'4.2(4)',tag:'REL_4_2_4',qstr:1} }); });
I tried hacking jeditable.js as mentioned on this link: http://groups.google.com/group/jquery-dev/browse_thread/thread/265340ea692a2f47
Even this does not help.
Any help is appreciated.
© Stack Overflow or respective owner