I have a ASP.NET Winform project in which the accepted hosted cancel event is not firing while using IE. It works fine in Chrome. I have confirmed in IE the the communication handler is working as I'm receiveing both the resize and transaction response events. I'm using an iframe with a jquery-ui dialog box.
What is odd as well is I copied most of the code from another project where the cancel button is working fine in IE. I will be happy to post any code that might be helpful in troubleshooting the issue.
Below is the aspx code:
<%@ Page Title="Account Summary" Language="C#" MasterPageFile="~/_MasterPages/JICS8.Master" AutoEventWireup="true" CodeBehind="AccountSummary.aspx.cs" Inherits="OnlinePaymentForms.Invoices.AccountSummary" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" href="../Content/themes/base/jquery-ui.css"/>
<style type="text/css">
.ui-dialog-titlebar-close {
visibility: hidden;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeaderPlaceHolder" runat="server">
<p>Account Summary - Outstanding Invoices</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder" runat="server">
<form id="MainForm" runat="server">
<asp:ScriptManager ID="MainScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery-ui" />
</Scripts>
</asp:ScriptManager>
<script>
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(setupDialog);
window.CommunicationHandler = {};
function parseQueryString(str) {
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
vars[pair[0]] = unescape(pair[1]);
}
return vars;
}
CommunicationHandler.onReceiveCommunication = function (argument) {
alert('Commincation handler fired')
params = parseQueryString(argument.qstr)
parentFrame = argument.parent.split('/')[4];
console.log(params);
console.log(parentFrame);
$frame = null;
if (params['action'] == 'cancel') {
document.getElementById('<%= responseActionField.ClientID %>').value = params['action'];
document.getElementById('<%= responseField.ClientID %>').value = params['response'];
document.getElementById('<%= responseButton.ClientID %>').click();
closeDialog();
window.scrollTo(0, 0);
}
else if (params['action'] == 'transactResponse') {
document.getElementById('<%= responseActionField.ClientID %>').value = params['action'];
document.getElementById('<%= responseField.ClientID %>').value = params['response'];
document.getElementById('<%= responseButton.ClientID %>').click();
closeDialog();
}
}
function setupDialog() {
var wWidth = $(window).width();
var wHeight = $(window).height();
var dWidth = wWidth * 0.9;
var dHeight = wHeight * 0.9;
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: dWidth,
height: dHeight,
closeOnEscape: false
});
}
function openDialog() {
$("#dialog").css('visibility', 'visible');
$("#dialog").dialog("open");
}
function closeDialog() {
$("#dialog").dialog("close");
}
</script>
<div class="SectionHeader">
<p>Test Payment Popup</p>
</div>
<div class="SectionBody">
<table>
<tr>
<td>Test</td>
<td>
<asp:TextBox ID="FirstNameTextBox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator
ID="FirstNameRequiredFieldValidator"
runat="server"
ControlToValidate="FirstNameTextBox"
ErrorMessage="*Required"
ForeColor="Red"
Display="Dynamic"
EnableClientScript="false">
</asp:RequiredFieldValidator>
</td>
</tr>
</table>
<asp:Button ID="SubmitButton" runat="server" Text="Submit" OnClick="SubmitButton_Click"/>
</div>
<div hidden="hidden">
<asp:HiddenField ID="responseActionField" runat="server"/>
<asp:HiddenField ID="responseField" runat="server" />
<asp:Button ID="responseButton" runat="server" OnClick="responseButton_Click"/>
</div>
<div id="dialog" title="Make a Payment" style="visibility:hidden; overflow:hidden">
<iframe id="paymentIframe" name="paymentIframe" style="position:absolute; height:inherit; width:98%; border:none; overflow:hidden;"></iframe>
</div>
</form>
</asp:Content>
