jquery ui loading dialog on click only firing once

Question

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');
});

Works now, must have been a browser caching issue.

Randall Kwiatkowski
– Randall Kwiatkowski

2010-08-30 17:05:18 +00:00
Commented Aug 30, 2010 at 17:05 — Randall Kwiatkowski
– Randall Kwiatkowski, Commented Aug 30, 2010 at 17:05

Nick Craver · Accepted Answer · 2010-08-30 14:44:05Z

1

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.

answered Aug 30, 2010 at 14:44

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Randall Kwiatkowski Over a year ago

Ah yes that makes sense, I guess the problem would be then that the ajax request is sending back a whole html page. Is there a way to extract a specific div out of the data and place it in the result div? Maybe using the .load?

Nick Craver Over a year ago

@Randall - Yep, you can do .load("page.html #content") for example, just put a space and selector after the URL.

Randall Kwiatkowski Over a year ago

Well it's not a static .html page per se, that is why I need to return it using the .ajax method. Something like .load(data#content #content) would be how I would need to use it.

Nick Craver Over a year ago

@Randall - Oh any URL works just add the selector afterwards, e.g. .load("myAjaxPage.php #content")

Randall Kwiatkowski Over a year ago

Thank you for your help. Seems like i'm having another problem with it now. Maybe re-create the dialog everytime might be the way to go. Although like you said it does seem a bit wasteful. :)

Collectives™ on Stack Overflow

jquery ui loading dialog on click only firing once

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related