Question

This is an extension to a previous question which was answered. But have a different need/issue. Here is the jquery code:

$("#deletec-box").dialog({
    autoOpen: false,
    resizable: false,
    height:230,
    modal: true,
    buttons: {
        "Confirm": function() {
            window.location = $('#deletec-confirm').attr('href');
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});

$("#deletec-confirm").click(function() {
    $("#deletec-box").dialog("open");
    return false;
});

Here is the original link:

<a href="?action=delc&cid=2" id="deletec-confirm">Delete</a>

But I have multiple links on one page with the same id. So I changed the link to:

<a href="?action=delc&cid=2" id="deletec-confirm10">Delete</a>
<a href="?action=delc&cid=2" id="deletec-confirm9">Delete</a>
<a href="?action=delc&cid=2" id="deletec-confirm12">Delete</a>

How would I dynamically get the link the person clicked on to get the dialog? Right now it gets the url like so:

window.location = $('#deletec-confirm').attr('href');

Do I change the id to a class in the link? Or is there another way to dynamically select the id of the link so I can keep the id= attribute for each link?

Side note, if this is considered duplicate please let me know what I need to do.

Answer 1

I recommend you to use a common class to all your links. like this:

<div id="deletec-box">Are you sure you want to delete?</div> 
<a href="?action=delc&cid=2" class="deletec-confirm">Delete</a>
<a href="?action=delc&cid=2" class="deletec-confirm">Delete</a>
<a href="?action=delc&cid=2" class="deletec-confirm">Delete</a>

Then, you could store the ‘clicked link’ with .data()

$("#deletec-box").dialog({
    ...
    buttons: {
        "Confirm": function(idx) {
            window.location = $('#deletec-box').data('openerLink').attr('href');
            $(this).dialog("close");
        },
        ...
    }
});

//By binding with a class, you bind once for all
$(".deletec-confirm").click(function() {
    $("#deletec-box").data("openerLink", $(this)); //Store the link in the dialog
    $("#deletec-box").dialog("open");
    return true;
});

The advantage of using .data() is that you don’t use global vars, and store what you want only where you want.

Hope this helps.