zAnthony zAnthony - 4 months ago 37
Javascript Question

Close IFRAME Window

The below jQuery get trigger by a button on a GridView which allow me to Edit the record in a nice popup Iframe. However, I need to close the Iframe popup from behind code(c#) of the EditEmployee.aspx page. I've try almost all the option by searching google and stackoverflow and none seems to be working. I try add a function on the parent page call CloseDialog() and then call window.parent.CloseDialog() and I can't get it to work. Can someone please help me, I'm new to jQuery?

<script type="text/javascript">
$(document).ready(function () {
$('a#popup').on('click', function (e) {

var page = $(this).attr("href") //get url of link

var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: 450,
width: 'auto',
title: "Edit Employee",
buttons: {
"Close": function () { $dialog.dialog('close'); }
},
close: function (event, ui) {

__doPostBack('<%= btnRefresh.ClientID %>', ''); // To refresh gridview when user close dialog
}
});
$dialog.dialog('open');
e.preventDefault();
});
});
</script>

<asp:TemplateField HeaderText="ID">
<ItemTemplate >
<a id="popup" href='EditEmployee.aspx?id=<%# Eval("ID") %>' >edit</a>
</ItemTemplate>
</asp:TemplateField>

Answer

It turn out that I need to give me iframe a id and then call the close it function like this link Close IFrame Dialog from Popup

function closeIframe()
{
$('#iframeId').dialog('close');
return false;
}