iframe div not closing on child button click event

Question

I have two HTML Pages ,one of which contains Iframe and the other where the contents of iframe are placed.Now my query is to close the div in which the iframe is contained on button click of button which is contained in the source of iframe.

My Main Page(Parent Page) which contains the iframe-

<div class="my">
<iframe id="contantdiv"   src="let-us-contact-you.html"  frameborder="0" name="contantdiv"></iframe>
</div>

And my child page which contains the content of iframe-

  <!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>CATalyst</title>
    <meta name="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta http-equiv="cleartype" content="on">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/menu.css" type="text/css">
    <link rel="stylesheet" href="css/html5reset.css" type="text/css">
    <link rel="stylesheet" href="css/responsivegridsystem.css" type="text/css">
    <link rel="stylesheet" href="css/col.css" type="text/css">
    <link rel="stylesheet" href="css/2cols.css" type="text/css">
    <!-- All JavaScript at the bottom. -->
    <script src="js/disable-copy.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        $.support.cors = true;
        function OnSuccess(data) {
            if (data.d) {
                alert(data.d);
            }
        }
        function Onerror(xhr, ajaxOptions, thrownError) {
            debugger;
            alert(thrownError);
            alert("Error");
        }
        //(string name,string email,string mobile,string course,string city

        function LoadPartialData() {


var name = document.getElementById('Name').value;
            var email = document.getElementById('Email').value;
            var mobile = document.getElementById('Mobile').value;
            var course = document.getElementById('course').value;
            var city = document.getElementById('city').value;

            $.ajax('http://test.endeavoursys.com/catalyst/contactus.asmx/SaveData',
            {
                beforeSend: function (xhr) { },
                complete: function () { },
                contentType: 'application/json; charset=utf-8',
                data: "{name:\"" + name + "\",email:\"" + email + "\",mobile:\"" + mobile + "\", course:\"" + course + "\",city:\"" + city + "\"}",
                dataType: 'json',
                jsonp: 'callback',
                type: 'POST',
                error: Onerror,
                success: OnSuccess
            });

    $(".my").slideUp();
            }

        // setTimeout(function () { LoadPartialData(); }, 20);

    </script>
</head>
<body style="background-color: rgba(0,0,0,0);">
<div class="my">
    <p class="formp">
        <label>
            Name:
        </label>
        <input type="text" placeholder="Name" name="Name" id="Name"></input></p>
    <p class="formp">
        <label>
            Email Id:
        </label>
        <input type="text" placeholder="Email" name="Email" id="Email"></input></p>
    <p class="formp">
        <label>
            Mobile:
        </label>
        <input type="text" placeholder="Mobile Number" name="Mobile" id="Mobile"></input></p>
    <p class="formp">
        <label>
            Course:
        </label>
        <select name="course" id="course">
            <option value="select">select</option>
            <option value="CAT">CAT</option>
            <option value="CSAT">CSAT</option>
            <option value="GMAT">GMAT</option>
            <option value="BBA">BBA</option>
            <option value="CGL">CGL</option>
        </select></p>
    <p class="formp">
        <label>
            City:
        </label>
        <select name="city" id="city">
            <option value="select">select</option>
            <option value="Delhi">Delhi</option>
            <option value="Noida">Noida</option>
        </select></p>
    <p class="formp-submit">
        <input onclick="LoadPartialData();" class="submit" type="submit" value="submit"></input></p>
</div>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:23

0

you can access the parent window object from within the child iframe and call jquery from there.

replace

$(".my").slideUp();

with

parent.$(".my").slideUp();

This will only work if you access your page through a webserver ie:

localhost/yourpage.html

edited May 23 '17 at 12:23

Community

1
1

answered Dec 03 '13 at 04:44

roo2

5,781
2
29
45

in the child iFrame within the button click handler – roo2 Dec 03 '13 at 04:50
i am able to close the div in which all the controls are specified but still there exists a div which does not hide. – Rohit Singh Dec 03 '13 at 05:01
parent.$(".my").slideUp() should hide the div containing the iFrame, is that happening? – roo2 Dec 03 '13 at 05:05
No Eru thats not happening.Instead the div that was closing is also not closing. – Rohit Singh Dec 03 '13 at 05:08
hmm, could you tell me what window.parent.getElementById('contantdiv') returns? when called in place of parent.$(".my").slideUp(); – roo2 Dec 03 '13 at 05:43
window.parent.getElementById('contantdiv') does not returns anything. – Rohit Singh Dec 03 '13 at 05:54
sorry, should have been this: window.parent.document.getElementById('contantdiv') – roo2 Dec 03 '13 at 06:10
your code works fine in Internet Explorer but not in google chrome.Any Explanations? – Rohit Singh Dec 03 '13 at 06:43
hmm in chrome, you cannot access the parent frame if you access your page like this file:///C:/users..../test.html Are you accessing your page like that or through http://localhost/page.test ? – roo2 Dec 03 '13 at 07:03

iframe div not closing on child button click event

1 Answers1