When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor?
I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS property to "cursor: progress", the browser UI does not reflect this change (tested on Firefox 23.0.1). Interestingly, the cursor changes if I remove the $.ajax calls and replace them with setTimeOut callbacks to simulate time passing. Any insights into what might be causing this issue? Thank you.
Below is the test code that replicates the problem:
$( "#dialog-confirm" ).dialog({
resizable : true,
height : 240,
modal : true,
buttons: {
"Take Action": function() {
$( "body" ).css( 'cursor', 'progress' );
for ( i = 0; i < 2000; i++ )
{
$.ajax({
async : false,
type : 'GET',
url : "test2.html",
cache : false,
dataType: 'html',
success : function(data) {
$("#junk").append (data + "number: " + i);
},
error: function(data) {
}
});
}
$( "body" ).css( 'cursor', 'default' );
},
"Exit": function() {
$( this ).dialog( "close" );
}
}
});
Test page HTML:
<div id="dialog-confirm" title="Show Something here">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Text of the dialog box here
</p>
</div>
<div id ="junk"> Some rubbish text so I can see the div </div>
<div>
The following is the HTML content loaded:
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
Edit: Further testing shows that the Dialog has no impact on the issue. The problem is related to JavaScript's single-threaded nature and the fact that the code is consuming processor without releasing it. Comments and answers received below have been helpful but haven't addressed my query directly. Modifying the code as follows:
var j = 0;
var set = false;
{
setTimeout(function doStuff ()
{
$.ajax({
async : false,
type : 'GET',
url : "test2.html",
cache : false,
dataType: 'html',
beforeSend: function ()
{
if (set === false)
{ $("body").css('cursor', 'wait'); set = true; }
},
complete: function () {
},
success : function(data) {
$("#junk").append(data + "number: " + ++j);
if (j === 1000) {
$("body").css('cursor', 'auto');
}
},
error: function(data) {
}
});
if (j < 1000) {
setTimeout(doStuff,20);
}
}, 0);
}
This solves the problem by relinquishing the processor after each $.ajax call. While not ideal, it seems to resolve the cursor issue;
Note: The for loop became redundant in this new test code, altering the original problem.