How to get data attribute value using jquery

Question

I am working on jquery with php,Right now i have button inside loop and i want to pass "data attribute" and want to get value,Right now i am getting "undefined",So how can i do this ? Here is my current code

echo "<td>"."<a class='map-pop' data-id='".$employee_time['id']."' data-toggle='modal' data-target='#mapModal' onclick='viewmap();'><img src='assets/viewmap.png'></a>"."</td>";
                    
<script>
function viewmap()
{
     var ids = $(this).attr('data-id');
        alert('id is ' + ids);
}

</script>

Please use proper jQuery event handling methods, not inline event handlers set via onclick attributes. — C3roe
– C3roe, Commented Jan 27, 2023 at 8:36
As above, if you had correctly separated your markup from your js, this would be available. Surprisingly, none of the suggested answers show how to add a basic click handler. learn.jquery.com/events/event-basics — fdomn-m
– fdomn-m, Commented Jan 27, 2023 at 8:52

Danz · Accepted Answer · 2023-01-27 08:36:08Z

1

change your onclick to this

onclick='viewmap(this)'

and get data with jquery like this

function viewmap(elm){
  var id = $(elm).data('id');
  alert('id is ' + id);
}

answered Jan 27, 2023 at 8:36

Danz

2521 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BhAvik Gajjar · Accepted Answer · 2023-01-27 08:36:11Z

0

Pass this in onclick function and get in viewmap function and access You can try below code ..

PHP

<?php

echo "<td>"."<a class='map-pop' data-id='".$employee_time['id']."' data-toggle='modal' data-target='#mapModal' onclick='viewmap(this);'><img src='assets/viewmap.png'></a>"."</td>";
         
?>

Script

<script>
function viewmap(m)
{
     var ids = m.attr('data-id');
        alert('id is ' + ids);
}

</script>

answered Jan 27, 2023 at 8:36

BhAvik Gajjar

4563 silver badges19 bronze badges

Comments

amel · Accepted Answer · 2023-01-27 08:49:41Z

0

The problem is that you are using this inside your function viewmap but you are not sending it as a parameter from the HTML code, Change your onclick by: onclick='viewmap(this); than change the js function like bellow:

function viewmap(e)
{
     var ids = $(e).attr('data-id');
     alert('id is ' + ids);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='map-pop' data-id='1254' data-toggle='modal' data-target='#mapModal' onclick='viewmap(this);'>
  click here
</a>

answered Jan 27, 2023 at 8:49

amel

1,1562 gold badges6 silver badges17 bronze badges

Comments

nblfikri · Accepted Answer · 2023-01-27 10:16:33Z

0

Remove onclick attribute and change the viemap() function like this

$(".map-pop").click(function(e) {
  e.preventDefault();
  
  let ids = $(this).data('id');
  alert(`id is ${ids}`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='map-pop' data-id='".$employee_time['id']."' data-toggle='modal' data-target='#mapModal'><img src='assets/viewmap.png'></a>

`

answered Jan 27, 2023 at 10:16

nblfikri

1

Collectives™ on Stack Overflow

How to get data attribute value using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related