Custom HTML attributes with dynamic values

Question

I'm working on a project based on schools and one of the features we have is school finder.

Because schools like to continue using Windows XP and stuck with Internet Explorer 1 (pun intended), I'm trying to use tradition javascript, rather than jQuery to support all browsers.

The problem is, the schools listed from the database are put into tables, each having a custom attribute called data-school-id with a value of sch-X

I am truly stuck on how to get javascript to read these values when the user clicks on the school's table cell. This is the code I currently have:

var schID = document.getElementById("data-school-id");
schID.addEventListener("click", function() {
    alert(schID.value);
}, false);

I need to grab the numeric value, though I already know how to do that. It's getting javascript to understand the dynamic attributes and it's value for each table cell that I'm stuck on.

Each of the table cells are as so:

<td data-school-id="sch-123">
    <div class="pull-left sch-logo">
        <img src="#" width="100" height="100">
    </div>
    <div class="pull-left">
        <h3>School Name</h3>
        <p><strong>Headteacher:</strong> Mr. Foo Bar</p>
    </div>
</td>

Answer 1

Access it using the getAttribute method:

schID.getAttribute("data-school-id");

Update:

To convert it to a numeric value, wrap it like so:

var id = schID.getAttribute("data-school-id"),
    n = parseInt(id, 10);

I think you are also going to have trouble with your element lookup. Are you sure the table cells are created as so:

<td>
    <div id="data-school-id" data-school-id="123"/>
</td>

Why not inspect the HTML of the table and provide a little more in your question?

Update 2:

You need to add a click handler to the table and handle events that bubble up from TD elements. Use the event.target or event.source (check IE 8 documentation for those attributes). That will give you the reference to the element:

function handler(evt) {
    evt = evt || window.event;

    var td = evt.targetElement,
        schoolId = td.getAttribute("data-school-id"),
        numSchoolId = parseInt(schoolId, 10);
}

Answer 2

I would strongly recommend you revisit the idea of using JQuery, just be sure to use the older versions that support IE 6 (before 2.0) -- If the IE version is older than 6.0 tell them politely that they must update their browser if they say no -- you are working in a dysfunctional environment, find a new job. Not even Microsoft will support IE6 past April 8 2014 -- XP will be no more as far as they are concerned.

I have supported quite a bit a IE6 code using JQuery and it worked great. Your issues may be the lousy CSS support in IE6, or other incompatibilities, but they are unlikely to be JQuery themselves in my experience. You will have a codebase that is even more trapped in IE land if you continue down this path.

Answer 3

function getElementWithAttribute(attribute)
{
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].getAttribute(attribute))
    {
      return allElements[i];
    }
  }
  return null;
}

var el = getElementWithAttribute('data-school-id');

if(el != null){
    el.addEventListener("click", function() {
        alert(el.value);
     }
}

Answer 4

Add a class reserved for the elements with data-school-id attribute. "school-elem" for example.

Use:

var schElems, i;

schElems = document.getElementsByClassName("school-elem");

for (i = 0; i < schElems.length; ++i) {
    alert(schElems[i].getAttribute('data-school-id'));
}

If you're unable to add a class (or use getElementsByClassName):

var schElems, i;

function getElementsByAttr(attr) {
    var allElems, attrElems, i;
    allElems = document.getElementsByTagName('*');
    attrElems = [];
    for (i = 0; i < allElems.length; ++i) {
        if (allElems[i].hasAttribute(attr)) attrElems.push(allElems[i]);
    }
    return attrElems;
}

schElems = getElementsByAttr('data-school-id');

for (i = 0; i < schElems.length; ++i) {
    alert(schElems[i].getAttribute('data-school-id'));
}

Answer 5

1) If you don't want to use jQuery you have to write a function which finds a DOM elm by data-attribute ( there're a lot of answers in Stack Overflow - ex Get elements by attribute when querySelectorAll is not available without using libraries? ). This part of code:

function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
  {
    if (allElements[i].getAttribute(attribute)){
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

2) You have to add even listener 'cross browser'. Because IE6-8 doesn't know method - addEventListener it knows attachEvent. This part of code:

function addEvent(elem, type, handler){
    if (elem.addEventListener){
       elem.addEventListener(type, handler, false)
    } else {
       elem.attachEvent("on"+type, handler)
    }
}

3) After that you can write smth like that:

var el = getAllElementsWithAttribute('data-school-id')[0],
    elClick = function(){ alert('1') };

addEvent(el, 'click', elClick);

4) If you want to know the property of data-attribute you can do that:

 var attr = el.getAttribute('data-school-id'); // "sch-123"

getAttribute works good in IE8 http://msdn.microsoft.com/en-us/library/ie/ms536429(v=vs.85).aspx