dialog modal window not closing when called from child page

Question

I am trying to use the jQuery UI dialog as pop up window and I wanted to put another aspx page as body to the Jquery UI Dialog. here I do not want to use the Jquery button option. At the child page, I have put button which is supposed to close the modal window and refresh the parent page. Below is the code I have been trying to implement but some reason I am getting js error message. Am I missing something here ?

Parent Page : aspx page

  <div>
     <div id="dialog" title="This is Pop up ">
            <div class="modal">
                <div class="modal-body">
                    <iframe style="width: 100%; height: 100%;"  src="childPage.aspx" runat="server" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <input type="button" value="open"  id="OpenDialog"/>
    </div>

Jquery code : parent page

 $(function () {
        var dialog
        dialog = $("#dialog").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
        });
        $("#OpenDialog").button().on("click", function () {
            dialog.dialog("open");
        });
    });

Child page :

 <input type="button" id="btnCloseChildPageRefreshParent" value="Close and Refresh Parent Page" />

Child Page Js code :

   $(function () {
        $('#btnCloseChildPageRefreshParent').on('click', function () {
            refreshParent();
            open(location, '_self').close();
        });

        function refreshParent() {
            window.opener.location.reload();
        }
    });

Answer 1

This is an iframe so you need to use window.parent ( see the MDN documentation here ) instead of window.opener . It is not a new window, but a frame, so there is no opener.

Note that the domain of the frame and parent must match, or the call will fail due to cross-domain security restrictions.

The code sample below will print out the value of window.opener and the error generated by the call to window.parent.location.reload to illustrate this.

 function log (o) { var el = document.createElement('div'); el.innerHTML = o; document.body.appendChild(el); } document.getElementById('button').onclick = function () { //This line could be used if the domain of the frame and parent match //window.parent.location.reload(); log('window.opener is: ' + window.opener); try { window.parent.location.reload(); } catch (e) { log('Attempted to call window.parent.location.reload(): ' + e); } } 

 <button id="button">Reload Parent</button>