On one of my pages, I want to ask users first whether they want to navigate away. When user answers no, no transition should occur.
I tried this code:
$('#pTakeCardSet').live('pagebeforehide',function(event, ui){
event.stopPropagation();
});
But it doesn't work. The new page is still loaded.
Does anyone have the same problem?
You may be getting bit by a live event - from : http://api.jquery.com/event.stopPropagation/
Since the .live() method handles
events once they have propagated to
the top of the document, it is not
possible to stop propagation of live
events. Similarly, events handled by
.delegate() will always propagate to
the element to which they are
delegated; event handlers on any
elements below it will already have
been executed by the time the
delegated event handler is called.
Related
Is there an event that gets fired after the DOM is updated as the result of an observed property being changed?
Specifically, I need to alter the scrollTop property of a container to show new content as it's added. I have to use a timeout now to wait until the DOM is updated before setting the scrollTop to the new scrollHeight.
Thanks for the question. From my understanding, the changes propagate through the models and DOM asynchronously. It's not clear there is one "ok, literally everything all the way through is done updating" event (I could be wrong).
However, I've used Mutation Observers to know when something in my DOM changes. If you're able to watch a specific place in the DOM for a change (or changes), try Mutation Observers: https://github.com/sethladd/dart-polymer-dart-examples/tree/master/web/mutation_observers
Here is an example:
MutationObserver observer = new MutationObserver(_onMutation);
observer.observe(getShadowRoot('my-element').query('#timestamps'), childList: true, subtree: true);
// Bindings, like repeat, happen asynchronously. To be notified
// when the shadow root's tree is modified, use a MutationObserver.
_onMutation(List<MutationRecord> mutations, MutationObserver observer) {
print('${mutations.length} mutations occurred, the first to ${mutations[0].target}');
}
I'm programmatically pushing an object (using pushObject) into a list that is sortable. My problem becomes that if I try $(selector).sortable('refresh') or $(selector).sortable('serialize') the serialize doesn't contain the recently added dom item. I can console.log($(selector)) and it seems to know that the dom item has been added though.
My original thought is there an event to watch for once pushObject has finished? Or a callback?
Is there an event to watch for on pushObject?
Easiest way to do this is add an observer that fires when the list length has changed. But probably that's not gonna be enough in this case.
It sounds like this is a timing issue. If you try to call refresh right after pushObject (or even in an observer) the refresh code is going to run before the dom has been updated.
The trick is to make sure you are calling $(selector).sortable('refresh') after the new elements have been written to the dom. That could be from a didInsertElement hook on the dom item's view or from an observer, but as #Luke reminded me in comments best way to do it is by scheduling refresh to run after render has completed. Something like:
Em.run.schedule('afterRender', this, this.refreshSortable)
Is there somehow a way to access these two events? Do the even exsist?
I have to set transfer data on dragStart and dragEnd to an event object.
Check:
Drag start: http://api.jqueryui.com/draggable/#event-start
Drag stop: http://api.jqueryui.com/draggable/#event-stop
You are able to access current event in both function calls.
I'm having a great time playing around with knockout js and have just started to get to grips with adding custom bindingHandlers.
I'm struggling a bit with the update function of a 3rd party jqWidget gauge - I can only get it to animate the first time I update the variable. On each update after that it just sets the value directly.
I don't fully understand ko.utils.registerEventHandler() and what it does although I've seen it in a bunch of other examples. Is this what is causing the animation to break? How do I know which events to register from the 3rd party widget?
For some reason this works fine if I add a jquery ui slider that is also bound to the observable.
You can test this here: set the value a few times to see that it animates the first time and not after that.
http://jsfiddle.net/LkqTU/4531/
When you update the input field, your observable will end up being a string. It looks like the gauge does not like to be updated with a string value, at least after the first time.
So, if you ensure that you are updating it with a number (parseInt, parseFloat, or just + depending on the situation), then it appears to update fine.
Something like:
update: function(element, valueAccessor) {
var gaugeval = parseInt(ko.utils.unwrapObservable(valueAccessor()), 10);
$(element).jqxGauge('value', gaugeval || 0);
}
http://jsfiddle.net/rniemeyer/LkqTU/4532/
You would generally only register event handlers in a scenario like this to react to changes made by a user where you would want to update your view model data. For example, if there was a way for a user to click on the gauge to change the value, then you would want to handle that event and update your view model value accordingly.
I'm answering the
I don't fully understand ko.utils.registerEventHandler() and what it does
part of your question.
registerEventHandler will register your event handler function in a cross-browser compatible way. If you are using jQuery, Knockout will use jQuery's bind function to register the event handler. Otherwise, will use the browser Web API with a consistent behavior across browsers.
You can check it out on the source code.
My specific usage case is that I'm using a .net postback to display an update panel of elements that have tooltips associated with them. I have already initialized the ZURB Foundation (provides tooltips) script on the page, and the first-page tooltips work great. After the postback, I want to *re*initialize the script so that these new tooltip items are bound to the 'hover' event.
Generic usage case is any situation where new tooltip-enabled elements are added in any way.
It appears to me that the 'hover' binding is done on page init to the existing collection of '.has-tip' elements, but there is handling of future .has-tip elements coming into existance.
I'd like to do the following:
a) Reinitialize the tooltip plugin and search for new .has-tip elements to attach the 'hover' event to.
have tried a number of different ways to try and reinitialize, but
$.fn.tooltips('init');
seems to be the most hopeful, in that it successfully calls the init method in the script, but does not bind the hover event to the new .has-tip elements.
Edit/Clarification:
it seems like there was a bug with dynamic content:
https://github.com/zurb/foundation/pull/465
When the bug is fixed
(you can fix it yourself, read the pull req. for more info), the bug is fixed, so you can
trigger a page-wide tool-tip refresh with:
$(document).tooltips('reload');
Original answer
If you didn't figure it out yet, jquery.tooltips.js has a method/function called .reload that actually seems to be the most promising (code is from the foundation plugin):
reload : function() {
var $self = $(this);
return ($self.data('tooltips')) ? $self.tooltips('destroy').tooltips('init') : $self.tooltips('init');
},
It's really just a chain of their other methods, but it's probably best to .destroy before .init to avoid double tooltips or some other collision.
I have tried a lot of suggestions, but what truly works is:
After you finish editing the DOM, you have to call to
$(document).foundation();
This sentence is going to refresh everything, including your tooltips. WORKS LIKE A CHARM.
I had the same problem when genereted modal windows with Ajax,
Here is my fix for that:
$(document)
.on('opened.fndtn.reveal', '[data-reveal]', function () {
$('html').css({'overflow': 'hidden'});
$('.has-tip').each(function(i){
var tip = $(this);
Foundation.libs.tooltip.create(tip);
});
})
It works for ZF v5.2+