CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Jack Slingerland
Jack Slingerland

Reputation: 2811

How to close jQuery UI dialog from within an interval?

I'm trying to close a jQuery UI dialog from within an interval. What I have seems like it should work, but for some reason it won't. I had some trouble animating the progress bar inside of the modal window, but got that figured out. Since that didn't want to animate the normal way, I wonder if the dialog doesn't want to close the normal way either.
Note: It always makes it to "Made it!".

    if(data.version != localStorage.getItem("Sync Version")) {
        //Start the progress bar.
        $("#progress-bar").progressbar({
            value:0,
            complete : function(event, ui) {
                $("#modal-message").dialog("close");
            }
        });

        //Modal Width
        modalWidth = 400;

        //Throw up a modal.
        $("#modal-message").dialog({
            height: 300,
            width: modalWidth,
            modal: true
        });

        //Queries to execute on initial sync.
        qt = 0;
        queryThreshold = 4000;

        //Start the interval
        $(function() {
            var progress = setInterval(function() {
                var qval = Math.floor(100*(qt / queryThreshold));

                if (qval == 100) {
                    console.log("Made it!");
                    $("#modal-message").dialog("close");
                    clearInterval(progress);
                } else {
                    //$("#progress-bar").progressbar("option", "value", qval);
                    $("#progress-bar .ui-progressbar-value").animate({width : qval+"%"}, modalWidth);
                }_
            },750);
        });

        //Save the newest sync verison.
        localStorage.setItem("Sync Version", data.version);

        //Perform a full sync.
        full_sync();
    }

Upvotes: 1

Views: 539

Answers (2)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

Do you have this code being called after the DOM has been loaded? I assume so or $("#progress-bar").progressbar({ /*...*/ }); and $("#modal-message").dialog({ /*...*/ }); may not actually be doing anything.

That said, try storing the dialog in a variable like so:

var mydialog = $("#modal-message").dialog({

and then referencing that in your function:

//$("#modal-message").dialog("close");
//becomes:
mydialog.dialog("close");

Upvotes: 1

Naftali
Naftali

Reputation: 146310

try putting:

    $("#modal-message").dialog({
        height: 300,
        width: modalWidth,
        modal: true
    });

inside the $(function() {...})

Upvotes: 0

Related Questions