jQuery Tools yes/no dialog: how to have more than one per page?

Question

I've got a page with a number of objects on it, several of which can be deleted upon user request. I'd like to use the jQuery Tools yes/no overlay to present an "Are you sure?" type dialog to the user to get confirmation before doing the deletion. I've adapted the jQuery Tools demo, and have it working, at least up to the point where it doesn't....

I've followed the flowplayer demo to get overlays created for each "delete this thing" link, and clicking on them is properly bringing up the overlay. What I now need is for the code handling the click to check the button that was clicked and, if the 'yes' button was clicked, get the href from the link and redirect the page to that location. The problem, as I see it, is that the click handler, which is attached to the DIV containing the yes and no buttons, doesn't have any way to tell which of the links was clicked on to cause its invocation, and so it can't get the appropriate href. The click handler in the flowplayer demo assumes that there is only a single place on the page where the overlay can get invoked. That doesn't work for me -- I have many.

So: is there any way to get this to work? There's gotta be something, but my brain is exhausted at this point. Thanks for the help.

---

the link containing the link is like this:

<li class='yuimenuitem'><a class='yuimenuitemlabel modalInput' rel='#yesno' href='/slate/delete/12345'>delete this item</a></li>

The click handler assigned to the overlay is essentially unchanged from what's in the flowplayer demo.

Answer 1

You could use the onBeforeLoad event of the overlay to set a variable with the id of the button that was clicked.

Then, when they click yes or no, the button can check that variable and load the correct URL for the user. This is untested, but something like this should work...

var clicked;
var links = [];//put a hash of button id's and links in here
var triggers = $(".modalInput").overlay({
    mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
    },

    onBeforeClick: function(event) {
        var element = e.originalTarget || e.srcElement;
        clicked = element.id
    },

    closeOnClick: false
});
var buttons = $("#yesno button").click(function(e) {
    var yes = buttons.index(this) === 0;
    if(yes) {
        window.location = links[clicked];
    }
});