jquery-ui-timepicker & drupal's editablefields module

Question

I've run into a conflict between javascript tools and my knowledge of javascript isn't quite advanced enough to solve it.

I'm using drupal's editablefields module to allow users to edit fields inline in the node views as apposed to editing them in node/%/edit.

Combined with this i'm using François Gélinas' jquery-ui-timepicker: http://fgelinas.com/code/timepicker/

The problem i run into is this, when called initially the timepicker is bineded to a dom element, for example:

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

using code like this:

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

This works great, and the timepicker pops up when the user clicks in the field, and they can click on a new hour it will update the field. But as soon as that update happens drupal's editablefields module updates the field and changes the field id to something like this:

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

Now the jquery-ui-timepicker is no longer binded to an element that exists, so if the user clicks on a second button in the widget, say the minutes, i get an error:

uncaught exception: Missing instance data for this timepicker

So my question is, how do i forcibly rebind the timepicker to a new ID? or alternatively, how do i block the drupal editablefields module from saving the update and changing the id of the field until the edit is complete?

Answer 1

Figured it out, a bit hacky but it works, maybe someone will find this one day.

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