I searched the Prototype docs but found nothing. Did I miss something, or is there no such thing as onshow? I want to call a function when an element (a div in my case) is made visible. Is there such functionality in the Prototype framework? If not, I need a push in the right direction so I can solve it another way.
Thanks!
If you are asking if there is an event that is fired when the .show() method is called on elements there is not.
But you can test if an element is visible by using the $('myelementid').visible() method.
Also a different way I have done it in the past is using the Script.aculo.us .appear() method which has a afterFinish callback - for example
$('myelementid').appear({'afterFinish':function(effect){
//the afterFinish callback passes the effect as the first parameter
//call other function with element
otherfunction(effect.element);
});
technically you would only need to load the effects.js file of Script.aculo.us instead of all of the library to get the core effects methods.
Related
I want to get the list of all events for any particular component dynamically. For example : If I take a Textfield , how can I get all possible events that are mentioned in ExtJs API Doc. so that user can choose and assign the event for any component.
component.events
Contains the list you need. You could have found out by yourself reading the source of addEvents method, which is linked from any event you wanted to find in a list.
For those still wanting an answer to this, https://coderwall.com/p/jnqupq/easily-capture-all-events-on-a-component-in-extjs has provided a nice means of doing so.
When debugging an ExtJS application, you'll often find it useful to listen to all events fired by a specific component. There is actually a handy built-in static method to do this called Ext.util.Observable.capture().
Here's a handy snippet that simply logs the event name and all arguments:
Ext.util.Observable.capture(myObj, function(evname) {console.log(evname, arguments);})
Even better, if you're currently inspecting your component's main element in your browser's developer tools, you can do this:
Ext.util.Observable.capture(Ext.getCmp($0.id), function(evname) {console.log(evname, arguments);})
Where $0 is the currently selected element. Should work fine in Chrome, Firefox, Opera, Safari.
If you don't want those logs to pollute your console anymore, simply call releaseCapture on your object:
Ext.util.Observable.releaseCapture(myObj);
This removes all captures on a given object so you don't have to reference your listener explicitly (which was likely an anonymous function :)).
Bonus tip: also be sure to check out the observe method which does something similar but allows you to listen to all events fired by all instances of a given class.
So we all know in an ajax update events must be rebound to new dom elements. Yes delegate is an option, but delegate doesn't work for all scenarios. For instance delegate won't help for something that needs to be done simply on load rather than on a click event.
Rather than split my code into delegate handlers and handlers that need to be rebound on updates, I would rather define a single method with a context parameter that gets called every time the page changes like so:
function onPageUpdate(context) {
$('a', context).click(...); // event handlers
$('.chart', context).addClass(...); // load handlers
}
On dom ready this will be called with the context parameter null. On an ajax update the context will container the new dom elements. This way I'll never have to worry about delegating or ajax updates again.
I'm having trouble getting this to work however. Given the ajax callback:
function onSuccess(data) {
// data contains new dom elements like: <div><a>Click</a><span>chart<span></div>
// replace old elements with new ones
$('a').replaceWith('a', data);
$('span').replaceWith('span', data);
// call pageUpdate with the new context
onPageUpdate(data);
}
Is it possible to make this work like I expect? The replacing works fine, but onPageUpdate isn't binding anything to these new elements, I don't know if thats because the context is just a string object or what. Can anyone think of a way to make this work?
In my mind this is a better solution than delegate, because theres only one method for all handlers and only the elements that need a binding will own it.
From jQuery() - jQuery API
jQuery( selector [, context] )
selector A string containing a selector expression
context A DOM Element, Document, or jQuery to use as context
If the context isn't the correct type - such as passing a string - it's simply going to be ignored. Try wrapping your HTML string in a jQuery object, then use that as the context for your selectors, like so:
var $context = $(data);
$('a').replaceWith('a', $context);
$('span').replaceWith('span', $context);
// call pageUpdate with the new context
onPageUpdate($context);
I won't answer to your question, Anthony Grist's answer is quite right, but there are some things you said that I don't understand. Could you explain them to me ?
For instance delegate won't help for something that needs to be done simply on load rather than on a click event
Sorry but I don't get it, do you have an example ?
In my mind this is a better solution than delegate, because theres
only one method for all handlers and only the elements that need a
binding will own it.
I don't get it too:
only one method: which method are you talking about ?
only the elements ... will own it: it's also the case with delegate, and more, if you have let's say 10 anchor element, only ONE handler would be bound, instead of 10 in your solution
On your method onPageUpdate you're mixing two things: event handling ($("a").click(...)) and DOM modification ($(".char").addClass(...)). Maybe that's why you're confusing about delegate's ability to resolve your problem.
I have a small issue I was hoping somebody could help me with. I have to call the NavigationService.RemoveBackEntry() on two of my views due to the way I have my first run wizard set up.
This method needs to be called on the view (in the codebehind) as far as I am aware and cannot be called in my view models.
I was wondering what would be the easiest, cleanest way to call a RemoveLastNavEntry() from the ViewModel if the method lives on the view.
Rob has said it is a feature he will build into the navigation service at some point but until then I need to implement this as a minor hack.
While this truely is a task for the view, you can, if you really want to, call it from the ViewModel, as a static call.
(App.Current.RootVisual as PhoneApplicationFrame).RemoveBackEntry()
See PhoneApplicationFrame.RemoveBackEntry Method for documentation.
I don't really understand what delegate and promise are.
According to the docs -
delegate would bind a selector and event to some sort of wrapping container that can be used again at a later time for current and future items.
promise() would remap things back to when it was first bounded if everything newly loaded matches. Maybe I don't really understand this promise method.
What if the wrapper is still there, but the contents in the wrapper container have changed, and/or reloaded via Ajax? Why is it that the events are not triggering or working as it would the first time it is bound?
And yes, I have been to the docs page, I just don't understand their explanations completely.
I'm a bit confused by this question. I think this is because you are confused by promise and delegate. They are in fact completely unrelated features of jQuery. I'll explain each separately:
delegate
delegate is a feature of jQuery that was introduced in jQuery 1.4.2. (It is a nicer approach to the live feature that was added in jQuery 1.3). It solves a particular problem that comes with modifying the DOM, and particularly with AJAX calls.
When you bind an event handler, you bind it to a selection. So you might do $('.special').click(fn) to bind an event handler to all the members of the special class. You bind to those elements, so if you then remove the class from one of those elements, the event will still be triggered. Inversely, if you add the class to an element (or add a new element into the DOM), it won't have the event bound.
There is a feature of Javascript that mitigates this called "event bubbling". When an event is triggered, first the browser notifies the element where the event originated. Then it goes up the DOM tree, and notifies each ancestor element. This means that you can bind an event handler on an element high up the DOM tree, and events triggered on any child elements (even those that don't exist when the handler was bound).
delegate is jQuery's implementation of this. First, you select a parent element. Then you specify a selector – the handler will only be run if the originating element matches this selector. Then you specify an event type, such as click, submit, keydown, just as with bind. Then finally you specify the event handler.
$('#containingElement').delegate('a.special', 'click', function() {
alert('This will happen on all links with the special class');
});
promise
promise is another relatively recent addition to the jQuery featureset. It is part of the Deferred concept that was introduced in jQuery 1.5. (I think the similarity in sound between "deferred" and "delegate" is probably the source of confusion.) This is a way of abstracting away the complications of asynchronous code. The best example of this is with AJAX calls, as the object returned by $.ajax is a Deferred object. For instance:
$.ajax({
url: 'somepage.cgi',
data: {foo: 'bar'}
}).done(function() {
// this will be run when the AJAX request succeeds
}).fail(function() {
// this will be run when the AJAX request fails
}).always(function() {
// this will be run when the AJAX request is complete, whether it fails or succeeds
}).done(function() {
// this will also be run when the AJAX request succeeds
});
So it is in many ways the same as binding success handlers in the $.ajax call, except that you can bind more than one handler, and you can bind them after the initial call.
Another time when it would be useful to deal asynchronously is with animations. You can provide callbacks to functions, but it would be nicer to do this with similar syntax to the AJAX example I've provided above.
In jQuery 1.6, this functionality was made possible, and promise is part of this implementation. You call promise on a jQuery selection, and you'll get an object that you can bind event handlers to, when all the animations in the object have completed.
For instance:
$('div.special').fadeIn(5000).promise().then(function() {
// run when the animation succeeds
}).then(function() {
// also run when the animation succeeds
});
Again, this is similar in effect to traditional methods, but it adds flexibility. You can bind the handlers later, and you can bind more than one.
Summary
Basically, there is no significant relationship between delegate and promise, but they're both useful features in modern jQuery.
X post from http://drupal.org/node/953016
The Drupal 7 AJAX system is great, it works very smoothly for forms and even for links.
What I can't work out how to do in a sane way is to call it from javascript. I may want to have a dynamic page without a form and as part of that make a Drupal ajax call, specifically so that the ajax commands get run on return.
The most effective way I have found to do this so far is:
dummy_link = $('Loading Vars');
$(vars_div).append(dummy_link);
Drupal.attachBehaviors(vars_div);
dummy_link.click();
Which is effective but a huge hack. I havn't found a way to perform an ajax call and have the Drupal ajax framework do it, rather than the standard jquery framework.
I would have thought that it was possible to invoke the drupal ajax api directly, does anyone know how?
The short short answer is you'll want to get yourself to something like:
$.ajax(ajax.options);
Which is the jQuery part, but with a set of options that help you hook into the Drupal Goodness in terms of success handling, effects, etc. This is what is effectively what's hapening for you in your "huge hack" example.
Creating a new Drupal.ajax function programatically still requires a synthetic element:
base = 'someid'
element = $('Loading Vars');
element_settings = {'url': uri, 'event': 'click'}
myAjax = new Drupal.ajax(base, element, element_settings)
But you can at least trigger it without simulating a click in the UI:
myAjax.eventResponse(element, 'click')
It feels like there should be a better way to do this, but it requires another way to set up the initial ajax prototype that doesn't require a DOM element. Because so much of the interaction-set hinges on how to move data back into the DOM, I don't think this use-case is well-supported yet.
It may also be possible to go direct to jQuery with a proper set of options and get the effect you want, but the Drupal.ajax protoype functions self-refer quite a lot so doing it without a Drupal.ajax class seems dicey.