We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

ASP.NET IFrame src attribute in AJAX Modal Extender Popup

Howard Bash
Howard Bash asked
on
Medium Priority
5,318 Views
Last Modified: 2012-05-06
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

Comment
Watch Question

Commented:
Try...
var mpeObj = document.getElementById('<%=frame1.ClientId%>');

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Howard BashSenior Software Engineer

Author

Commented:
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.  

Commented:
You want to set it only once, when the page loads?

In code-behind, make a public variable and give it the value you want the iframe src to have.
Then just use src="<%someurl%>"

(and don't make the iframe runat at the server, why do you have runat="server" there anyway?)

<IFRAME id="frame1"  src="<%=someurl%>"  scrolling="auto" style="height:575px;width:800px;"></IFRAME>

Open in new window

Howard BashSenior Software Engineer

Author

Commented:
I need to be able to load the src on a button click or a linkbutton click.
Commented:
Well, you are talking about very simple HTML. The problem seems to be that all the tools you are using make things so complicated that you have lost sight of basic HTML functionality.

1. Using a link to click on, give the link a target which correspondents with the name of the iframe.

<iframe name="somename">
<a href="http://www.yahoo.com" target="somename">click</a>

2. Using a button, you need javascript
<iframe name="somename" id="someid">
<input type="button" value="click here" onclick="document.getElementById('someid').src='http://www.yahoo.com';">

If you wish to do these simple basic things using jquery and/or an asp:button which "runs at the server" then it is not so strange that you get lost.

What might happen in your current code is that when the button is clicked, the whole page is reloaded, cancelling out any effect of the client-side javascripts invoked. The script works fine, but you get a postback and see the starting situation again, as if nothing happened.


Howard BashSenior Software Engineer

Author

Commented:
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 BashSenior Software Engineer

Author

Commented:
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.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.