asp.net mvc JavaScript in View User Controls rendered through regular browser request and AJAX request

Question

I have this code in some of my ASCX files:

<%=Html.ActionLink(Resources.Localize.Routes_WidgetsEdit, "Edit", "Widget", 
new { contentType = Model.ContentType, widgetSlug = Model.Slug, modal=true},
new
{
  rel = "shadowbox;height=600;width=700",
  title = Resources.Localize.Routes_WidgetsEdit,
  @class = "editWidget"
})%>

Take note of that rel="shadowbox..." there. This is to wire up ShadowBox Lightbox clone for this ActionLink.

This works fine when user requests a page containing this User Control thru normal browser request. But I also render/build those View User controls trough AJAX requests. For instance, I would make request to /Widget/RenderToString/... using jQuery .ajax() method and it would return HTML code for that control. This works fine and it renders the code fine. I would then insert (append) the result to a DIV in a page from where the AJAX request was made. This also works fine and the returned HTML gets appended. The only problem is - ShadowBox is not wired up. Even though the code for it gets rendered.

It seems it requires page reload (F5) every time to wire ShadowBox up. Since I am doing AJAX GET and instant append to get rid of having to make a server roundtrip, I would also want ShadowBox to wire up without doing refresh.

Can someone help me with that? Thank you

UPDATE:

Yes, I have this in my Site.Master head:

<script src="<%=Url.Content("~/Scripts/shadowbox-build-3.0rc1/shadowbox.js") %>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // insert functions calls here that provide some default behaviour
        externalLinks();
    });

    Shadowbox.init({
        language: "en",
        players: ["img", "html", "iframe"],
        onClose: function() { location.reload(true) }
    });
</script>

How do I init the Shadowbox again after AJAX call?

Answer 1

There are many shadowbox plugins... which one are you using? (I can't give you exact code without it.) In any case I imagine you have something in your $(document).ready(function () { ... }); that tells shadowbox plungin to bind itself. You need to call that again after the AJAX call.

Answer 2

Just found the solution here

// call this after adding the new HTML to the page
// set up all anchor elements with a "editWidget" class to work with Shadowbox
Shadowbox.setup("a.editWidget", {});