Jeditable and jQuery UI Datepicker onblur cancels work with showOn button

Question

I configured datepicker to activate as follows

$(function () { $(".editable_datepicker").click(function (event) { $(this).editable('ajax_save.php',{ id : 'id', type : 'datepicker', style : 'margin:0px;width:80%;display:inline', onblur : 'submit', tooltip : '' }); }); }); 

I am using this plugin

source: https://github.com/qertoip/jeditable-datepicker/blob/master/src/jquery.jeditable.datepicker.js

 jQuery.expr[':'].focus = function( elem ) { return elem === document.activeElement && ( elem.type || elem.href ); }; $.editable.addInputType( 'datepicker', { element: function( settings, original ) { var form = $( this ), input = $( '<input />' ); input.attr( 'autocomplete','off' ); form.append( input ); settings.onblur = 'nothing'; return input; }, plugin: function( settings, original ) { var form = this, input = form.find( "input" ); settings.onblur = 'nothing'; input.datepicker( { dateFormat:'yy-mm-dd', showOn: "button", buttonImage: "img/calendar_icon.gif", buttonImageOnly: true, onSelect: function() { form.submit(); }, onClose: function() { setTimeout( function() { if ( !input.is( ':focus' ) ) { original.reset( form ); } else { form.submit(); } }, 150 ); } } ); } } ); 

This plugin works successfully until I add the following parameters to this plugin

  showOn: "button", buttonImage: "img/calendar_icon.gif", buttonImageOnly: true, 

And I would like to achieve this (detailed explanation below)

• double click on the field, load the input type datepicker
• change data by editing them or selecting a new date with datepicker
• send data by selecting a date from the calendar
• If the user activated the editable plugin, onblur: cancellation does not work if I do not open the calendar (I would like to cancel the editing if users click on another location).

But I'm stuck. Can you help me?

LATER EDIT

Steps to reproduce the problem

-get jquery, jquery-ui, jeditable and attached plug-in code or from github -add quoted scripts in the corresponding files -see example page as follows

 <input type='editable_datepicker' value='2011-11-17'> 

* when you click on it, it should open the text box and the calendar icon

if you click on the icon a calendar will appear

you can either send the date, or send data or click elsewhere (lose focus) and do not send data

the problem is here ...

if you activate the field (make it editable), you cannot disappear (lose focus) if you do not activate the calendar

Thank you very much.

Answer 1

I have found a solution that I think fits your requirements. Instead of trying to explain all the differences from your example, it would be much easier to show you a separate example of what I did.

The example uses jquery, jquery-ui, and jeditable. I am not using jquery.jeditable.datepicker.js, but rather the addInputType method for $ .editable:

 $(function () { $.editable.addInputType('datepicker', { element: function(settings, original) { var input = $('<input />'); input.attr('autocomplete', 'off'); $(this).append(input); // rather than assigning plugin separately, I'm just adding it here // (but doing it this way isn't critical to this solution) input.datepicker({ dateFormat:'yy-mm-dd', showOn: "button", buttonImage: "calendar_icon.gif", buttonImageOnly: true, beforeShow: function() { var editable_datepicker = $(this).parent().parent().get(0); // This is the heart of the solution: editable_datepicker.editing = false; }, onClose: function(a, b) { var form = $(this).parent(); form.submit(); } }); return input; } }); }); 

The key to this solution is how the private reset method $ .editable works. It will not reset (input) if the source javascript dictionary element "edit" is set to false. I just used .datepicker beforeShow to install it as such.

And here is the remaining code for this example:

 $(function() { $(".editable_datepicker").editable('ajax_save.php',{ id : 'id', type : 'datepicker', style : 'margin:0px;width:80%;display:inline', onblur : 'cancel', // use 'cancel'! tooltip : 'Double click to edit', event : 'dblclick' }); }); 

And HTML:

 <span class='editable_datepicker'>01/01/2012</span> 

Hope this helps. Greetings.