Using JQuery Shadowbox inside Asp.Net UpdatePanel

Shadowbox is an amazing extension for JQuery that allows you to easily play around with image galleries, modal dialogs,internal pages and much more while providing a rich user interface that captures the eye. It is also easy to implement in your web pages. However, .net developers often lose the functionality of shadowbox if they are using it from inside an update panel which is part of the microsoft ajax framework.

Shadowbox does not work inside the update panel becuase the content within the panel is dynamically updated after a partial postback. This causes the bindings of shadowbox on the inner html content to break and therefore, the nice shadowbox will not open again.

However, there is a nice little workaround to fix this issue. The solution is easy to implement and configure on you current project. All we need to do is reinitialize shadowbox after a partial postback is complete. This will cause html elements to rebind to shadowbox to get up and running again. The script below shows how to do this on the page you are using shadowbox or in the master page if you are using one.

<script type="text/javascript">
    function EndRequest(sender, args) {Shadowbox.setup();}