CODEWITHSUNDEEP
jqueryasp.netiframeloading
coder
coder

Reputation: 13250

Why Iframe not loading for the second time?

I am trying to load a website by using fancybox Iframe 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>

Upvotes: 0

Views: 1430

Answers (1)

Aristos
Aristos

Reputation: 66641

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>

Upvotes: 1

Related Questions