Grabing a data attribute of a clicked element?

Question

I have a link that opens a modal when clicked, however that element also has a data-id="#id here" attribute that I need to grab so I can pass it to my php script for processing. How can I accomplish this?

My JS code:

$(document).ready(function() {
$('#edit_general').click(editModal);

});

function editModal(event)
{
var modal = $('#editModal');
modal.modal({
    show: true
});
}

My html:

<li><a id="edit_general" href="#editModal" data-uid="<?php echo $u->id; ?>">Edit General</a></li>

I tried using the this keyword but it didn't work. How can I accomplish this?

Thank you, it works now, however the modal only pops up for the first entry. The html is echo'd out in a foreach loop. However the modal only pops up for the first user, any idea why that is happening? — user1701398, Oct 10 '12 at 21:15

Tats_innit · Accepted Answer · 2012-10-10T21:16:24.963

1

Try this: Demo http://jsfiddle.net/szS2J/1/ or http://jsfiddle.net/ug7ze/

$(this).data('uid')

Hope it fits the cause :)

like this:

$('#edit_general').click(editModal);
      $(this).data('uid')

full

$(document).ready(function() {
    $('#edit_general').click(editModal);

});

function editModal(event) {
    alert($(this).data('uid'));
    var modal = $('#editModal');
    modal.modal({
        show: true
    });
}

edited Oct 10 '12 at 21:16

answered Oct 10 '12 at 21:10

Tats_innit

33,991
10
71
77

Thank you, it works now, however the modal only pops up for the first entry. The html is echo'd out in a foreach loop. However the modal only pops up for the first user, any idea why that is happening? – user1701398 Oct 10 '12 at 21:16
No Worries @user1701398 Glad it helped `:)`, hmm, hope for modal you are closing modal properly and then recreating for the second input? Seems like the binding issue between modal and input box, can you flick a fiddle man, I will take a look. `:)` – Tats_innit Oct 10 '12 at 21:18
All the code I have is posted above, how would I go about unbinding it when the modal is closed? I am using bootstrap modal plugin if that helps. – user1701398 Oct 10 '12 at 21:21
By the way, even if it's a fresh page load, it still doesn't work for any other entries, only for the first one. I tried using live() instead of click() but still no luck – user1701398 Oct 10 '12 at 21:24
@user1701398 read this might help[: http://stackoverflow.com/questions/1701942/jquery-ui-dialog-opens-only-once oh by the ay `:)` .live is deprecated if you keen for why live is deprecated read this **Please Note: `.on` is available 1.7.2 JQ and above :)** ==> http://stackoverflow.com/questions/11115864/whats-wrong-with-the-jquery-live-method/11115926#11115926 – Tats_innit Oct 10 '12 at 21:24
Thank you, but my problem is slightly different, the dialog still opens again even if I close it. The problem is that it only opens for the first entry in my table. It's basically a table with all the user data and there is the edit general button for each user. For the first entry/user if I click it the dialog opens fine, but no other ones even open the dialog. – user1701398 Oct 10 '12 at 21:30
Ah, LOL @user1701398 `:)` it is bind to only on `id` - `#edit_general` **-** Thats why it only gets open forone input box - perhaps add a class attribute and rest keep the same! – Tats_innit Oct 10 '12 at 21:32
Yea but every "Edit General" link has the id of "edit_general" if I add a class they will all have a class of "whatever_class" and then it would be the same problem? Is there a better way to do this? Im sorry that im asking so much, im just slightly new to javascript and can't figure this one out – user1701398 Oct 10 '12 at 21:34
No worries bruv - all good `:)` - So; In a HTML DOM **-** `id` - identifies **UNIQUE**-ness :) of the element, you cannot have mulitple same id's where as you **CAN HAVE** multiple same `class` attribute and if you bind one event with that calss it will get bind to everything element with that class `:)` – Tats_innit Oct 10 '12 at 21:36

score 1 · Answer 2 · answered Oct 10 '12 at 21:10

1

You can get the value using the attr method: $(this).attr('data-uid')

answered Oct 10 '12 at 21:10

xing

447
2
6

score 1 · Answer 3 · edited Oct 10 '12 at 21:14

1

Like this stored in data_id.

   $(document).ready(function() {
      $('#edit_general').click(function() {
         var data_id = $(this).data('uid');
         var modal = $('#editModal');
            modal.modal({
            show: true
         });
      });
   });

edited Oct 10 '12 at 21:14

Tats_innit

33,991
10
71
77

answered Oct 10 '12 at 21:13

Shawn Janas

2,693
2
14
10

Grabing a data attribute of a clicked element?

3 Answers3