I am experiencing some strange behavior in my UpdatePanel which contains a ListView with a DataPager control. The items in the list view each have a custom ModalPopupExtender that is dynamically generated as well as a custom extender control that does some manipulation on an image.
The first page of results loads correctly, and I can move to the next page fine as well. However, when I move back to the first page, Firebug shows me the 'two components with the same id can't be added to the application' exception thrown on each of the items on the first page of the list, on the behavior associated with my custom extender. This to me seems that the partial update does not destroy or dispose the extender's behaviors when I move to the next page, so when I try to render the first page again, those extenders are still sitting in memory.
Now the kicker is, if I go to the next page and back to the first page a second time, my behaviors load correctly. Repeat and they don't show up and new errors are fired. I know this has to do with the lifecycle but I can't seem to pin it down.
Now my custom extender is fairly straightforward and only calls the base dispose() method for its own dispose() function. What am I missing?
I have narrowed down the issue to the fact that the Extender control uses a callback to attach an event to an image that has loaded dynamically from a web service call:
_onMethodComplete : function(result, userContext, methodName)
{
// Wire up image effect
var i = this.get_element();
i.onload = function(i)
{
asyncEffect(i); // This function lives in an external effects.js file
}
// Do after onload event to pick up change
this._setImage(result);
}
Doing this prevents the extender from disposing, possibly because it's still got a handle to an external JS file. I blanked out the image's onload event after the effect completes and the extender works for images that weren't previously on the page, but is still not disposing the extender correctly. Commenting out the wire up code above corrects the issue (obviously without the effects the JS file would bring).
How can I cleanly dispose an extender that references an external JS script?
No comments:
Post a Comment