Dynamically changing the src of iframe

Ok i am design a website in VS 2008. I have a page Default.aspx which contains 3 iframes. frame1, frame2, frame3. At the load of Default.aspx frame1 loads top.aspx.

Top.aspx has a drop down list and a button on it. What i want to do is change the src of frame2 depending on what they select from the dropdownlist in top.aspx.

Now i have placed the following code in top.aspx
Protected WithEvents frame2 As System.Web.UI.HtmlControls.HtmlGenericControl

Protected Sub btnGo_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGo.Click

        Dim frame2 As HtmlControl = CType(Page.FindControl("frame2"), HtmlControl)
        frame2.Attributes("src") = "Page2.aspx"
Now Page2.aspx will eventually be changed to the option they choose from the dropdownlist but the problem is that when i run this frame2 has a NullReferenceException.

Have i placed the code in the wrong place? Is it supposed to be in Default.aspx if so how can i change the src of frame2 to whatever is chosen from the dropdownlist in top.aspx which is displayed in frame1

Any help is much appreciated
LVL 6
M3mph15Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lambdabunkerCommented:
attach the click event on the client side Javascript instead of the server side and then do a document.getElementByID("frame2").src = "Page2.aspx";

i hope this helps.
0
lambdabunkerCommented:
a bit more explaination about this- what you need to do is on the Page Load add the following line.

btnGo.Attributes.Add("onclick","LoadFrame()")

and then on the Client Side write the Javascript Function below

function LoadFrame()
{
    document.getElementByID("frame2").src = "Page2.aspx";
}
0
M3mph15Author Commented:
Sorry where do i write the Javascript function. in the aspx file or the code behind?
0
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

lambdabunkerCommented:
you need to write the Javascript function within the aspx page as below:
....
....
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function LoadFrame()
    {
        document.getElementByID("frame2").src = "Page2.aspx";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    .......
    .......
    .......
0
bmanciniCommented:
You'll have to put the Javascript function inside the top.aspx page and attach it to the OnClientClick event of the button.

Your JavaScript function will need to access the parent of Iframe #1 to reference Iframe #2 and change its source.  The easiest way is to do something like this:

<script type="text/javascript">
   function ChangeFrame()
   {  
         // build the link from the dropdownlist value
         window.parent.frames[1].window.location = // iframe2's new url
   }
</script>

This javascript function access's top's parent (which is default.aspx) then grabs the second iframe (index 1) and changes its location.

0
bmanciniCommented:
Note:

You can retrieve the value of the dropdownlist with the following line of JS code:

var ddvalue = document.getElementById('<%=NAMEOFDROPDOWN.ClientID%>').value;

where NAMEOFDROPDOWN is the name of your dropdownlist.
0
lambdabunkerCommented:
to access a parent element from iframe you can also use the following function.

this is compatible with both IE and FF.
//get the parent element of the iframe, compatible FF,IE and Others.
function GetParentElement(elemName) {
    var myDocument = (typeof(document.parentWindow) != 'undefined') ? document.parentWindow.parent.document : document.defaultView.parent.document;
    return myDocument.getElementById(elemName);
}

Open in new window

0
M3mph15Author Commented:
OK. my top.aspx page looks like this:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="top.aspx.vb" Inherits="top" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript" >
        function LoadFrame()
        {
            var ddlvalue = document.getElementById('<%=ddlSearchType.ClientID%>').value;
           
            document.getElementByID("frame2").src = ddlvalue;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList ID="ddlSearchType" runat="server" style="margin-top: 0px">
        <asp:ListItem Value="propertyId.aspx">Property ID</asp:ListItem>
        <asp:ListItem Value="abpPropertyId">APB ID</asp:ListItem>
        <asp:ListItem Value="parceldesc.aspx">Parcel Description</asp:ListItem>
        <asp:ListItem Value="partyDesc.aspx">Party Name</asp:ListItem>
        <asp:ListItem Value="ownerDesc.aspx">Parcel Owner</asp:ListItem>
        <asp:ListItem Value="brandsProp.aspx">Brands Property ID</asp:ListItem>
        <asp:ListItem Value="brandsParty.aspx">Brands Party ID</asp:ListItem>
        <asp:ListItem Value="brandsReg.aspx">Brands Registrations</asp:ListItem>
    </asp:DropDownList>
        <asp:Button ID="btnGo" runat="server" Text="Go" />
    </div>
    </form>
</body>
</html>

and the code behind contains this:

Partial Class top
    Inherits System.Web.UI.Page
    Protected WithEvents frame2 As System.Web.UI.HtmlControls.HtmlGenericControl

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        btnGo.Attributes.Add("onclick", "LoadFrame(value)")
    End Sub
Protected Sub btnGo_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnGo.Click
   'Dim frame2 As HtmlControl = CType(Page.FindControl("frame2"), HtmlControl)
End Sub

When i run this, select something in the dropdownlist it doesn't do anything. It doesn't crash but it doesn't change the frame either what am i doign wrong?
0
bmanciniCommented:
You need to attach the LoadFrame() Javascript function to the button in the buttons OnClientClick attribute.  
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="top.aspx.vb" Inherits="top" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript" >
        function LoadFrame()
        {
            var ddlvalue = document.getElementById('<%=ddlSearchType.ClientID%>').value;
           
            // CHANGE THE IFRAME: Works in Firefox, IE 6 & 7, Opera, and Safari
            // ACCESS THE IFRAME DIRECTLY 
            window.parent.frames[1].window.location = ddlvalue;
            // OR ACCESS THE IFRAME ELEMENT IN THE PARENT
            // window.parent.document.getElementById("ID_OF_FRAME2").src = ddlvalue;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:DropDownList ID="ddlSearchType" runat="server" style="margin-top: 0px">
        <asp:ListItem Value="propertyId.aspx">Property ID</asp:ListItem>
        <asp:ListItem Value="abpPropertyId">APB ID</asp:ListItem>
        <asp:ListItem Value="parceldesc.aspx">Parcel Description</asp:ListItem>
        <asp:ListItem Value="partyDesc.aspx">Party Name</asp:ListItem>
        <asp:ListItem Value="ownerDesc.aspx">Parcel Owner</asp:ListItem>
        <asp:ListItem Value="brandsProp.aspx">Brands Property ID</asp:ListItem>
        <asp:ListItem Value="brandsParty.aspx">Brands Party ID</asp:ListItem>
        <asp:ListItem Value="brandsReg.aspx">Brands Registrations</asp:ListItem>
    </asp:DropDownList>
 
        <asp:Button ID="btnGo" runat="server" Text="Go" OnClientClick="LoadFrame(); return false;" />
 
    </div>
    </form>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
M3mph15Author Commented:
Thankyou to bmancini and to lambdabunker for all your help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.