jquery-ui-timepicker &drupal的editablefield模块

Question

我遇到了javascript工具之间的冲突，而且我对javascript的知识还不够先进，不足以解决它。

我使用drupal的editablefield模块来允许用户在节点视图中内联编辑字段，而不是在node/%/edit中编辑字段。

结合这一点，我使用François Gélinas的jquery-ui-timepicker：http://fgelinas.com/code/timepicker/

我遇到的问题是，当最初调用时间选择器时，它被绑定到一个dom元素，例如：

#edit-field-days-start-time-und-0-value 

使用如下代码：

$('#edit-field-days-start-time-und-0-value').timepicker();

这非常有效，当用户在字段中单击时，时间选择器会弹出，用户可以单击新的小时，它将更新字段。但一旦更新发生，drupal的editablefield模块就会更新字段，并将字段id更改为如下所示：

#edit-field-days-start-time-und-0-value-1

现在jquery-ui-timepicker不再绑定到现有的元素，所以如果用户单击小部件中的第二个按钮，比如分钟，我会得到一个错误：

uncaught exception: Missing instance data for this timepicker

所以我的问题是，如何强制将时间选择器重新绑定到新的ID？或者，在编辑完成之前，如何阻止drupal editablefield模块保存更新和更改字段的id？

Answer 1

弄明白了，有点老生常谈，但它是有效的，也许有一天会有人发现这一点。

// global timeout variable
var t=0;
// global variable to represent current time picker
var timepickerInst='';

function onSelectCallback(){
t=setTimeout("dateUpdateCallback()",50);
}
function onCloseCallback(){

} 
function dateUpdateCallback(){
$=jQuery;
if( $('#'+timepickerID).length != 0 ){
    t=setTimeout("dateUpdateCallback()",50);
}
else {
    setupTimepicker($);
    //jQuery(document).find('#'+timepickerID).focus();
}
}

function setupTimepicker($){
    timepickerID = $('.form-item-field-days-start-time-und-0-value .text-full.form-text').attr('id');
    $('.form-item-field-days-start-time-und-0-value .text-full.form-text').timepicker({
    // Options
    timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
    showLeadingZero: false,        // Define whether or not to show a leading zero for hours < 10.
    showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
    showPeriod: true,            // Define whether or not to show AM/PM with selected time. (default: false)
    showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
    periodSeparator: ' ',         // The character to use to separate the time from the time period.
    defaultTime: '08:00',         // Used as default time when input field is empty or for inline timePicker

    // Localization
    hourText: 'Hour',             // Define the locale text for "Hours"
    minuteText: 'Min',         // Define the locale text for "Minute"
    amPmText: ['AM', 'PM'],       // Define the locale text for periods

    // Position
    myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
    atPosition: 'left bottom',    // Corner of the input to position

    onSelect: onSelectCallback,
    onClose: onCloseCallback,

    // custom hours and minutes
    hours: {
        starts: 02,                // First displayed hour
        ends: 21                  // Last displayed hour
    },
    minutes: {
        starts: 0,                // First displayed minute
        ends: 45,                 // Last displayed minute
        interval: 15               // Interval of displayed minutes
    },
    rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
    showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
    showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

    // buttons
    showCloseButton: true,       // shows an OK button to confirm the edit
    closeButtonText: 'Done',      // Text for the confirmation button (ok button)
    showNowButton: false,         // Shows the 'now' button
    nowButtonText: 'Now',         // Text for the now button
    showDeselectButton: false,    // Shows the deselect time button
    deselectButtonText: 'Deselect' // Text for the deselect button

});
}

jQuery(document).ready( function($) {   
setupTimepicker($);
});