开发者

jquery ui loading dialog on click only firing once

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 displa开发者_C百科ying 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');
});


You're replacing the <body> element's contents with this:

$("body").html(data);

This will destroy any dialog or anything inside the page really...did you want to stick the response in another container perhaps, something like this?

$("#result").html(data);

If not you either need to re-run the dialog creation piece after setting the <body> contents:

$("#dialog-modal").dialog({ ...options... });

Or create it on each click, and call .dialog('destroy') first, though this is a bit more wasteful.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜