Json loaded table with jeditable and datepicker (jquery/ui) problems with month switch

blockem

Hi All

I am using a json loaded datatable with the jEditable plugin and the jQuery/UI date picker and having some problems.

I used Eric_DeCoff's sample code (http://www.datatables.net/forums/discussion/1723/editable-with-datepicker-inside-datatables/p1) to get the basic functionality running. (Thanks Eric!)

When I open a datepicker and click on a date it works as anticipated.

When I select the next or prev month button (top left and right) on the date picker, the datepicker moves, then seems to trigger the close/save event on the item being edited (I assume because the input element goes away and it returns to its original "pre dblclicked" state with no change in the value) and stops the component from working.

From my hunting around there was some talk or the blur event from the input box being a problem, but its caught here:
[code]
// override normal blur function ( needed for date month switching )
$('#jobtable tbody td.ui-datepicker-inline input').live('blur', function(e) {
return false;
});
[/code]

All I can think of is that the jEditable component is triggering a blur event and its internal save function before the calendar has a chance to move months and before it can be overwritten by the line above.

I have checked the flow, and the onblur event is triggered before the calendar moves, or the input box is removed from the cell.

By following the even through the debugger it seems to run about a dozen return false loops and cancels everything.

Does anyone have a better way of achieving this?

Thanks in advance

blockem

And here is my code:
[code]
$(document).ready(function() {
/* Init the table */
oTable = $('#jobtable').dataTable({
"bProcessing": true
, "bStateSave": true
, "bJQueryUI": true
, "sPaginationType": "full_numbers"
, "sAjaxSource": '/ajax/getJobs3.asp?CompanyID=<%=CompanyID%>'
, "aoColumns": [
{ "mData": null
, "sClass": "control center"
, "bSortable": false
, "sDefaultContent": ''
, "sClass": "read_only"
}
, { "mDataProp": "JobNo"
, "sClass": "read_only"
}
, { "mData": "FirstName" }
, { "mData": "LastName" }
, { "mData": "Suburb" }
, { "mData": "PostCode"
, "sType": "numeric"
}
, { "mData": "InstallDate"
, "sClass": 'ui-datepicker-inline'
, "sType": "date-AU"
}
, { "mData": "DateSold"
, "sClass": 'ui-datepicker-inline'
, "sType": "date-AU"
}
, { "mData": "SystemSize"
, "sType": "numeric"
}
, { "mData": "InverterBrand" }
, { "mData": "InverterSize"
, "sType": "numeric"
}
, { "mData": "CustomerPrice"
, "sType": "currency"
, "mRender": function(data, type, full) { return '$' + data;}
}
, { "mData": "STCs"
, "sType": "numeric"
, "sClass": "read_only"
}
]
, "fnDrawCallback": function() {
$('#jobtable tbody td[class!="read_only"]').editable('/ajax/updJobs.asp', {
tooltip: 'Doubleclick to edit...'
, event: 'dblclick'
, callback: function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
}
, height: "14px"
, indicator: 'Saving...'
, sReadOnlyCellClass: "read_only"
, submitdata: function(value, settings) {
var col = oTable.fnGetPosition(this)[2]
var oSettings = oTable.fnSettings(); //Table Settings
var col_name = oSettings.aoColumns[col].sTitle; //Column name
var col_type = oSettings.aoColumns[col].sType; //Column type
return {
"row_id": this.parentNode.getAttribute('id')
, "column": col
, "column_name": oSettings.aoColumns[col].mData
, "column_type": oSettings.aoColumns[col].sType
, "SessionID": <%=session.sessionid%>
, "CompanyID": <%=CompanyID%>
, "UserID": <%=UserID%>
};
}
});

// select everything when editing field in focus
$('#jobtable tbody td input').live('focus', function(e) {
$(this).select();
});

// attach datepicker on focus and format to return yy-mm-dd
$('#jobtable tbody td.ui-datepicker-inline input').live('focus', function(e) {
$(this).datepicker({
dateFormat: 'dd M yy'
, changeMonth: true
, changeYear: true
}).datepicker("show");
});

// override normal blur function ( needed for date month switching )
$('#jobtable tbody td.ui-datepicker-inline input').live('blur', function(e) {
return false;
});

// set change function to handle sumbit
$('#jobtable tbody td.ui-datepicker-inline input').live('change', function(e) {
//$('#jobtable tbody td.ui-datepicker-inline input').live('onSelect', function(e) {
$(this).parents("form").submit();
});
}
});

$(document).on("click", "#jobtable tbody td img", function() {
/*$('#jobtable tbody td img').live('click', function() {*/
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
this.src = "/images/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});

/*$(document).on("click", "#jobtable tbody tr", function() {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});*/



});
[/code]

blockem

I set up a demo site as requested to show the behaviour.

http://www.as.net.au/frmDefault(3).asp