Extracting numerical data from "data-" in html

Question

In the HTML below, I want to simply divide two numbers and return the result to the page. The javascript accomplishes this, however, the variable A (GAL2_G2rAimTonsPerHr) is updated every 10 seconds or so from our PI server (historian). How can I set the variable A to equal the changing value? Is there a way I can store it in a temporary variable to be used as a divisor in the script?

< td align="left" style="font-size: 12px" width="60px"                     
 < span class='PIData' data-tag='GAL2_G2rAimTonsPerHr' data-on_pi_change='truncReading' >< /span>
< /td>

<SCRIPT LANGUAGE="JavaScript">
  function divide(n1,n2)
  {
    ans = n1/n2;
    document.write(" "+ans+"<BR>");
    return ans;
  }

  var a = 'GAL2_G2rAimTonsPerHr'????;

  var b = 2;

  divide(a,b);                          

</SCRIPT>

Please show us the snippet that updates your variable from the server. — Bergi, Jul 23 '12 at 13:01
Where's the first number located? I don't see it in the HTML code. Is it the value of the `data-tag` attribute? — Šime Vidas, Jul 23 '12 at 13:01
Yea the value I need is the data-tag value. (It changes from 0-300 depending on our system readings). — J.C.Morris, Jul 23 '12 at 13:20
As far as the snippet that updates it from the server, I am importing a PI-Plug in that refreshes the data when a change occurs. Its in the form of lengthy .js file. I am not sure what part of that file you would need. — J.C.Morris, Jul 23 '12 at 13:28

score 1 · Accepted Answer · answered Jul 23 '12 at 14:18

You've said the actual element will get updated by PI-Plug. If so, and it's really a number, then:

var value = parseInt($(".PIData[data-tag]").attr("data-tag"), 10);

The .PIData[data-tag] part is a CSS-style selector for an element with class="PIData" and a data-tag attribute. Then the rest is getting the value of that attribute and parsing it into a decimal number (as it will be a string, e.g. "300" rather than 300).

Or instead of attr you can use data and leave off the data- part of the attribute name:

var value = parseInt($(".PIData[data-tag]").data("tag"), 10);

I don't do that because I don't like the fact that the data function is asymmetrical (it reads from data-* attributes but doesn't write to them), but it would work fine for what you're doing.

A good read through the jQuery API documentat would be a good idea. It literally only takes about an hour, and it repays you very, very quickly indeed.

score -1 · Answer 2 · answered Jul 23 '12 at 12:59

-1

i am not getting your question correctly, but for getting data-attributes you can use jquery.data() method to get the data-attributes Jquery.data(). it would be helpful if you specify your requirement correctly

var yourVar=$('#YourElement').data("Key");

answered Jul 23 '12 at 12:59

Ravi Gadag

15,735
5
57
83

I tried your recommendation and am only getting (Nan) for a result. The issue is with me for sure, as I am unclear of which parameters need to go into the '#yourelement' and 'key'. from the snippet: span class='PIData' data-tag='GAL2_G2rAimTonsPerHr' data-on_pi_change='truncReading' , I am not sure which value would go where. the data-tag 'GAL_2rAim...' contains the value I need. – J.C.Morris Jul 23 '12 at 13:56
@T.J.Crowder: That makes much better sense. I wasn't sure how the CSS was tied into all of that but you cleared it up for me. Thank you! – J.C.Morris Jul 23 '12 at 14:17

Extracting numerical data from "data-" in html

2 Answers2