Question

My company has a web application built in ASP.NET and they have asked me to code up a widget for a dashboard page they already have. These widgets are custom user controls that are loaded dynamically at runtime. My problem is that I have some custom javascript that needs to run every time the widget is loaded.

$(function ()
{
    // Setup widget.
});

This works great when the dashboard page first loads. My DOM ready function runs and all is well. However, whenever a user moves around widgets on their dashboard all the widgets are in an update panel and they all reload using AJAX. DOM ready functions do not run when they are inserted into the page via AJAX.

Any suggestions for how to ensure this code runs every time the widget is loaded?

Answer 1

The way I get around this is to name the given event bidings when you define them initially on load. Then, in the callback function to the ajax unset these events, and set them all up again for the newly created dom elements.