jQuery modal dialog on ajaxStart event
- by bdl
I'm trying to use a jQuery UI modal dialog as a loading indicator via the ajaxStart, ajaxStop / ajaxComplete events. When the page fires, an Ajax handler loads some data, and the modal dialog shows just fine. However, it never hides or closes the dialog when the Ajax event is complete. It's a very small bit of code from the local server that is returned, so the actual Ajax event is very quick.
Here's my actual code for the modal div:
$("#modalwindow").dialog({
modal: true,
height: 50,
width: 200,
zIndex: 999,
resizable: false,
title: "Please wait..."
})
.bind("ajaxStart", function(){ $(this).show(); })
.bind("ajaxStop", function(){ $(this).hide(); });
The Ajax event is just a plain vanilla $.ajax({}) GET method call.
Based on some searching here and Google, I've tried altering the ajaxStop handler to use $("#modalwindow").close(), $("#modalwindow").destroy(), etc. (#modalwindow referred to here as to give explicit context).
I've also tried using the standard $("#modalwindow").dialog({}).ajaxStart(... as well.
Should I be binding the events to a different object? Or calling them from within the $.ajax() complete event?
I should mention, I'm testing on the latest IE8, FF 3.6 and Chrome. All have the same / effect.
