JQuery UI event callbacks not triggering when set in initializer - javascript

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');
});

Related

jquery fullcalendar drop non event on event

i have trouble to drag and drop an item (its not an event, its an employee name) on an event.
I want to drag an employee (see picture) on an event, but the 'employee' is
no event. I am using jquery UI draggable/droppable.
<script>
var calendar;
$(document).ready(function() {
calendar = $('#calendar').fullCalendar({
droppable: true,
dropAccept: '.employeeItem',
drop: function(date, allDay, jsEvent, ui) {
}
});
});
$(function() {
$(".employeeItem").draggable();
$(".fc-event").droppable({
drop: function(event, ui) {
}
});
});
</script>
<?php for($i=1;$i<=30;$i++){?>
<div>Simpson, Homer<br>
10 / 14 h
</div>
<?php }?>
<div id='calendar'></div>
After dropping an employee on an event, i need the corresponding
event data (event-id etc) to save the process to the db. But jquery fullcalendars "drop (callback)" only provides the date that the item was dropped on.
You can use eventAfterRender to add a custom id to the dom element using data properties. Then grab the id after the drop (event.target), update the event in the db, then refresh the dataSource.
Fiddle
$(document).ready(function() {
$('#calendar').fullCalendar({
...
eventAfterRender: function(event, element){
element.data('myId',event.myId);
$(element).droppable({
drop: function( event, ui ) {
var dragged = ui.draggable;
var targetId = $(event.target).data('myId');
}
});
}
...
});
});
$(document).ready(function() {
$(".employeeItem").draggable();
});

sortable - start , update , stop events not getting triggered

When I am dragging and dropping an item, following code using sortupdate gets triggered
$('#sortable').sortable().bind('sortupdate', function (event, ui) {
debugger;
//Triggered when the user stopped sorting and the DOM position has changed.
});
BUT
start, update, stop, change events are not getting triggered
That is,
$('#sortable').sortable({
start: function(event, ui) {
//
},
change: function(event, ui) {
//
},
update: function(event, ui) {
//
}
});
My goal is to find the original and dropped position of an item.
EDIT (for clear understanding):
In short,
$('#sortable').sortable().bind('sortupdate' ..... is working(triggered)
$('#sortable').sortable().bind('start' ..... is not working(not triggered)
$('#sortable').sortable().bind('change' ..... is not working(not triggered)
$('#sortable').sortable().bind('update' ..... is not working(not triggered)
$('#sortable').sortable().bind('sort' ..... is not working(not triggered)
If possible to get the values of old and new position with sortupdate event alone, then also it is ok..My ultimate goal is to find the position of both old and new for an item.
all this event are prefixed with sort so instead of start it becomes sortstart
i have created a fiddle where it will give the message of item moved from and to have a check at
http://jsfiddle.net/p2gethgh/
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
var from,to;
$("#sortable").on("sortstart",function(event,ui){
from = $(this).children().index(ui.item);
});
$('#sortable').on('sortdeactivate',function(event,ui) {
to = $(this).children().index(ui.item);
alert(ui.item.text()+' moved from '+(from + 1)+' to '+(to + 1));
});
This is the correct way to bind event to jquery sortable
$( ".selector" ).sortable({
start: function( event, ui ) {}
});
OR
$( ".selector" ).on( "sortstart", function( event, ui ) {} );

Jquery sortable - limit droppables

I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});
You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/

Inserting javascript when jquery resize is finished

I'm using the jQuery UI resize function, and when user is finished with the operation I'd like it to run this code:
var pl=$('#player iframe')[0];pl.src=pl.src;
Would a callback work? How would I insert it into the resize function?
Specifically, the code I'm using for resize is this:
$(function() {
$( ".resizableaspect" ).resizable({
aspectRatio: true,
helper: "ui-resizable-helper"
});
});
You are using jQueryUI I think.
This is the official documentation:
http://jqueryui.com/resizable/
The event stop is called when you have finished to resize your element.
Other event are:
- create
- resize
- start
- stop
Try this:
$(function() {
$( ".resizableaspect" ).resizable({
aspectRatio: true,
helper: "ui-resizable-helper",
stop: function(e, ui) {
var pl=$('#player iframe')[0];pl.src=pl.src;
}
});
});
resizable has an event called stop, which is "triggered at the end of the resize operation".
http://api.jqueryui.com/resizable/
$( ".resizableaspect" ).resizable({
aspectRatio: true,
helper: "ui-resizable-helper",
stop: function(){
// YOUR CODE HERE
}
});

JQuery droppable and large table

I'm trying to optimize response time on a page with a "large" table that is a jquery droppable that accepts ~6 draggables. Like others I've seen poor response time when making each of the droppables. I've read both this post and this post, but I can't seem to get my code to work.
My basic problem is I don't know how to get a reference to the element in which the draggable was dropped. It seems the only element I can get access to is the actual draggable.
Here's how I've defined my jquery code:
$( "#grid table" ).droppable({
//disabled: 'true',
//activate: function (event, ui) {
// console.log("Activated table")
//},
//over: function (event, ui) {
// console.log("Dragged over")
//},
//activeClass: "ui-state-default",
//hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
tolerance: 'pointer',
drop: function( event, ui ) {
console.log("draggable DROPPED!!!");
//$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
console.log('Dropped cell is'+cell);
console.log(ui.position)
console.log(ui.offset)
console.log(document.elementFromPoint(ui.position.left, ui.position.top))
$(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
console.log('Setting background to:'+ui.draggable.attr("colorValue"));
}
Any help you can provide is much appreciated.
$(this) in drop: function( event, ui ) refers to the element in which the draggable was dropped

Categories

Resources