javascripthtmljquerycustom-data-attribute

Reputation: 12300

How can I get the data-id attribute?

I'm using the jQuery Quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice.

How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items.

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>

Upvotes: 1051

Answers (17)

Prashant Pandey

Reputation: 158

HTML 5 introduced dataset: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset, the browser compa But for older browser you can use getAttribute method to get the data-* attributes.

const getDataAttr = (id) => {
  if(currentNode.dataset) return currentNode.dataset[id];
  return currentNode.getAttribute("data-"+id);
}

The reason to use dataset is constant lookup time, get attribute would not be a constant time lookup, it'll go through all the attributes of the html element and then return the data once it'll find the exact attribute match.

The reason to provide this answer is that nobody mentioned about the browser compatibility and lookup time with the given solution, although both of these solutions are already given by people.

Upvotes: 0

Ashok

Reputation: 870

This piece of code will return the value of the data attributes. For example: data-id, data-time, data-name, etc.

I have shown it for the id:

<a href="#" id="click-demo" data-id="a1">Click</a>

JavaScript: Get the value of the data-id -> a1

$(this).data("id");

JQuery: This will change the data-id -> a2

$(this).data("id", "a2");

JQuery: Get the value of the data-id -> a2

$(this).data("id");

Upvotes: 37

arman amirkamali

Reputation: 111

for pure js

 let btn = document.querySelector('.your-btn-class');
 btn.addEventListener('click',function(){
 console.log(this.getAttribute('data-id'));
 })

Upvotes: 5

Pergin Sheni

Reputation: 401

I have a span. I want to take the value of attribute data-txt-lang, which is used defined.

$(document).ready(function ()
{
    <span class="txt-lang-btn" data-txt-lang="en">EN</span>
    alert($('.txt-lang-btn').attr('data-txt-lang'));
});

Upvotes: -2

Ben

Reputation: 3357

For those looking to dynamically remove and re-enable the tooltip, you can use the dispose and enable methods. See .tooltip('dispose').

Upvotes: 0

Ignacio Galdames

Reputation: 119

Using jQuery:

$(".myClass").load(function() {
  var myId = $(this).data("id");
  $('.myClass').attr('id', myId);
});

Upvotes: 7

Aravindh Gopi

Reputation: 2166

Accessing the data attribute with its own id is a bit easy for me.

$("#Id").data("attribute");

function myFunction(){
  alert($("#button1").data("sample-id"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>

Upvotes: 15

Gjermund B. Dahl

Reputation: 1415

I use $.data:

//Set value 7 to data-id
$.data(this, 'id', 7);

//Get value from data-id
alert( $(this).data("id") ); // => outputs 7

Upvotes: 12

curiousBoy

Reputation: 6834

You can also use:

<select id="selectVehicle">
    <option value="1" data-year="2011">Mazda</option>
    <option value="2" data-year="2015">Honda</option>
    <option value="3" data-year="2008">Mercedes</option>
    <option value="4" data-year="2005">Toyota</option>
</select>

$("#selectVehicle").change(function () {
    alert($(this).find(':selected').data("year"));
});

Here is the working example: https://jsfiddle.net/ed5axgvk/1/

Upvotes: 34

bamossza

Reputation: 3926

HTML

<span id="spanTest" data-value="50">test</span>

JavaScript

$(this).data().value;

$("span#spanTest").data().value;

ANS: 50

Upvotes: 16

Serge Shultz

Reputation: 6068

Important note. Keep in mind, that if you adjust the data- attribute dynamically via JavaScript it will not be reflected in the data() jQuery function. You have to adjust it via data() function as well.

<a data-id="123">link</a>

JavaScript:

$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

Upvotes: 124

Roni

Reputation: 3336

If you are not concerned about old Internet Explorer browsers, you can also use HTML5 dataset API.

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

JavaScript

var myDiv = document.querySelector('#my-div');

myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"

Demo: http://html5demos.com/dataset

Full browser support list: http://caniuse.com/#feat=dataset

Upvotes: 73

Haleem Khan

Reputation: 43

The issue is you are not specifying the option or selected option of dropdown or list, Here is an example for dropdown, i am assuming a data attribute data-record.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });

Upvotes: 2

Kamil Kiełczewski

Reputation: 92347

Try

this.dataset.id

$("#list li").on('click', function() {
  alert( this.dataset.id );
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id >>CLICK ME<<" />
    </a>
  </li>
</ul>

Upvotes: 5

Marcel Jackwerth

Reputation: 54742

To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use

$(this).attr("data-id") // will return the string "123"

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("id") // will return the number 123

and the part after data- must be lowercase, e.g. data-idNum will not work, but data-idnum will.

Upvotes: 2042

Lalit Kumar Maurya

Reputation: 5565

If we want to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute and setAttribute methods as shown below:

Through JavaScript

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

Through jQuery

// Fetching data
var fruitCount = $(this).data('fruit');
OR 
// If you updated the value, you will need to use below code to fetch new value 
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).attr('data-fruit','7');

Read this documentation

Upvotes: 216

ofir_aghai

Reputation: 3281

var id = $(this).dataset.id

works for me!

Upvotes: 12

How can I get the data-id attribute?

Answers (17)

Related Questions