CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netiframe
Mike Young
Mike Young

Reputation: 11

Change iframe src without refreshing parent page

I have a page within an ASP.NET site. The iframe is inside an Ajax Update Panel.

I have a need to change the src attribute of the iframe from javascript which I can do. The problem is that when the src attribute changes, the parent page refreshes.

I need to only have the frame navigate, not the parent page.

HTML:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <iframe id="previewIframe" runat="server" Width="800px"></iframe> 
            </ContentTemplate>               
        </asp:UpdatePanel>

javascript:

var frame = $("#previewIframe");
frame.setAttribute('src', "http://www.google.com");

Upvotes: 0

Views: 849

Answers (1)

Mike Young
Mike Young

Reputation: 11

html:

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <iframe ClientIDMode="Static" id="previewIframe" src="" runat="server"></iframe> 
            </ContentTemplate>               
        </asp:UpdatePanel>

javascript:

$("#previewIframe").attr('src', "http://www.google.com");

forgot that in ASP the element ID's are not sacred, they are prepended eg. "MainContent_previewIframe"

once I added the ClientIDMode="Static" attribute jquery could properly reference the element.

Also updating the jquery method to $("#previewIframe").attr('src','google.com'); - I was mixing straight javascript and jquery. I should know by now to stick to one.

Upvotes: 1

Related Questions