Refresh Iframe when the Dialog modal Closes

Question

Im new to Jquery Dialogs and Iframes and I just want to Ask if can i Refresh a Static Iframe when the Dialog Modal Closes.

Heres the Static Iframe:

                    <iframe id="frameUserInfo" src="/User/UserInfo" style="border: none; width: 100%;
                        min-height: 220px;"></iframe>
                </div>

And this is my Jquery Dialog

$("#dialogAddPhone").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 700,
            height: 700,
            position: ['center', 40],
            close: function (event, ui) {
                $('#dialogAddPhone').attr('src', '');
            }
        });

I Tried adding This $('#frameUserInfo').reload(true); but its not working

just want to give you a better picture, In my Parent window, theres a static Iframe that contains a button that opens the $("#dialogAddPhone") the click event is being called at /User/UserInfo

This one is in the Parent Window:

<div id="dialogAddPhone" title="Document Upload" style="overflow-y: hidden;">
    <iframe id="myIframeAddPhone" src="" style="border: none; width: 100%; height: 100%;">
    </iframe>
</div>

Then this is the Open Event in the Static IFrame in User/UserInfo

loadIframe('myIframeAddPhone', href);
 parent.$("#dialogAddPhone").dialog("open");
 return false;

Then after Closing the Dialog , it should refresh the Iframe only of the frameUserInfo

Thanks! :)

Senjuti Mahapatra · Accepted Answer · 2016-01-06T06:57:31.053

1

You can use the following :

First Method:

$("#dialogAddPhone").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: 700,
        height: 700,
        position: ['center', 40],
        close: function (event, ui) {
            $('#dialogAddPhone').attr('src', '');
            document.getElementById('frameUserInfo').contentWindow.location.reload(); //Reloads the Iframe
        }
    });

Second Method:

Set the source of iframe again. It will refresh the iframe.

$("#dialogAddPhone").dialog({
    autoOpen: false,
    resizable: false,
    modal: true,
    width: 700,
    height: 700,
    position: ['center', 40],
    close: function (event, ui) {
        $('#dialogAddPhone').attr('src', '');
        var iframe = document.getElementById('frameUserInfo');
        iframe.src = iframe.src;//Reloads the Iframe
    }
});

The first method wont work in Chrome as there is no contentWindow property. So you should go with the second method.

Here is a Demo for the same using second method.

edited Jan 06 '16 at 06:57

answered Jan 06 '16 at 05:42

Senjuti Mahapatra

2,570
4
27
38

Sorry for the very late reply, but I encountered an error that says the `Uncaught TypeError: Cannot read property 'src' of null` – Ren Tao Jan 06 '16 at 06:39
1

It seems that the function is called before the iframe is loaded. Can u check the same? – Senjuti Mahapatra Jan 06 '16 at 06:43
the static iframe is in the parent window. after the dialog close, the iframe on parent window should refresh – Ren Tao Jan 06 '16 at 06:46
Can u replicate this issue in Fiddle? Without more information it is hard to say what may cause the problem. – Senjuti Mahapatra Jan 06 '16 at 06:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/99893/discussion-between-ren-tao-and-alorika). – Ren Tao Jan 06 '16 at 07:15

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

0

Try this:

$( '#frameUserInfo' ).attr( 'src', function ( i, val ) { return val; });

Link: https://stackoverflow.com/a/4249946/2848607

edited May 23 '17 at 12:04

Community

1
1

answered Jan 06 '16 at 05:48

Shayou

19
3

Refresh Iframe when the Dialog modal Closes

2 Answers2