Why is this iframe not loading?

Why Iframe not loading for the second time?

• I am trying to load a website by using http://fancybox.net/ with a click of a button and it works pretty well for the first time and when trying to load for the second time it dosent work. And If I try to remove the button as well as the ahref from the content template and put it outside then Iit shows me a blank Iframe and the rest of the code works fine. Here is my code: <script type="text/javascript"> $(document).ready(function () { $("#various3").fancybox({ 'width': '75%', 'height': '75%', 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe' }); $('#<%=txtWebsiteAddress.ClientID%>').change(function () { $('#various3').attr('href', $(this).val()); }); $("#<%=btnShowThumbnailImage.ClientID %>").click(function () { $("#various3").trigger('click'); }); }); </script> This is my markup: Width:<asp:TextBox ID="txtWidth" runat="server">320</asp:TextBox> Height:<asp:TextBox ID="txtHeight" runat="server">240</asp:TextBox> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <li><a id="various3" href=""></a></li> <asp:Button ID="btnShowThumbnailImage" runat="server" Text="Button" OnClick="btnShowThumbnailImage_Click" /> <asp:Image ID="imgWebsiteThumbnailImage" runat="server" Visible="false" /> <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0"> <ProgressTemplate> <img src="images/Loader.gif" alt="loading" /> </ProgressTemplate> </asp:UpdateProgress> </ContentTemplate> </asp:UpdatePanel>

• Answer:

  after the update of your UpdatePanel, you need to re-initialize your javascript, because after the UpdatePanel has run, the Dom change. This can be done by two functions that included on UpdatePanel. Using this 2 calls you reinitialize your FuncyBox ones on page load, and then again on every UpdatePanel. <script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); function InitializeRequest(sender, args) { } function EndRequest(sender, args) { InitMyFancyBox(); } $(document).ready(function () { InitMyFancyBox(); }); function InitMyFancyBox() { $("#various3").fancybox({ 'width': '75%', 'height': '75%', 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'type': 'iframe' }); $('#<%=txtWebsiteAddress.ClientID%>').change(function () { $('#various3').attr('href', $(this).val()); }); $("#<%=btnShowThumbnailImage.ClientID %>").click(function () { $("#various3").trigger('click'); }); } </script>