Jquery, get dynamic attribute for dialog box

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.

so you no longer have any items on the page with the same ID correct? — kasdega
– kasdega, Commented Jul 7, 2011 at 3:32
@kasdega That is correct, each id is different/dynamic. So just dont know what each id would be except it starts with deletec-confirm — John
– John, Commented Jul 7, 2011 at 7:00
a selector for that would be $('input[id^="deletec-confirm"]') but Edgar gave you a better way to do it with a class. — kasdega
– kasdega, Commented Jul 7, 2011 at 16:10

Edgar Villegas Alvarado · Accepted Answer · 2011-07-07 03:32:22Z

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.

John Rasch · Accepted Answer · 2011-07-07 03:27:30Z

0

If you want to adhere to HTML/XHTML standards you'll need to adjust the id attributes so they are unique, or remove them and use a class for your selectors instead as I have done in the example below.

Here's a basic approach that will alert the href attribute values, adjust as necessary:

var $sender;

$("#deletec-box").dialog({
    ...
    buttons: {
        "Confirm": function(idx) {
            alert($sender.attr('href'));
            $(this).dialog("close");
        },
        ...
    }
});

$(".deletec-confirm").click(function() {
    $sender = $(this);
    $("#deletec-box").dialog("open");
    return true;
});

Combined with this HTML as an example:

<div id="deletec-box">Are you sure you want to delete?</div> 
<a href="#1" class="deletec-confirm">Delete</a> 
<a href="#2" class="deletec-confirm">Delete</a>

answered Jul 7, 2011 at 3:27

John Rasch

63.6k19 gold badges110 silver badges141 bronze badges

1 Comment

kasdega Over a year ago

I might be wrong because the question sort of glaces over it but I think he's already changed it so that each delete link has a different id.

Collectives™ on Stack Overflow

Jquery, get dynamic attribute for dialog box

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related