how to get the data from custom data tag in jquery

Question

I am trying to get the data from the custom tag 'data-tabval' but I am unable to get the value of it

<a href="#angular_code" role="tab" id="angular_code-tab" data-toggle="tab" aria-controls="angular_code">
   <span id="val" data-tabval="{{ tp }}" class="text">{{ tp }}</span>
</a>

angular_code: means there is some angular code I want the value of 'data-tabval' into jquery

I have tried many methods from morning to evening but am not getting specific results. Please if anyone can help me out

you can get the attribute value in jquery by usin `$("#val").attr('data-tabval')`. — Mayank Patel, Oct 17 '17 at 12:34
since you are using Angularjs you can try to use a directive for this and select your attributes with `function link(scope, element, attrs)` — Aleksey Solovey, Oct 17 '17 at 12:38

score 2 · Answer 1 · answered Oct 17 '17 at 12:39

2

You can use simply the jquery .attr to get the required output.

console.log($("#val").attr('data-tabval'))

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#angular_code" role="tab" id="angular_code-tab" data-toggle="tab" aria-controls="angular_code">
   <span id="val" data-tabval="test123" class="text">test here</span>
</a>

answered Oct 17 '17 at 12:39

Mayank Patel

1,563
1
14
19

I don't know why, but for some reason on execution of console.log($("#val").attr('data-tabval')); is showing undefined in console. – Shubham Trivedi Oct 17 '17 at 12:44
Are you talking about your code result? – Mayank Patel Oct 17 '17 at 13:01
{a tp a} that's my actual code..now I that code I applied this jquery line var val = $('#val').attr('data-tabval'); console.log(val); so upon running this code in console log it shows me 'undefined' for 'val' – Shubham Trivedi Oct 19 '17 at 07:20
the thing is when I write the js in HTML page it's working, but when I am writing in separate JS file it's giving me undefined in console log. – Shubham Trivedi Oct 23 '17 at 05:31
Can you show how you are injecting js in your code?Or else you might need to include console.log into document Ready! – Mayank Patel Oct 23 '17 at 07:00
give me your email id..ill show you – Shubham Trivedi Oct 23 '17 at 07:22

Md. Abu Sayed · Answer 2 · 2017-10-19T08:45:58.570

1

you can Gate custom Attribute value this code example:

$("a").click(function(event) {
      alert($(this).attr("aria-controls"));
      alert($(this).attr(" data-toggle"));
});

And others attribute or custom attribute

edited Oct 19 '17 at 08:45

answered Oct 17 '17 at 12:39

Md. Abu Sayed

2,396
2
18
26

its not working – Shubham Trivedi Oct 19 '17 at 07:25
please see again code I am replacing jQuery to '$' sign You Can See This link: https://jsfiddle.net/sayed021/0502t3ts/2/ But it not matter, I hope Your Another Problem. because my code still working. – Md. Abu Sayed Oct 19 '17 at 09:00
The thing is when I write the js in HTML page it's working, but when I am writing in separate JS file it's giving me undefined in console log. – Shubham Trivedi Oct 23 '17 at 05:32
please share me Your Message – Md. Abu Sayed Oct 23 '17 at 07:31

score 1 · Answer 3 · answered Oct 17 '17 at 12:39

1

Here is the code snippet for your requirement:

var value = $("#val").attr("data-tabval");

answered Oct 17 '17 at 12:39

Satyanarayana.Ruppa

89
1
1
10

how to get the data from custom data tag in jquery

3 Answers3