jquery-ui-timepicker＆drupalのeditablefieldsモジュール

Question

私はJavaScriptのツールとJavaScriptの知識が十分に進んでいません。

drupalのeditablefieldsモジュールを使用して、ノードビューでインラインでフィールドを編集できるようにしています（ノード/％/ editで編集可能）。このと組み合わせる

私はフランソワGélinas'jqueryの-UI-timepickerを使用しています。たとえば、timepickerはDOM要素にbinededされた当初は呼ばれたとき、私はに実行http://fgelinas.com/code/timepicker/

問題は、このです：

このようなコードを使用して

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

：

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

これは素晴らしい作品、そしてユーザーがフィールドにクリックしたときにtimepickerがポップアップして、彼らは新しい時間をクリックしてフィールドを更新します。しかし、すぐにその更新がdrupalののeditablefieldsモジュールを起こるようにフィールドを更新し、このような何かにフィールドIDを変更します。

ので、もし今のjquery-UI-timepickerはもはや、存在する要素にバインドされ

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

ユーザーがウィジェット内の第二ボタンをクリック、分を言って、私はエラーを取得：

uncaught exception: Missing instance data for this timepicker 

だから私の質問はどのように私は強制的に新しいIDにtimepickerを再バインドします、ありますか？代わりに、drupal editablefieldsモジュールが更新を保存して編集が完了するまでフィールドの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($); 
});