Thursday, September 30, 2010

Jquery to get set read access IFrame content TextBox Value Data




Please visit my new Web Site https://coderstechzone.com



As you know that this days smart developers doesn't use IFRAME. But in our job always developers need to handle legacy systems. I found such type of legacy application. Now i am trying to modify the user requirement. To do that i need to read or access IFrame content as well as get or put some data from parent page to IFRAME. Since i did it thats why i want to share with you how one can access/read/get IFrame content controls like TextBox value as well as set the value from parent page to IFRAME using JQUERY.

Here is a simple output screenshot of my example:
IFRAME_Jquery

To complete this example first create the below asp.net aspx page. Which we used within the IFRAME:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Iframe_Page_Content.aspx.cs" Inherits="Iframe_Page_Content" %>

<!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>Child page placed into the IFrame</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label runat="server" ID="lblInfo">Iframe TextBox: </asp:Label>
    <asp:TextBox runat="server" ID="txtInfo"></asp:TextBox>
    </div>
    </form>
</body>
</html>
Now create the below asp.net master page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="IFRame_Jquery.aspx.cs" Inherits="IFRame_Jquery" %>

<!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>How to Get Set Iframe Content Like TextBox Control Value Text Data</title>
    <script src="Script/jquery.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <iframe id="uploadIFrame" scrolling="no" frameborder="0" style="border-style: none; margin: 0px; width: 100%; height: 40px;" src="Iframe_Page_Content.aspx"></iframe>    
        <asp:Button runat="server" ID="btnSet" Text="Hello Jquery Developers !!" />
        <asp:Button runat="server" ID="btnGet" Text="Click to read Iframe TextBox Data !!" />
    </div>
    </form>
</body>
</html>
Now use the below JQUERY to get set value:
<script language="javascript">
        $(document).ready(function() {
            $("#btnSet").click(function() {
                var $currIFrame = $('#uploadIFrame'); 
                $currIFrame.contents().find("body #txtInfo").val($('#btnSet').val());
                return false;
            });
        });

        $(document).ready(function() {
            $("#btnGet").click(function() {
                var $currIFrame = $('#uploadIFrame'); 
                alert($currIFrame.contents().find("body #txtInfo").val());
                return false;
            });
        });

    </script>

Hope one can access IFRAME content as well as set the value from parent page to IFrame using JQUERY.

Code Explanation:
Here I have created an Object named currIFrame which holds the full IFrame reference. The contents() method is used to get full HTML code inside the IFRAME.The Find() method is used to find out the element. The rest of the code is self explanatory. Hope you can understand.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

1 comments:

Anonymous said...

I like the article. I have two domain. But I can't get the value from parent domain. Who can help me?

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash