Sorry, but apparently I don't understand chaining enough to figure out this problem...
I'm implementing a jQuery carousel plugin (jCarouselLite) and I'm trying to add an option to 'remove' one of the carousel items (currently <div class="remove">)...
initEvents: function() {
var self = this;
// Bind jQuery event for REMOVE button click
$('.remove').live('click', function() {
// Need to save the ID that we're removing
var item = $(this).closest('li.sort');
var itemId = item.attr("id");
$(this).removeItem();
self.refreshDisplay(itemId);
});
$.fn.removeItem = (function() {
var item = this.closest('li.sort'); // could save this call by passing param
item.fadeOut("normal", function() {
$(this).remove();
});
// preserve jQuery chain
return this;
});
},
refreshDisplay(itemId) {
// ...
// redraws carousel
// ...
// itemId is used to remove from the array of Items to show (class-wide scope)
}
Since there's no clean way to 'refresh' the jCarouselLite plugin (maybe something I'll try implementing in the actual plugin later) the quick and dirty fix for this is to just regenerate the Carousel.
The issue is I'm trying to fade out the element clicked, however, it seems like the refreshDisplay() is called before the animation of fading out (and removing) the clicked item is completed. I've verified this by commenting out the self.refreshDisplay(itemId); line and it fades out and removes as expected.
So I guess there's a certain way I need to chain this? I've done a couple hours of reading on how chaining works and I thought I understood it, but apparently not.
Any and all help is appreciated, thanks!
The purpose of chaining is to allow multiple commands to share a base object, but it doesn't cause each command to wait for the previous one.
For that, you need to use a callback. Something like
initEvents: function() {
var self = this;
// Bind jQuery event for REMOVE button click
$('.remove').live('click', function() {
// Need to save the ID that we're removing
var item = $(this).closest('li.sort');
var itemId = item.attr("id");
$(this).removeItem(function() {
self.refreshDisplay(itemId);
});
});
$.fn.removeItem = (function(callback) {
var item = this.closest('li.sort'); // could save this call by passing param
item.fadeOut("normal", function() {
$(this).remove();
callback(); //now your refresh is being called after the fade.
});
// preserve jQuery chain
return this;
});
},
Related
I am trying to create a custom jQuery UI Widget. The widget contains resources that take a bit longer to load, so I would like to fire an event after everything has finished rendering on the page.
I have tried the following two methods but neither have worked:
_initializeEvents: function() {
this._on(this.element, {
load: function() {
//Do stuff
}
});
}
and
_initializeEvents: function () {
this.element.load(function() {
//do stuff
});
}
What can I do to capture an event after the widget has loaded. I'd rather not set a timeout.
5 Years late, but I had a similar issue and did this to solve it.
// Get an instance of your widget
var WidgetInstance = $("#ID");
// Take a copy of the original method
var tmp = YourWidgetName.YourMethodName;
// Extend the method with some extra code
WidgetInstance.YourMethodName = function () {
// This line will run your current method
tmp.apply(this, arguments);
// This code will run after that has completed
console.log("Kaboom");
};
I have an MVC application. I am trying to load a model from the server using jQuery's load. This works perfectly fine. I am now trying to run some JavaScript after all of my views have been loaded. As such, I am introducing jQuery's deferred promise functionality through use of jQuery .when
My limited understanding of this functionality has lead me to believe that the two bits of code below should run identically. It seems to me that my 'then' method is executing too soon, though. I'm not sure how to confirm that.
Old Code (Works):
$('#OrderDetails').load('../../csweb/Orders/OrderDetails', function () {
$("fieldset legend").off('click').click(function () {
var fieldset = $(this).parent();
var isWrappedInDiv = $(fieldset.children()[0]).is('div');
if (isWrappedInDiv) {
fieldset.find("div").slideToggle();
} else {
fieldset.wrapInner("<div>");
$(this).appendTo($(this).parent().parent());
fieldset.find("div").slideToggle();
}
});
});
Now, I would like to extend that to wait for multiple load events. To keep things simple, though, I am just going to try and wait for OrderDetails:
New Code (Doesn't Work):
var onDisplayLoadSuccess = function () {
console.log("Done!");
console.log('Fieldset legend:', $('fieldset legend'); //Not all found.
$("fieldset legend").off('click').click(function () {
var fieldset = $(this).parent();
var isWrappedInDiv = $(fieldset.children()[0]).is('div');
if (isWrappedInDiv) {
fieldset.find("div").slideToggle();
} else {
fieldset.wrapInner("<div>");
$(this).appendTo($(this).parent().parent());
fieldset.find("div").slideToggle();
}
});
};
var onDisplayLoadFailure = function () {console.error("Error.");};
$.when($('#OrderDetails').load('../../csweb/Orders/OrderDetails')).then(onDisplayLoadSuccess, onDisplayLoadFailure);
I do not see any errors fire. I see 'Done' print to the console, but the timing seems to be different. Legends which existed on the page prior to calling when/load/then have the click event applied to them, but legends which are loaded from in the view given back by OrderDetails do not have the click event bound to them.
By contrast, the old code's success function applied the click event to all legends appropriately. Why would this be the case?
To capture events on DOM elements that are added dynamically after binding an Event, you need to delegate it (http://api.jquery.com/on/).
Something like:
$('fieldset').on('click', 'legend', function(){
What I'm trying to do is the following:
var queueManagerClass = function() {
this.queue = ko.observableArray();
this.queue.subscribe( function(theChangedQueue) {
// Do some nice things..
// Nice things are over, remove the last item from the queue..
this.queue.remove(theChangedQueue.pop());
}.bind(this));
};
Except 2 problems occur: when I call this.queue.remove(item); I'll end up in an infinite loop.. The subscribe function will call it self over and over again..
I know there is an option to 'unbind' the subscribe function temporally but I can't risk the fact that I miss a queueItem that's inserted in the mean time of unbinding and binding again.
I hope you'll understand my (not so great..) english.
Thanks for your time!
One way to work around this is to make it detectable that you are in the process of removing the item and specifically ignore the event when that happens. This can be done by using a local to store the "isRemoving" state. For example
var isRemoving = false;
this.queue.subscribe( function(theChangedQueue) {
if (isRemoving) {
return;
}
// Do some nice things..
// Nice things are over, remove the last item from the queue..
isRemoving = true;
this.queue.remove(theChangedQueue.pop());
isRemoving = false;
}.bind(this));
I need my script to do something on the first time an element is clicked and continue to do something different on click 2,3,4 and so on
$('selector').click(function() {
//I would realy like this variable to be updated
var click = 0;
if (click === 0) {
do this
var click = 1;
} else {
do this
}
});//end click
really I think it should rely on the variables but I can't think of how to update the variable from here on out any help would be awesome.
Have a look at jQuery's .data() method. Consider your example:
$('selector').click(function() {
var $this = $(this),
clickNum = $this.data('clickNum');
if (!clickNum) clickNum = 1;
alert(clickNum);
$this.data('clickNum', ++clickNum);
});
See a working example here: http://jsfiddle.net/uaaft/
Use data to persist your state with the element.
In your click handler,
use
$(this).data('number_of_clicks')
to retrieve the value and
$(this).data('number_of_clicks',some_value)
to set it.
Note: $(this).data('number_of_clicks') will return false if it hasn't been set yet
Edit: fixed link
Another alternative might be to have two functions, and bind one using the one function in $(document).ready() (or wherever you are binding your handlers), and in that function, bind the second function to be run for all subsequent clicks using bind or click.
e.g.
function FirstTime(element) {
// do stuff the first time round here
$(element.target).click(AllOtherTimes);
}
function AllOtherTimes(element) {
// do stuff all subsequent times here
}
$(function() {
$('selector').one('click', FirstTime);
});
This is super easy in vanilla Js. This is using proper, different click handlers
const onNextTimes = function(e) {
// Do this after all but first click
};
node.addEventListener("click", function onFirstTime(e) {
node.addEventListener("click", onNextTimes);
}, {once : true});
Documentation, CanIUse
If you just need sequences of fixed behaviors, you can do this:
$('selector').toggle(function(){...}, function(){...}, function(){...},...);
Event handlers in the toggle method will be called orderly.
$('#foo').one('click', function() {
alert('This will be displayed only once.');
});
this would bind click event to Corresponding Html element once and unbind it automatically after first event rendering.
Or alternatively u could the following:
$("#foo").bind('click',function(){
// Some activity
$("#foo").unbind("click");
// bind it to some other event handler.
});
I'm using jquery and what I'm doing is binding the toggle method to a number of buttons on a webpage. It looks something like this
$('.button').toggle(function(){
// first function
}, function(){
// second function
});
However, there are animation in both of those functions. So a user can click the button while the first or second function is executing. And this messes up the order of the HTML elements and may make them move to the end of the page. Because essentially what these functions do is move one element to the end on the first click, and on the other click move it back where it originally was.
Of course, it is difficult to click the button once it is moving around the page. But it's possible.
You could use a flag. Set a flag 'isAnimating' to true when an animation begins, and false when it ends. Any subsequent animation can only proceed if this value is false.
You could also possibly check to see if the :animated selector applies to the owner of the event. And base your decisions off of that.
You could use a bool as a semiphore.. Obviously, this is in no way secure, but javascript doesn't really support locking, so you could easily have deadlocks and / or race conditions with this approach, but it will work 99,9% of the times :)
Seems like you'll be happier implementing your own toggle. Toggle really only works for cases with 0 additional logic.
$('.button').click(
function () {
if( $(self).is(":animated") {
return false;
}
if($(self).is(".rolledup")) {
self.apply(roll_window_down);
} else {
self.apply(roll_window_up);
}
});
function roll_window_up() {
$(self).addClass( 'rolledup' );
// first function
}
function roll_window_down() {
$(self).removeClass( 'rolledup' );
// first function
}
You need to place the two functions you pass to toggle in a context in which you can hold a flag to control function entrance:-
(function() {
var toggling = false;
$('.button').toggle(function(){
if (!toggling) {
toggling = true;
// first function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
}, function(){
if (!toggling) {
toggling = true;
// second function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
})
)();
N.B. This serialises all toggles of elements that have the .button class. IOW there is only one toggling flag for all buttons. If you want each button to have its own toggling flag:-
$('.button').each(function() {
var toggling = false;
$(this).toggle(function(){
if (!toggling) {
toggling = true;
// first function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
}, function(){
if (!toggling) {
toggling = true;
// second function
toggling = false;
} else {
// whatever you want to happen if re-entrance attempted
}
});
);
You need a queue. You can build one with a semaphore variable, but jQuery already provides one, so maybe you want to use it:
$('.button').toggle(function() {
$(document).queue("foo", function() {
...
});
}, function() {
$(document).queue("foo", function() {
...
});
});
jQuery normally uses the "fx" queue to serialize animations, but you can use this "foo" queue for whatever you want.
The queue can be put on any object, so maybe you want to put it on the container that has all the .button objects in it. You cannot put it on the button (this) themselves, or you'll be back to where you're at now.
Once you've done that, all you really need to do is abort an animation. This can be done by expressly emptying the "fx" queue, or you can use $('.button').stop(); to stop all the old animations.