In an ASP.NET MVC I have a view with this code (most removed for clarity):
<html lang="en">
<head>
<title>Registration</title>
</head>
<body>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<link type="text/css" href="/Content/Styles/style.css" rel="stylesheet">
<link type="text/css" href="/css/jquery.jgrowl.css" rel="stylesheet">
<link type="text/css" href="/Content/Styles/scrollbars.css" rel="stylesheet">
<link type="text/css" href="/Content/Styles/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="/Content/Styles/intlTelInput.css" type="text/css">
<link href="/Content/Styles/thickbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/Scripts/2012.1.419/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jQuery/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jQuery/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="/Scripts/jQuery/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.jgrowl.js"></script>
<script type="text/javascript" src="/Scripts/knockout-3.0.0.debug.js"></script>
<script type="text/javascript" src="/Scripts/kendo.all.min.js"></script>
<script type="text/javascript" src="/Scripts/thickbox.js"></script>
<div role="main">
<script type="text/javascript" src="/Scripts/2012.1.419/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.jgrowl.js"></script>
<div class="content">
...
</div>
<form action="/Go/Registration" data-ajax="true" data-ajax-begin="RegistrationOnBegin" data-ajax-success="RegistrationOnSuccess" id="form0" method="post">
.......
</form>
<style>
.blockUi
{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 280px;
height: auto;
top: -5px;
left: -5px;
}
</style>
<div id="errorPopUp" class="blockUi" style="display: none;">
<a href="#" id="close" style="float: right">Close</a>
<h2>Error</h2>
<div id="divPopUpError"></div>
</div>
</div>
<script src="/scripts/plugins.js" type="text/javascript"></script>
<script src="/scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
var index = 1;
$(document).ready(function () {
function RegistrationOnBegin() {
if ($('#password').val() !== $('#confirmPassword').val())
{
ShowError('Passwords entered do not match.');
return false;
}
$.blockUI({ message: '<div>Processing...</div>', css: { backgroundColor: '#000', color: '#fff', width: '100px' } });
}
function RegistrationOnSuccess(response) {
if (response.status == "fail") {
ShowError(response.message);
return false;
}
else
window.location.href = response.message;
}
function ShowError(message) {
if (message == null)
$('#divPopUpError').html("Uh oh, an error occurred. Please try again later.");
else
$('#divPopUpError').html(message);
$.blockUI({ message: $('#errorPopUp'), css: { width: '1px', top: '50%', left: '40%', cursor: 'pointer' } });
$("html").live("click", "#close", function () {
$.unblockUI();
});
}
</script>
</body>
</html>
Registration There is a form in the page when posted, a javascript function in the page, RegistrationOnBegin, is called. When server responds another javascript function in the page, RegistrationOnSuccess is called. Depending on the server response, this RegistrationOnSuccess will call blockUI passing in the #errorPopUp div, which you can see in the html, stype="display: none" This will cause a 'dialog' to display with a message and in the upper right hand corner, an anchor with a "Close".
I wanted to bind a click event handler to this so user can click it and unblock the ui.
I tried several ways to do this but the only way I successfully got to bind a click event handler was