I have an anchor tag on my page that toggles between active and cancelled entities. Only one link is showen at a time depending on what the user wants to see. I use ajax to replace the html with either active info or cancelled info. See below.
The problem that I'm having is that when the user clicks the link the loading dialog should be displayed, but the dialog is only being displaying on the first click and not the subsequent clicks. This is only happening in Chrome.
$(document).ready(function() {
$("a#showCancelled, a#showActive").live("click", function(event) {
event.preventDefault();
$("#dialog-modal").dialog('open');
$.ajax({
type: "GET",
url: $(this).attr("href"),
dataType: "html",
cache: false,
success: Success,
error: Error
});
});
$("#dialog-modal").dialog({
autoOpen: false,
height: 50,
width: 400,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false
});
});
function Success (data, status) {
$("#dialog-modal").dialog('close');
$("body").html(data);
}
html
<div id="dialog-modal" title="Loading...">
<p><img src="../images/busy.gif" /> Just a moment...</p>
</div>
EDIT -
I have changed my code to below from suggestions and wrapped the content I want updated with a dummy <div>. But now the dialog doesn't open at all and nothing is displayed when the content is updated in IE7.
$("a#showCancelled, a#showActive").live("click", function(event) {
event.preventDefault();
$link = $(this).attr("href");
$("#dialog-modal").dialog('open');
$("#dummy").load($link + " #dummy");
$("#dialog-modal").dialog('close');
});