I'm doing an Ajax GET for some HTML which then populates a div via:
$(theDiv).html(theHtml)
This HTML includes a button (let's say "Button A") that displays a jQuery dialog via:
$(selector).dialog({modal:true});
When "Button A" is clicked, the dialog shows up every time. However, inside the dialog, I've included a Cancel link. The cancel link fires:
$(selector).dialog("close")
I've noticed that most of the time it works just great. However, if I quickly click "Button A" immediately after the Ajax GET is finished, the cancel link will NOT close the dialog! The "X" button in the upper right of the dialog always works, but the Cancel button is the one I'm struggling with.
I've tried a number of different things to get this to work to no avail. This is happening in Firefox 3.5.9 as well as IE 7. If I use Firebug and put a breakpoint after the .dialog('close');
statement, then I notice that the background color on the screen changes from gray to white, but the dialog remains open. I've even tried forcing the issue by doing:
$(selector).css("display", "none");
to no avail.
For whatever reason, the first time that the Ajax GET fires, I NEVER have this problem... So when I visit the page and execute the GET the first time, it works every time. However, if I remain on the page and continue to fire the GET while the DOM is still loaded, it works maybe 50% of the time only.
I greatly appreciate any help anyone is willing to provide!
Thanks,
Andy