javascript - How does the `data-include` attribute likely work? - Stack Overflow

I'm analyzing a site and I see that there is a data-include attribute on a div.

I see that data- is part of the HTML 5 spec according to a Resig article.

I can also see that the div is being replaced by some response HTML as it fires off an xhr request to the server. This mechanism is basically used to load modules client side.

<div data-include='some.path'></div>

The question I have is how is the XHR fired off?

I'm used to accessing the DOM via IDs # or classes ., or selectors of some sort.

I see no selector so I can't figure out how it is done?

Here is a list of js according to Chrome

I'm analyzing a site and I see that there is a data-include attribute on a div.

I see that data- is part of the HTML 5 spec according to a Resig article.

I can also see that the div is being replaced by some response HTML as it fires off an xhr request to the server. This mechanism is basically used to load modules client side.

<div data-include='some.path'></div>

The question I have is how is the XHR fired off?

I'm used to accessing the DOM via IDs # or classes ., or selectors of some sort.

I see no selector so I can't figure out how it is done?

Here is a list of js according to Chrome

• javascript
• html

Share Improve this question Follow edited Sep 11, 2015 at 20:50 cade galt asked Sep 11, 2015 at 20:37 cade galtcade galt 4,22199 gold badges3636 silver badges4949 bronze badges 10

• The site you're looking at. What javascript libraries is it using ? If you don't see any selectors then it's likely not using Jquery. Perhaps Angular.js ? – TchiYuan Commented Sep 11, 2015 at 20:41
• 1 If using jQuery this attribute can be picked up with .data('include') which will give you the value in your script, which you can then operate on. – Chrillewoodz Commented Sep 11, 2015 at 20:41
• @Tchi - I added in a list to the question – cade galt Commented Sep 11, 2015 at 20:43
• @Chrill - nice to know, but how does jQuery do it then, I mean what is the DOM method for searching by attribute ? – cade galt Commented Sep 11, 2015 at 20:44
• 1 Probably done with jQuery based on the given libraries. – Chrillewoodz Commented Sep 11, 2015 at 20:47

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 3

data-include is used by csi.js -- client side includes. An element with data-include='URL' is automatically replaced with the contents of the URL.

You can select DOM elements by data attribute, either by their value or just the presence of them. For example, using jQuery, this selector would give you all the elements with a data-include attribute: $("[data-include]"). So roughly if you wanted to load a bunch of URL's given by the data-attribute data-include in a bunch of divs, you could do something like this.

$('[data-include]').each( function() {
  var path = $(this).data('include');
  // Do something with this path
});

That is how you would gather up those elements, then I assume you loop through them and load the scripts from that attribute. Does that answer your question?

After looking at the source code of csi.js, I learned that this is how it's done:

window.onload = function() {

  var elements = document.getElementsByTagName('*'),
      i;
  for (i in elements) {

    if (elements[i].hasAttribute && elements[i].hasAttribute('data-include')) {
        fragment(elements[i], elements[i].getAttribute('data-include'));
    }
  }
  function fragment(el, url) {
    var localTest = /^(?:file):/,
        xmlhttp = new XMLHttpRequest(),
        status = 0;

    xmlhttp.onreadystatechange = function() {
        /* if we are on a local protocol, and we have response text, we'll assume things were sucessful */
        if (xmlhttp.readyState == 4) {
            status = xmlhttp.status;
        }
        if (localTest.test(location.href) && xmlhttp.responseText) {
            status = 200;
        }
        if (xmlhttp.readyState == 4 && status == 200) {
            el.outerHTML = xmlhttp.responseText;
        }
      }

      try { 
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
      } catch(err) {
        /* todo catch error */
      }
  }
}

He basically just uses vanilla JS and grabs all the elements, loops through them to see which have the attribute of data-include and then makes a new http request for each attribute that he finds. It's really straight forward and could be written way shorter in jQuery, but it's not necessary since you would have to include a whole library for such a simple task.

Nowadays, many JS libraries use whatever- prefixes to many things. Check what library the site is using and then read it's documentation to understand why it's there.