Strange behaviour in template expansion and HTML inclusion

Question

I'm playing with w3.css and want to expand a template and include some HTML. The example is as follows:

<!DOCTYPE html>
<html>
  <title>BUG</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"/>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

  <div class="w3-container">

    <div id="id03">
      <div w3-repeat="customers">
    <p>Here: img = {{CustomerName}} text={{City}} country={{Country}}</p>
      </div>
    </div>


    <div w3-include-html="include.html"></div>

  </div>
  <script>
    w3IncludeHTML();

    var myObject = {"customers":[
      {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
      {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
      {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}
      ]};

      w3DisplayData("id03", myObject);

  </script>

</body>

  </html>

and the included file (include.html) is

 <div>
   <h1>I am included</h1>
   <button class="w3-btn w3-white w3-border">Button</button>
 </div>

If I comment out the w3IncludeHTML line the program works as I expect but with this line included the expansion is incorrect and the file included twice.

And ideas what's wrong?

harish224227 · Answer 1 · 2016-10-18T13:39:04.803

The w3IncludeHTML() is as follows

   function w3IncludeHTML() {
       var z, i, a, file, xhttp;
       z = document.getElementsByTagName("*");
       for (i = 0; i < z.length; i++) {
          if (z[i].getAttribute("w3-include-html")) {
                a = z[i].cloneNode(false);
                file = z[i].getAttribute("w3-include-html");
                xhttp = new XMLHttpRequest();

                xhttp.onreadystatechange = function() {

                if (this.readyState == 4 && this.status == 200) {
                     a.removeAttribute("w3-include-html");
                     a.innerHTML = this.responseText;          
                     z[i].parentNode.replaceChild(a, z[i]);
                     w3IncludeHTML();
                 }
            }
            xhttp.open("GET", file, true);
            xhttp.send();
            return;
        }
     }
  }

Before the XMLHTTPRequest(XHR) gets the successful response our element <div w3-include-html="include.html"></div> resides at the position i. Since the XHR requests are asynchrounous, the w3DisplayData("id03", myObject) is executed before the onreadystatechange callback.

w3DisplayData manipulates the DOM so our position is occupied by another DOM element.

Upon receiving the Successsfull XHR response i has been used again to refer the element <div w3-include-html="include.html"></div>. Due to the DOM manipulation the ith position is been occupied by other element so the content of the include.html becomes a child to <div id="id03">

The duplicate insertion of <div w3-include-html="include.html"></div> is because of a call to w3IncludeHTML() in onreadystatechange callback.

This behaviour can be fixed by replacing the w3IncludeHtml code as follows

     function w3IncludeHTML() {
         var z, i, a, file, xhttp;
         z = document.getElementsByTagName("*");
         for (i = 0; i < z.length; i++) {
            if (z[i].getAttribute("w3-include-html")) {
                  a = z[i].cloneNode(false);
                  file = z[i].getAttribute("w3-include-html");
                  xhttp = new XMLHttpRequest();
                  nodeToReplace = z[i]
                  xhttp.onreadystatechange = function() {
                      if (this.readyState == 4 && this.status == 200) {
                           a.removeAttribute("w3-include-html");
                           a.innerHTML = this.responseText;
                           nodeToReplace.parentNode.replaceChild(a, nodeToReplace);
                           w3IncludeHTML();
                     }
                 }
                 xhttp.open("GET", file, true);
                 xhttp.send();
                 return;
           }
     }
  }

Great - thank you very much. I thought it was something like that. I wonder how one can report a bug to W3Schools? — ja., Oct 18 '16 at 13:45

Strange behaviour in template expansion and HTML inclusion

1 Answers1