Storing data into elements

Question

I wonder how can I store data into some html elements like div. I can store it in class name, id name, but how does it work with "data"? If I need to store someode id, name, years etc. And to get all that info by jquery.. Like for id $(this).attr('id');. Thanks

score 2 · Answer 1 · edited May 23 '17 at 12:23

2

You may be able to use the .data() method for that. To store:

var obj = { 'name': 'John Smith', 'age': 25 };
$('#divid').data('customerInfo', obj);

Then to retrieve:

var obj = $('#divid').data('customerInfo');
alert(obj.name); //<== alerts 'John Smith'

update

With the additional information about using PHP, here is an alternative way to handle that. The data- attributes will work, but may not be as scalable as if you have more data to add later, or need to get at those values in other logic on the page.

For example, if you are passing a lot of data points from the PHP code to the HTML page, it would be better to serialize the data into JSON and set it to a Javascript variable.

The following SO answer gives an example on how to encode database data into JSON.

<?php
$q = mysqli_query("SELECT ...");
$rows = array();
while($r = mysqli_fetch_assoc($q)) {
    $rows[] = $r;
}
echo '<script>var dbvalues = '.json_encode($rows).';</script>';
?>

Then set only the data-id value on the div. If you add the data-id attribute to the div and the database data also includes an id value, you can use that to make the connection between the JSON data and the element.

<div id="div1" data-id="10">
    <button id="button1">Click Me</button>
</div>

<script>
    $(document).ready(function() {
        $("#button1").click(function() {
            var div = $(this).closest("div");
            var id = div.data("id");

            //This assumes dbvalues was set up somewhere in the document.
            $.each(dbvalues, function(index, value) {
                if (value.id == id) {
                    alert(value.name); //<==alerts the name associated
                    break;
                }
            });
        });
    });
</script>

In this code, you use the data-id value set on the div to find the data element in the dbvalues array. This scales better later if you have other fields of data to add, or if you want to use the data from the database for other purposes.

edited May 23 '17 at 12:23

Community

1
1

answered May 15 '16 at 22:17

jwatts1980

7,254
2
28
44

I was just writing the same thing and you answered it :) , voting it up – Arsh Singh May 15 '16 at 22:18
if possible for you add an little example of html div tag along with data attributes so he can understand , how it will look alike. – Arsh Singh May 15 '16 at 22:19
@Arsh It still would not hurt for you to add your answer, especially if you have some more info to add. The OP may prefer your answer to mine, or grant some upvote love – jwatts1980 May 15 '16 at 22:22
I will accept this as answer, but I need to store data into element from php by echoing div and say id is userid from database, and some data is his idk name, some other data is his birth.. You know what I mean? Because I need to get some info from user by clicking on div for that user. Or if I can somehow make 10 divs and each one is in other. And then by jqeury get elements from all 10 div if it is possible like using this for first div and if it is possible get id from parent div or div inside him – Mr. Noob May 15 '16 at 22:24
@jwatts1980 i personally did vote you up ... I did prefer your way ... Mine is also same so better your then mine :) – Arsh Singh May 15 '16 at 22:25
Also I can use like 10 informations inside div id by spliting them with - and then divide in jquery – Mr. Noob May 15 '16 at 22:28
@Mr.Noob That changes the question and the answer quite a bit. I would recommend either updating this question with the additional information, or asking a new question and add these additional details. – jwatts1980 May 15 '16 at 22:31
I need this what jewelfarazi answered, because I didnt know I can made any other word by data... I thought it had only few words... – Mr. Noob May 15 '16 at 22:36
@Mr.Noob I have updated my answer – jwatts1980 May 15 '16 at 22:57

score 2 · Accepted Answer · answered May 15 '16 at 22:30

2

You can do this similarly like ID by adding data attribute in your DIV tag

<div id="elm" data-id="1" data-name="name" data-years="2016">

</div>

And then use jQuery like:

$(this).attr('data-id');
$(this).attr('data-name');
$(this).attr('data-years');

answered May 15 '16 at 22:30

jewelfarazi

460
4
10

@Mr.Noob in jQuery you can also use the following notation: `$(this).data('id');` to retrieve attributes prefixed with `data-`. – jwatts1980 May 15 '16 at 22:51

score 0 · Answer 3 · answered May 15 '16 at 22:27

0

Set Attribute: $("#divid").attr("data-id",12);

Get Attribute: var id = $("#divid").attr("data-id");

answered May 15 '16 at 22:27

Manfred Kral

1
4

score -1 · Answer 4 · answered May 15 '16 at 22:18

-1

You can use HTML5 data- atrributes.

http://ejohn.org/blog/html-5-data-attributes/

answered May 15 '16 at 22:18

Isha Dijcks

74
11

Storing data into elements

4 Answers4