Question

我遇到了javascript工具之间的冲突，我对javascript的了解还不够先进。

我正在使用drupal的editablefields模块，允许用户在节点视图中内联编辑字段，以便在节点/％/ edit中编辑它们。

结合我使用FrançoisGé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的editablefields模块就会更新字段并将字段ID更改为以下内容：

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

现在jquery-ui-timepicker不再绑定到存在的元素，因此如果用户点击小部件中的第二个按钮，说出分钟，我会收到错误：

uncaught exception: Missing instance data for this timepicker

所以我的问题是，我如何强行将时间戳重新绑定到新ID？或者，如何阻止drupal editablefields模块保存更新并更改字段的ID，直到编辑完成？

Answer 1

想出来，有点hacky但它确实有效，也许有人会发现这一天。

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

jquery-ui-timepicker＆amp; drupal的editablefields模块

1 个答案: