Unable to add property to HTML element via jquery

Question

I'm trying to add a property to my input elements via this code:

$(document).ready(function(e) {
    $.each({
        "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
        "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
        "swrv": 1, "ud": 1
    }, function(key, value) {
        $('#' + key).prop('data-point-value', value);
    });
});

If I load my page and look at the source, I see my elements with the name and id shown in the list above. There's no data-point-value attribute set on them though. I've tried using both prop and attr but neither of them see to add the attribute to the HTML.

What am I doing wrong?

If it matters at all, this element is down four divs, a form, a table, and a td element.

maverickosama92 · Accepted Answer · 2013-08-01 23:14:45Z

1

use below:

$('#' + controlID).attr('data-controlValue', value);

Or,

$('#' + controlID).data('controlValue', value);

I hope it helps.

answered Aug 1, 2013 at 23:14

maverickosama92

2,7352 gold badges24 silver badges38 bronze badges

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

Comments

T.J. Crowder · Accepted Answer · 2013-08-02 09:09:18Z

If I load my page and look at the source, I see my elements with the name and id shown in the list above. There's no data-point-value attribute set on them though. I've tried using both prop and attr but neither of them see to add the attribute to the HTML.

attr was the correct thing to use to set data-* attributes on the elements.

If you're using "view source" or similar to view the elements, the changes you're making client-side won't show. "View source" shows the page source as it was delivered from the server (frequently, it goes back to the server and re-retrieves the page, in fact). "View source" does not show you the current state of the DOM. You need to use your browser's live DOM viewer. In Chrome, FireBug, and IE's Dev Tools, this is usually a "DOM" tab or similar.

If you use attr in your code:

$(document).ready(function(e) {
    $.each({
        "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
        "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
        "swrv": 1, "ud": 1
    }, function(key, value) {
        $('#' + key).attr('data-point-value', value);
    });
});

Then the element with the id "bmsw" will get a data-point-value attribute with the value "4", the element with the id "dp" will get the value "1", and so on.

Gratuitous complete example: Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Setting Data Attributes</title>
  <style>
    span {
      border: 1px solid grey;
      padding: 0 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p>Each of the below is an element with an <code>id</code> matching its text. Click the element to see the value of its <code>data-point-value</code> attribute.</p>
  <p>
    <span id="bmsw">bmsw</span>
    <span id="dp">dp</span>
    <span id="jmsw">jmsw</span>
    <span id="mhsw">mhsw</span>
    <span id="mp">mp</span>
    <span id="pr">pr</span>
    <span id="prrv">prrv</span>
    <span id="sh">sh</span>
    <span id="st">st</span>
    <span id="sw">sw</span>
    <span id="swrv">swrv</span>
    <span id="ud">ud</span>
  </p>
  <p id="output"></p>
  <script>
    (function() {
      $(document).ready(function(e) {
          $.each({
              "bmsw": 4, "dp": 1, "jmsw": 2, "mhsw": 4, "mp": 5, 
              "pr": 10, "prrv": 3, "sh": 2, "st": 10, "sw": 2, 
              "swrv": 1, "ud": 1
          }, function(key, value) {
              $('#' + key).attr('data-point-value', value);
          });
      });

      $(document).on("click", "span", function() {
        var value = $(this).attr("data-point-value");
        $("#output").html(
          "The value of <code>" +
          this.id +
          "</code>'s <code>data-point-value</code> is <code>" +
          value +
          "</code>"
        );
      });
    })();
  </script>
</body>
</html>

Thank you for that explanation! I switched over to viewing in IE instead of Safari and then was able to see the attribute added on via the developer section.
@Gargoyle: Good deal! Glad that helped. Safari has dev tools too.

balexandre · Accepted Answer · 2013-08-02 10:51:39Z

0

use

$('#' + key).attr('data-point-value', value);

here's a DEMO: http://jsfiddle.net/balexandre/uKw25/

enter image description here

while attr gets and sets the property element, independet of what it is, and always return a string, prop get's a boolean condition, for example:

<input type="checkbox" value="Yes" checked />

$(elem).prop("checked") will return a boolean value of true while $(elem).attr("checked") will return the string "checked"

This is the same when setting values:

$(elem).prop("checked", true) will mark the checkbox as true, but to use the attr you need to write $(elem).attr("checked", "checked").

I hope this get you a clear view why your code is not working ... as you are using prop but not setting any boolean value as it is expected by the method.

edited Aug 2, 2013 at 10:51

answered Aug 1, 2013 at 22:56

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

8 Comments

T.J. Crowder Over a year ago

Note that using data won't actually put the information on the element itself. That may not matter (if it's only ever accessed from jQuery via data), but it matters if you're going to look for that information in some other way.

balexandre Over a year ago

true, it appends to the element DOM only to be accessible for manipulation using jQuery.

T.J. Crowder Over a year ago

"prop is used to only GET the properties values, not to set their values." That's just not at all correct. prop, like attr, is used to set properties. Just not attributes.

T.J. Crowder Over a year ago

@ balexandre: I am reading the docs: "The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties..." It is, in fact, the only way to set certain properties via jQuery. Why do you think they have an entire section devoted to the "setter" version of the function? :-)

balexandre Over a year ago

rewrote it to take any doubts in the air :) - still, after reading and using it in a current daily basis ... I'm kind'a lost as well...

|

Collectives™ on Stack Overflow

Unable to add property to HTML element via jquery

3 Answers 3

Comments

2 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related