How to cleanup when WiQuery plugin/behavior is removed through Ajax?

[Stijn]

Hi. We are using WiQuery in our application to attach some behaviors
to some components. For example a resize behavior to react on the
component being resized. I added some debug logging and I see that
when we switch panels (through Ajax) all event listeners for the
components on the new panel are added, but the old ones from the panel
being replaced are never removed. So the list of event handlers just
grows and grows...

We register event listeners in the statement method of the WiQuery
behavior, like this:

public abstract class BaResizeEventBehavior extends
WiQueryAbstractBehavior {
// ...
@Override public JsStatement statement() {
return new JsQuery(getComponent()).$().chain("resize", new
JsScope() {
@Override public void execute(JsScopeContext aScopeContext) {
// event listener implementation here
}
});
}
}

This will generate Javascript code that looks like this:

$('#componentId').resize(function() {
// event listener implementation here
});

This code will register a jQuery event on the component with id
'componentId'. However when this component disappears from the page, I
would like this event handler to be unbound again, but that does not
happen.

Any ideas?

Thanks,

-Stijn

[Stijn]

I cross-posted this to the Wicket user list because traffic here is
very light, but will keep this in synch a bit for later reference. -
Stijn
---

Martin Grigorov said:

AFAIK jQuery unbinds all registered event listeners for a DOM element
when this element is removed with jQuery method like #remove(),
#replaceWith(), etc.
But I'm not sure this is the case when you remove a parent element of
an element with event listeners. Better ask in jQuery forums.

[Stijn]

Stijn said:


Hi Martin, thanks for your quick response!

>> AFAIK jQuery unbinds all registered event listeners for a DOM element when this element is removed with jQuery method like #remove(), #replaceWith(), etc.

I think so too... However I am not sure that that is indeed the way
that Wicket removes components that are replaced by an Ajax request? I
think Wicket relies on their own code that they based on Prototype
JS ?

>> Better ask in jQuery forums.

I am not sure if that is the right place. Seems to me that Wicket is
doing the inserting / removing of the components for the page. The
statement() method lets me hook into the insertion phase to add my own
listeners (be it with jQuery or any other framework) so it seems to me
there should also be a corresponding method for the removing phase
where you can unhook/unbind events etc...

-Stijn

[Stijn]

Martin Grogorov said:

>> I think so too... However I am not sure that that is indeed the way that Wicket removes components that are replaced by an Ajax request? I think Wicket relies on their own code that they based on Prototype JS ?

No. Including version 1.5 Wicket uses its own JavaScript code to do
this (see wicket-ajax.js #replaceOuterHtml()).
In Wicket 6.0 jQuery is used behind the scenes and this method is
implemented with: jQuery(oldElement).after(newElementHtml".remove().

If upgrading to Wicket 6.0-SNAPSHOT is not an option for you then
you can use monkey patching approach to override the old impl in 1.5

[Stijn]

Stijn said:

We are still at Wicket 1.4 even...

However, presumably there is a method one can implement to respond to
the removal of components as well as the adding?

Upgrading to a snapshot is probably not allowed by my company policy
and I'd rather not modify Wicket itself... But surely others must have
found a way to remove events bound to components? Seems like
fundamental stuff.

-Stijn

[Stijn]

Martin Grigorov said:

With 1.5 Wicket sends notifications before removing and after adding
an element.
See test "Wicket.DOM.replace - test event notifications" at
http://git-wip-us.apache.org/repos/asf/wicket/repo?p=wicket.git;a=blob_plain;f=wicket-core/src/test/js/dom.js;hb=master
for an example.
But you need to upgrade to 1.5 ...

[Stijn]

Stijn said:

Ok thanks for this info. I will see if we can upgrade.

-Stijn