jquery-ui-timepicker＆drupal的editablefields模塊

Question

我遇到了JavaScript工具之間的衝突，我的JavaScript知識還不夠先進，無法解決它。

我使用drupal的editablefields模塊，允許用戶在節點視圖中內聯編輯字段，以便在節點/％/編輯中編輯它們。

與此我使用弗朗索瓦Gélinas'的jquery-UI-timepicker組合：http://fgelinas.com/code/timepicker/

我碰上是這個問題，稱爲當最初的timepicker被bineded到DOM元素，例如：

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

使用這樣的代碼：

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

這個偉大的工程，以及timepicker彈出當用戶點擊的領域，他們可以點擊一個新的小時來更新該字段。但只要該更新發生Drupal的editablefields模塊更新領域，改變字段ID來是這樣的：

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

現在的jQuery-UI-timepicker不再綁定到一個真實存在的元素，因此如果在一個widget的第二個按鈕用戶點擊，要說分鐘，我得到一個錯誤：

uncaught exception: Missing instance data for this timepicker 

所以我的問題是，如何強制重新綁定timepicker到一個新的ID？或者，如何阻止drupal editablefields模塊保存更新並更改字段的標識直到編輯完成？

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