asked on

ASP.NET IFrame src attribute in AJAX Modal Extender Popup

How can I set the the IFrame src attribute programatically? I would like to either set the src attribute in javascript or in the page's codebehind.

I have tried several methods and none seem to work. I am guessing that the problem is related to my using a masterpage and the mix of javascript in the masterpage plus referring to objects on the page based on the masterpage may be related. I will paste the code below.

SiteMaster.Master:
<%@ Master Language="VB" CodeFile="SiteMaster.master.vb" Inherits="SiteMaster" %>
 
<!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>
    
<link href="css/SiteStyleSheet.css" rel="stylesheet" type="text/css" />
 
<link href="css/ModalPopupStyles.css" rel="stylesheet" type="text/css" />
   
<script language="javascript" type="text/javascript">
 
function HideModalPopup() 
{ 
  var modal = $find('mpeBehavior'); 
  if(modal)
  {
    modal.hide(); 
  }
  else
  {
    alert('Cannot find modal');
  }
}
 
function ShowMyModalPopup(CtrlID) 
{ 
 var modal = $find(CtrlID); 
 
  if(modal)
  {
    var mpeObj =$find('frame1');
 
    //----------------------------------------------------------------------------------
    //None of these methods finds frame1
    // var frameObject = window.frames("iframe1").
    // window.frames["iframe1"].src= "http:www.yahoo.com"; 
    // document.getElementById('frame1').src='http:www.yahoo.com';
    // frame1.Attributes("src") = "http:www.yahoo.com";
    // frame1.attributes("SRC")='http://www.yahoo.com/';
    // document.frames ('frame1').attribute('SRC')="http:www.yahoo.com"; 
    //document.frames ('frame1Name').attributes('SRC')="http:www.yahoo.com"; 
    // frame1Name.Attributes("src") = "http:www.yahoo.com";
    //frame1Name.attributes("SRC")='http://www.yahoo.com/';
    //----------------------------------------------------------------------------------
 
    if (mpeObj)
    {
      mpeObj.attribute('SRC')="http:www.yahoo.com";
    }
    else
    {
   // alert('Could not find frame1');
    }
    
   //modal.frame1.attribute("SRC")="http:www.yahoo.com";
   modal.show(); 
  }
  else
  {
  alert('Cannot find modal');
  }
}
 
function fnClickUpdate(sender, e) 
{ 
  __doPostBack(sender,e); 
}
 
</script>   
    
</head>
<body>
 
    <form id="form1" runat="server">
    
    
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
        
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        
        
        </asp:contentplaceholder>
        
    </div>
 
    <Button ID="cmdShowPage" value ="A Button" title="Buttonie" type="button" onclick="ShowMyModalPopup('mpeBehavior');">
    Abutton</Button>
    </form>
    
</body>
</html>
 
'''
Default.aspx:
<%@ Page Language="VB" MasterPageFile="~/SiteMaster.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="600px" Width="800px" style="display:none">
            <center>
 
                <IFRAME id="frame1"  src="http://www.yahoo.com/"  scrolling="auto" runat="server" style="height:575px;width:800px;">
                </IFRAME>
                
            </center>
 
            <asp:Button ID="Button1" runat="server" Text="OK" /> 
            <asp:Button ID="Button2" runat="server" Text="Cancel" /> 
</asp:Panel>
 
<asp:Button runat="server" ID="txtDummy" style="display:none" />
<ajaxToolkit:ModalPopupExtender   BehaviorID="mpeBehavior" ID="mpe" runat="server"    
  TargetControlID="txtDummy"
  PopupControlID="Panel1"
  OkControlID="Button1"
  CancelControlID="Button2" 
  DropShadow="true"
  BackgroundCssClass="modalBackground"
  RepositionMode="RepositionOnWindowResize">    
</ajaxToolkit:ModalPopupExtender>
    
 
</asp:Content>

Open in new window

ASKER CERTIFIED SOLUTION

JPJ78

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

CB_Thirumalai

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Howard Bash

ASKER

The line:
document.getElementById('<%=frame1.ClientId%>');
returns an error and will not run. The error is that frame1 is not declared. I believe that this is because frame1 is defined is default.aspx whereas the javascript is in the masterpage that default.aspx is derived from.

If you can, please load and try the pasted code and add your "try" to the ShowMyModalPop routine. You will see the error.

SOLUTION

sybe

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Howard Bash

ASKER

I need to be able to load the src on a button click or a linkbutton click.

SOLUTION

sybe

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Howard Bash

ASKER

When I execute this:

var objHField = document.getElementById('<%= hMyIFrame.ClientId%>');

IE returns this:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

I read something about there being some issue with the %= and to use %# instead, but neither seems work (if indeed this is the bug in my code).

Howard Bash

ASKER

OK. I have the solution to this. Instead of changing the '=' with a '#' move javascript down from the head section into the body and the error msg goes away and the code function correctly.

Thank you for your thoughts on this.