[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4960
  • Last Modified:

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

0
Howard Bash
Asked:
Howard Bash
4 Solutions
 
JPJ78Commented:
Try...
var mpeObj = document.getElementById('<%=frame1.ClientId%>');
0
 
CB_ThirumalaiCommented:
0
 
Howard BashSenior Software EngineerAuthor 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.  

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sybeCommented:
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

0
 
Howard BashSenior Software EngineerAuthor Commented:
I need to be able to load the src on a button click or a linkbutton click.
0
 
sybeCommented:
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.


0
 
Howard BashSenior Software EngineerAuthor 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).


0
 
Howard BashSenior Software EngineerAuthor 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.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now