jquery ui dialog - button click event handlers - javascript

I'm a js noob. I'm using the jquery FullCalendar plugin which exposes an eventClick(calEvent, jsEvent, view) event which is called when you click on an event on the calendar. In my event handler I want to pop up a dialog asking if the user wants to edit just one occurrence of a recurring event or the whole event. The problem is that the button click handlers for THAT dialog need to have access to the calEvent variable, but I have to instantiate the dialog inside $(document).ready but outside of the eventClick function.
Here's my code so far:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: getEvents,
header: {
left: 'title',
center: 'prev,next',
right: 'today month agendaWeek agendaDay'
},
theme: true,
eventClick: function(calEvent, jsEvent, view) {
if(calEvent.readOnly == true) {
return;
}
if(calEvent.recurring) {
if(calEvent.persisted) {
editOccurrence(calEvent);
} else {
$("#edit_type_dialog").dialog("open");
}
} else {
editEvent(calEvent);
}
}
});
$("#edit_type_dialog").dialog({
modal:true,
autoOpen: false,
buttons: {
All:function() {
$(this).dialog("close");
editEvent(calEvent);
},
This:function() {
$(this).dialog("close");
editOccurrence(calEvent);
},
Cancel:function() {
$(this).dialog("close");
}
}
});
function getEvents(start, end, callback) {
//get some events
}
function editEvent(calEvent) {
alert("event edited");
}
function editOccurrence(calEvent) {
alert("occurrence edited");
}
});
So the question boils down to: how do I get the calEvent over to the button click event handlers in the edit_type_dialog from the eventClick function?

Here's what I did (not sure if it's recommendable, but it works):
1) Move the dialog instantiation into the eventClick method, thereby giving it access to the calEvent variable.
2) Outside the fullCalendar instantiation, but still within $(document).ready() I added $("#edit_type_dialog").hide()

Related

jQuery to fetch time from full calendar

I want to manually input the time in the modal , however everytime the modal pops up the time input field has already a value which is the current time in my computer's clock.
How do I edit the javascript so that it will not generate the time automatically.
I used the plug in here https://github.com/tliokos/jquery-fullcalendar-crud . I just Downloaded it. By the way it is my first time to use this plug in.
This is the javascript code:
$(function(){
var currentDate; // Holds the day clicked when adding a new event
var currentEvent; // Holds the event object when editing an event
$('#color').colorpicker(); // Colopicker
$('#time').timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true,
showMeridian: false
}); // Timepicker
// Fullcalendar
$('#calendar').fullCalendar({
timeFormat: 'H(:mm)',
header: {
left: 'prev, next, today',
center: 'title',
right: 'month, basicWeek, basicDay'
},
// Get all events stored in database
events: 'crud/getEvents.php',
// Handle Day Click
dayClick: function(date, event, view) {
currentDate = date.format();
// Open modal to add event
modal({
// Available buttons when adding
buttons: {
add: {
id: 'add-event', // Buttons id
css: 'btn-success', // Buttons class
label: 'Add' // Buttons label
}
},
title: 'Add Event (' + date.format() + ')' // Modal title
});
},
// Event Mouseover
eventMouseover: function(calEvent, jsEvent, view){
var tooltip = '<div class="event-tooltip">' + calEvent.description + '</div>';
$("body").append(tooltip);
$(this).mouseover(function(e) {
$(this).css('z-index', 10000);
$('.event-tooltip').fadeIn('500');
$('.event-tooltip').fadeTo('10', 1.9);
}).mousemove(function(e) {
$('.event-tooltip').css('top', e.pageY + 10);
$('.event-tooltip').css('left', e.pageX + 20);
});
},
eventMouseout: function(calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.event-tooltip').remove();
},
// Handle Existing Event Click
eventClick: function(calEvent, jsEvent, view) {
// Set currentEvent variable according to the event clicked in the calendar
currentEvent = calEvent;
// Open modal to edit or delete event
modal({
// Available buttons when editing
buttons: {
delete: {
id: 'delete-event',
css: 'btn-danger',
label: 'Delete'
},
update: {
id: 'update-event',
css: 'btn-success',
label: 'Update'
}
},
title: 'Edit Event "' + calEvent.title + '"',
event: calEvent
});
}
});
// Prepares the modal window according to data passed
Suggest looking at the docs for the timepicker.
https://jdewit.github.io/bootstrap-timepicker/
In which case set defaultTime=false
defaultTime
'current' (default) - Set to the current time.
Set to a specific time - '11:45 AM'
false - Do not set a default time

How can I execute some code if jQuery dialog was closed on escape?

I have a jQuery dialog and I need to execute some_code() when I press Esc or click the Cancel button. The latter is easy to implement, I just add define a property of the buttons object:
$('#mydialog').dialog({
closeOnEscape: true,
close: function(event, ui) {
//some_code();
$(this).dialog('destroy')
},
buttons: {
"OK": function() {
$(this).dialog("close");
},
"Cancel": function() {
some_code();
$(this).dialog("close");
}
}
});
But how can I execute some_code() after pressing Esc? This function must not be called clicking the OK button, so I cannot simply place it in the close event.
After googling around without finding an answer, I started looking into close: function(event, ui) part and found the solution using event.originalEvent (JSFiddle):
close: function(event, ui) {
// some_code();
if (event.originalEvent) {
// triggered by clicking on dialog box X or pressing ESC
// not triggered if a dialog button was clicked
some_code();
}
$(this).dialog('destroy')
}

How to destroy a progressbar on dialog closing?

I have these 2 functions one of them is to create a dialog and the other is to destroy a progressbar,
after i create the dialog i might need to create a progress bar inside it and start it, but when i close the dialog, the progress bar keeps running in the back ground.
what i need is to destroy or do anything to stop this progress bar from working.
I wrote the createdialog function with a beforeclose event to destroy the progress bar but it doesn't work, and the dialog is not even closing, like the close button is none responsive.
function createdialog(trgt,h,w) {
$( trgt ).dialog({
height:h,
width:w,
autoOpen: false,
show: {
effect: "blind",
duration: 200
},
hide: {
effect: "blind",
duration: 100
},
beforeClose: function( event, ui ) {
destroyprogresspar(trgt);
}
});
}
destroyprogresspar(dialg) {
if(dialg=="#myfilesdialog") {
$("#progressbar").progressbar("destroy");
} else if(dialg=="#ibrowser") {
$("#progressbar2").progressbar("destroy");
}
}
i tried making a closing handler upon creating the dialog like this (WORKS BUT MESSY):
$(trgt).on("dialogbeforeclose", function( event, ui ) {
if(trgt=="#myfilesdialog") {
$("#progressbar").progressbar("destroy");
} else if(trgt=="#ibrowser") {
$("#progressbar2").progressbar("destroy");
}
});
and it works but can't make it call a function instead the if conditions like this (DOESN'T WORK):
$(trgt).on("dialogbeforeclose", function( event, ui ) {
destroyprogresspar(trgt);
});

Child html element's onclick event is blocked. how to conquer? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Prevent execution of parent event handler
I need to attach functions to onclick events of hierarchical divs.
I have this HTML
<div onclick="event1()" class="wrapper">
main contents
<div onclick="event2()"class="inner">
inner contents
</div>
</div>
now when i click on inner div event1() is being called, and event2() is not being called because I think my jquery plugin blocks it.
Edited ::
actually my plugin blocks the child node events so event2() is never being called how can i stop that ?
I am using jquery full callender plugin : http://arshaw.com/fullcalendar/
and below is my configuration function which is being called on onready.
function calenderEvents(events, account_id) {
//Dynamically Set options as account type wise
var selectable_opt = '';
if (account_id == 'default') {
selectable_opt = true;
} else {
selectable_opt = false;
}
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: selectable_opt,
selectHelper: true,
eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
AfterMove(event);
},
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
var details = {
title: title,
start: start,
end: end,
allDay: allDay
};
$.post(SITE_URL + '/calendar/add-event', {
details: details
}, function() {
});
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay,
}, true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
/*eventMouseover: function() {
$('.fc-event-delete').css('display','block');
},
eventMouseout: function() {
$('.fc-event-delete').css('display','none');
},*/
editable: true,
events: events,
});
//}).limitEvents(2);
}
You can add the event handler to the container element and supply a selector so only events triggered by elements that match that selector will invoke the handler. Because the handler is being attached to the containing element, child elements that are added to the DOM later will still invoke the handler, if they match the selector.
http://api.jquery.com/on/
This code will create an event handler that will be triggered on new elements that are added to the div#wrapper element. The #adder click handler will add new elements to the wrapper.
HTML
<div id="adder">click to add elements</div>
<div class="wrapper">
contents:
<div class="inner">0</div>
</div>​
JS
var $inner = $('.inner').first(),
$wrapper = $('.wrapper'),
count = 0;
$wrapper.on('click', '.inner', function(e) {
alert('click from ' + $(this).text());
});
$('#adder').on('click', function() {
$wrapper.append($inner.clone().text(++count));
});
The main thing is the use of the .inner selector when the click event handler is added to $wrapper.
Shown in this jsFiddle.
You need to stop the event being propagated to the parent.
Use event.stopPropagation();
$(".inner").click(function(event){
//do something
event.stopPropagation();
});
This effect is call event propagation.
Inner div click handler has to be just like this to prevent propagation:
var event2 = function(event) {
event = event || window.event;
if (event.stopPropagation) {
// for adequate browsers
event.stopPropagation()
} else {
// for IE
event.cancelBubble = true
}
}
demo - http://jsfiddle.net/Qw92P/
Just use one click event on the wrapper but make it "live". Detect if the click was actually on the child using targetElement (or is it srcElement--you can look up this part).

JQuery UI event callbacks not triggering when set in initializer

I have the following code
$(document).ready(function() {
$('#content_reservation-fullCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: <?php echo($event_list); ?>
});
$("#content_reservation-fullCalendar").resizable({
handles: 'e',
create:
function(event, ui){
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize intialized");
},
resize:
function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize callback triggered");
}
});
/*
$("#content_reservation-fullCalendar").bind("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
*/
});
as a drupal theme template, when I set the event callbacks in the initializer they do not get triggered however when I bind the event resize via bind it works, however not for resizecreate. I'm wondering why the events aren't registering as part of the intializer, is there something I'm missing or could it be some configuration issue. I don't receive any php/javascript errors.
Relevant JQuery UI Documentation Page
I have stumbled upon this type of problem myself. It seems that the bind events and the initializer events are not the same thing, go figure, and you cannot trigger the initializer events. For instance, Binding to 'resizecreate' should work, but will not be the same function as you defined in the 'create' function of the initializer.
Try defining your events like so:
//This should define all your events
$('.selector').resizeable().bind({
resizecreate : function(event,ui) {...},
resizestart : function(event,ui) {...},
resize : function(event,ui) {...},
resizestop : function(event,ui) {...},
});
You should be able to trigger these events like:
//You can trigger the events by doing:
$('.selector').trigger('resizecreate');
$('.selector').trigger('resizestart');
$('.selector').trigger('resize');
$('.selector').trigger('resizestop');
Also note that the callbacks will fire when you operate the widget (i.e. resizing the container) as normal when defining the event callbacks with the bind method.
EDIT: Ok, I think I solved it, or at least this worked for me. Since the resizecreate event only fires when the resizeable widget is created, you must bind to it before you create the widget.
The following example defines a resizeable widget and will fire two alerts: one from the bind definition, one from the initializer.
HTML
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
JavaScript
$(function() {
$( "#resizable" ).bind('resizecreate',function() {
alert('BIND');
}).resizable({
'create' : function() {
alert('INITIALIZER');
}
});
});
Also note, calling $('#resizable').trigger('resizecreate'); will fire the callback provided to the bind function as noted before (in this case, an alert box with 'BIND').
$('.sidebox').resizable().bind({
resizecreate: function(event, ui) {
console.log('C')
},
resizestart: function(event, ui) {
console.log('RS')
},
resize: function(event, ui) {
console.log('R')
},
resizestop: function(event, ui) {
console.log('RST')
},
});
Try live() or delegate() for all your asynchronous binds
$("#content_reservation-fullCalendar").live("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
Initialize the resizable with the resize callback specified:
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
Bind an event listener to the resize event:
$( ".selector" ).on( "resize", function( event, ui ) {} );
More info : http://api.jqueryui.com/resizable/
Example for custom event :
var element;
element.resizable({
'resize' : function() {
element.trigger('myevent');
}
});
$('.elementselector').bind('myevent', function() {
alert('Custom Event');
});

Categories

Resources