Отмена Jeditable и jQuery UI Datepicker onblur не работает с опцией кнопки showOn - PullRequest
Новая
       5

Отмена Jeditable и jQuery UI Datepicker onblur не работает с опцией кнопки showOn

4 голосов
/ 17 ноября 2011

Я настроил DatePicker для активации следующим образом 

$(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     : ''
        });
    });
});

Я использую этот плагин

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 );
            }
        } );
    }
} );

Этот плагин успешно работаетдо тех пор, пока я не добавлю следующие параметры в этот плагин 

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

И я бы хотел добиться этого (подробное объяснение ниже)

  • двойной щелчок по полю,загрузить тип ввода datepicker
  • изменить данные, либо отредактировав их, либо выбрав новую дату из datepicker
  • отправить данные, выбрав дату из календаря
  • , если пользователь активировалредактируемый плагин, onblur: отмена не работает, пока я не открою календарь (я бы хотел отменить редактирование, если пользователи щелкают где-то еще)

Но я застрял.Можете ли вы помочь мне?

ПОСЛЕДНЕЕ РЕДАКТИРОВАНИЕ

Действия по воспроизведению проблемы

- получение jquery, jquery-ui, jeditable и кода подключаемого модуляили из github -добавьте цитируемые скрипты в соответствующие файлы -пишите пример страницы следующим образом 

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

* при нажатии на нее, она должна открыть текстовое поле и красивый значок календаря

, еслиВы нажимаете на значок, появляется календарь

, вы можете либо отправить дату и отправить данные, либо щелкнуть куда-нибудь еще (потерять фокус) и не отправлять данные

проблемаздесь ...

если вы активируете поле (сделаете его редактируемым), вы не сможете заставить его исчезнуть (потерять фокус), если не активируете календарь

Большое спасибо.

1 Ответ

1 голос
/ 26 февраля 2012

Я нашел решение, которое, по моему мнению, отвечает вашим требованиям.Вместо того, чтобы пытаться объяснить все отличия от приведенного вами примера, было бы намного проще показать вам отдельный пример того, что я сделал.

В этом примере используются jquery, jquery-ui и jeditable.Я не использую jquery.jeditable.datepicker.js, а использую метод addInputType для $ .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;
        }
    });
});

Ключ к этому решению заключается в том, как работает метод закрытого сброса $ .editable.,Он не будет сбрасывать (отменять) ввод, если ключ «edit» javascript исходного родительского элемента установлен в false.Я просто использовал .datepicker's beforeShow, чтобы установить его таким образом.

А вот оставшийся код для этого примера: 

$(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'
    });
});

И HTML: 

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

Надеждачто помогает.Приветствия.

...