Issue with blocking the UI during a onchange request - prevents other event from firing.
Posted
by jfrobishow
on Stack Overflow
See other posts from Stack Overflow
or by jfrobishow
Published on 2010-05-06T18:31:41Z
Indexed on
2010/05/06
18:38 UTC
Read the original article
Hit count: 211
I am having issues with jQuery blockUI plugins and firing two events that are (I think, unless I am loosing it) unrelated.
Basically I have textboxes with onchange events bound to them. The event is responsible for blocking the UI, doing the ajax call and on success unblocking the UI. The ajax is saving the text in memory. The other control is a button with on onclick event which also block the UI, fire an ajax request saving what's in memory to the database and on success unblock the UI.
Both of these work fine separately. The issue arise when I trigger the onchange by clicking on the button. Then only the onchange is fired and the onclick is ignored.
I can change the text in the checkbox, click on the link and IF jQuery.blockUI() is present the onchange alone is fired and the save is never called. If I remove the blockUI both function are called.
Here's a fully working example where you can see the issue. Please note the setTimeout are there when I was trying to simulate the ajax delay but the issue is happening without it.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
<script>
function doSomething(){
$.blockUI();
alert("doing something");
//setTimeout(function(){
$.unblockUI();
//},500);
}
function save(){
$.blockUI();
//setTimeout(function(){
alert("saving");
$.unblockUI();
//}, 1000);
}
</script>
</head>
<body>
<input type="text" onchange="doSomething();">
<a href="#" onclick="save()">save</a>
</body>
</html>
© Stack Overflow or respective owner
