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?
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($);
});
Related
I have created a Master-Detail app, with three columns. First view is to select a Project. Second view, to select WBS Elements. Third view, it has a Smart Chart based on the selected WBS from second view.
So far, the first time the chart is triggered it works fine. Problem is when I deselect a few WBS, and select new ones. I can't find a way to either rebind the chart nor to refresh the third view (so either the onInit or onBeforeRendering gets triggered again)
Chart currently is getting created once user hits the emphasized chart button at the top of the second view. Please do not pay attention to the layout of the second view, it is still under development.
Hope you can help me finding a way to refresh the chart after changes on the selected WBS.
Regards,
Tincho
You could use the EventBus. After loading the Chart View first time, the EventBus is "listening". Every time you're de/selecting a checkbox the event is triggered.
{ // Chart view controller
onInit: function() {
this.oEventBus = this.getOwnerComponent().getEventBus();
this.oEventBus.subscribe("Checkbox", "Selected", this.updateChart); // "Listener"
},
updateChart: function(channelId, eventId, data) {
// ...
},
}
{ // WBS view controller
onSelectWBSElement: function(oEvent) {
const oEventBus = this.getOwnerComponent().getEventBus();
oEventBus.publish("Checkbox", "Selected", {/*data*/});
},
}
I've got a chart that where allow the user to view the data grouped by day, week, or month. The problem is that if you use the navigator the month columns grow and shrink as the navigator moves or is resized. If the user moves the navigator to the middle of a month, the column graph above shows that that month is off by half. Is there a way to make the navigator be limited by monthly increments?
Only solution is to use afterSetExtremes() or setExtremes() and there update extremes to required ones.
I think this will work, edited to UTC date
I also wrote in a 1 second delay to avoid it triggering too much
events: {
afterSetExtremes: function (e) {
minFirstDay = new Date(e.min);
minFirstDay = Date.UTC(minFirstDay.getFullYear(), minFirstDay.getMonth(), 1);
maxFirstDay = new Date(e.max);
maxFirstDay = Date.UTC(maxFirstDay.getFullYear(), maxFirstDay.getMonth(), 1);
setTimeout(function(){
if (e.min != minFirstDay || e.max != maxFirstDay) {
navChart.xAxis[0].setExtremes(minFirstDay, maxFirstDay);
console.log('date range updated');
};
}, 1000);
}
}
I am trying to get the buttontext of datepicker (which defaults to an ellipsis), to set itself as the value of the input.
I have multiple datepickers on the page, and unlike my example below I have an icon instead of a text input. I would like the value itself to show on the tooltip that appears when you hover over the icon.
I have tried - buttonText: $(this).val() as an option but it doesn't pick anything up
Example - http://jsbin.com/unolot/3/
So my question - How do I get the buttontext of the datepicker input to match the value dynamically?
You have to handle two cases:
When the selected date changes: use the onSelect event to change the button's title attribute
On initial rendering: unfortunately, the datepicker does not implement the widget factory (yet) so there is no create event, you'll have to update the title attribute manually after the widget has initialized.
Don't forget to set the default date of the picker to the initial value of the field, otherwise the default selected date is "today"
Something like this:
// as you have several instances, loops through them
$(".deadline_picker_on").each(function() {
var dt = $(this);
dt.datepicker({
showOn: "button",
buttonText: '',
// set the default date to the value of the field
defaultDate: dt.val(),
duration: 100,
dateFormat: 'yy-mm-dd',
showOptions: {
direction: 'right'
},
onSelect: function(dateText, inst) {
// on data selection, change the title attribute of the button
$(this).next().attr('title', dateText);
}
})
// get the button (next element)
.next()
// set the title attribute with the formatted initial date from the picker
.attr('title', $.datepicker.formatDate('yy-mm-dd', dt.datepicker('getDate')));
});
i've got the following code taken and slightly modified by the original example page:
http://jsfiddle.net/zK3Wc/21/
somehow, if you use the arrow down button to go through the list, it shows the values (digits) in the search field, instead of the label, but the code says, that on the select event, the label should be set as the value.
what i would need is to display the label in the searchfield instead of the digits, but if i click on an item, it has the digit value in the url, the same when using the arrow down button.
Ramo
Add a focus event:
focus: function( event, ui ) {
$( ".project" ).val( ui.item.label );
return false;
},
http://jsfiddle.net/zK3Wc/26/
For me, I forgot to put return false; in the select: callback function
I need a specific behavior of jQuery UI Datepicker:
By clicking on 'Prev/Next Month' current day of month must be automatically set in the previous/next month.
e.g.: default date was set to 8/25/2011, after clicking 'Next month' (or selecting September in dropdown), 9/25/2011 must be automatically selected (but not populated to input and datepicker itself must not disappear, so user can change this default day of month).
Thanks for advice.
You can make use of the beforeShowDay event.
var defaultDay = 15;
$('#datepicker').datepicker({
beforeShowDay: function(date) {
if (date.getDate() == defaultDay)
return [1, 'ui-state-highlight ui-state-active']; // can replace with a customised class
return [1, ''];
},
defaultDate: '07/' + defaultDay + '/2011'
});
You can assign a customised class yourself and style it to your heart's content.
Example: http://jsfiddle.net/william/nNmg2/
Note: you may need to take care of double-digit padding, if defaultDay is 1 to 9.