How to reset jquery dialog timeout for next dialog?

Question

I have an add-to-bag button used throughout our site and we want a dynamic popup to appear to acknowledge what was just added, and then it goes away. I'm finding that if you click another add button, it has the previous dialog's timeout attached. To fix this so the next dialog has its own 10,000 setTimeout rather than whatever is left over from the last one I have come up with the following code (that doesn't do the trick).

$(document).ready(function ()
{
    // Create object for future dialog box - so it's available to the close method
    var addToBagDialogVar = $('<div id="addToBagDialogBox"></div>');
    var autoCloseTimeout = 10000;
    var dialogTimer;

    $(".addToBagPU").click(function (e)
    {
        var result = "";
        $.get(this.href, function (data) { SetData(addToBagDialogVar, data); });
        return false;
    });

    // Start listening for the close link click
    $(document).on("click", "#bagPUCloseLink", function (event)
    {
        event.preventDefault();
        CloseDialog(addToBagDialogVar);
    });

    function SetData(addToBagDialogVar, data)
    {
        result = data;
        var regex = data.match("{{(.*)}}");
        var bagCount = regex[1];

        addToBagDialogVar.html(result).dialog({
            open: function ()
            {
                clearTimeout(dialogTimer);
                $(".ui-dialog-titlebar-close").hide();
                SetBagCount(bagCount),
                dialogTimer = setTimeout(function () { CloseDialog(addToBagDialogVar); }, autoCloseTimeout);
            },
            show: { effect: "fadeIn", duration: 800 },
            close: function () { clearTimeout(dialogTimer); },
            width: 320
        });
    }

    function CloseDialog(closeThisDialog)
    {
        closeThisDialog.dialog("close");
        closeThisDialog.dialog("destroy").remove();
    }
});

The dialog is loaded with dynamic content from an external .Net page with product data and has a close link inside that page, which is why the dialog is loaded into addToBagDialogVar so it's available to CloseDialog .

All of that works just fine. It's just the reset of the timer that doesn't appear to be happening. If I go down a page of products and add each one to my bag, the 3rd or 4th dialog is only up for a second or so because they have all been using the first dialogs setTimeout.

I've read and read and tried too many different ways to remember and now my brain is mush.

Answer 1

I propose an alternate explanation for the behavior you're observing. When you click the first "add to cart", a timer is started. As you go down the page clicking "add to cart", a new timer is started each time. There's no overlap, just a bunch of separate timers running normally (although incidentally, each new dialog box blows away the timer ID you've previously created; I'll come back to this).

When your first dialog's timer expires, the dialog closes itself via the HTML ID, meaning it closes itself with something like a jquery $('div#addToBagDialogBox').closeOrSomethingLikeThat() , that is, every dialog inside a div with an id of addToBagDialogBox . The first timer expiration is closing all of your dialogs, because they all use that same HTML ID. The other timers are running perfectly, but when they expire there's nothing left for them to do.

You can fix the early-close problem by assigning a unique HTML ID to each dialog you create. And you'll want to manage your timer IDs on a per-dialog basis as well, such that each dialog has its own timer ID.

Edit: Just for nerdy grins, think about the details of the scenario you described. Your first timer is running, counting down normally, and you start four other timers while the first dialog is still there. The ID of the fifth timer is in your variable dialogTimer . So when the first dialog's timer expires, the close processing occurs, and you call clearTimeout with the ID of the fifth dialog's timer. So your first dialog's timer expired, the dialog closed all the other dialogs, and the cleanup cancelled the fifth timer. There are three other timers still running, their IDs lost forever. They finally expire and their shutdown functions run, but they're totally without effect, their companion dialogs long gone. Sorry, bona fide nerd here.