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">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
    function EndRequest(sender, args) {Shadowbox.setup();}
</script>

One Response to Using JQuery Shadowbox inside Asp.Net UpdatePanel

  1. Ali Issa says:

    Thanks for this article Ali, it i really helpful.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: