Embedded Javascript not executing

Question

I have the following two nearly identical blocks of Javascript embedded in my HTML (I know, I know, but I'm getting desperate...

Employment Block:

    <script>
    var xmlhttp = new XMLHttpRequest();
    var jobs = "employment.json";
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
            var json_in = JSON.parse(xmlhttp.responseText);
            console.log("Showing json_in");
            console.log(json_in);
            load_json(json_in);
         }
     }
     xmlhttp.open("GET", jobs, true);
     xmlhttp.send();

     function load_json(data) {
         console.log("Showing Employment data");
         console.log(data);
         var out = "";
         var i;
         for (i = 0; i < data.jobs.length; i++) {
             out += "<tr><td id = \"data-column\" width=\"30%\">" + data.jobs[i].Name + "<br>" + data.jobs[i].JobTitle + "<br>" + data.jobs[i].Dates + "</td><td id = \"desc-column\" width=\"70%\">" + data.jobs[i].Description + "</td></tr>";
         }
         document.getElementById("jobs").innerHTML = out;
      }
 </script>

Training Block:

<script>
  var xmlhttp = new XMLHttpRequest();
  var url = "training.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
      var json_in = JSON.parse(xmlhttp.responseText);
      load_json(json_in);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function load_json(data) {
    console.log("Showing Training data");
    console.log(data);
    var out = "";
    var i;
    for (i = 0; i < data.courses.length; i++) {
                        out += "<tr><td width=\"20%\">" + data.courses[i].Course + "</td><td width=\"10%\">" + data.courses[i].Website + "</td><td width=\"35%\">" + data.courses[i].URL + "</td><td width=\"35%\">" + data.courses[i].Description + "</td></tr>";
     }
     document.getElementById("train").innerHTML = out;
  }
</script>

And last, the Console log output...

Showing Training data
VM286:1 XHR finished loading: GET "https://lekrigbaum.com/pages/employment.json".
(anonymous) @ VM286:1
(anonymous) @ resume.html:77
resume.html:157 {courses: Array(8)}courses: Array(8)0: {Course: "Web Development", Website: "Udacity", URL: "https://www.udacity.com/course/web-development--cs253", Description: "Basics of using HTML, CSS, and Javascript to creat…sites.  Note: This cource has since ben modified."}1: {Course: "Intro to HTML and CSS", Website: "Udacity", URL: "https://in.udacity.com/course/intro-to-html-and-css--ud304", Description: "Introduction to HTML, CSS, design concepts and the Document Object Model"}2: {Course: "Javascript Basics", Website: "Udacity", URL: "https://in.udacity.com/course/javascript-basics--ud804", Description: "Introduction to Javascript programming and using J…ipt to interact with the DOM to modify web pages."}3: {Course: "Responsive Web Design Fundamentals", Website: "Udacity", URL: "https://www.udacity.com/course/web-development--cs253", Description: "Principles of responsive web site design and how to create layouts."}4: {Course: "JavaScript: Understanding the Weird Parts", Website: "Udemy", URL: "https://www.udemy.com/understand-javascript/", Description: "An in-depth examination of Javascript features."}5: {Course: "Bulding Responsive Real World Websites with HTML5 and CSS", Website: "Udemy", URL: "https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/", Description: "Extensive exercises in building real-world websites."}6: {Course: "Go Programming Language", Website: "Udemy", URL: "https://www.udemy.com/learn-how-to-code/", Description: "Extensive introduction to the Go programming language."}7: {Course: "Web Development with Google's Go Programming Language", Website: "Udemy", URL: "https://www.udemy.com/go-programming-language/", Description: "Using Go to replace web server.  Includes use of Go templates and other features."}length: 8__proto__: Array(0)__proto__: Object
VM286:1 XHR finished loading: GET "https://lekrigbaum.com/pages/training.json".
(anonymous) @ VM286:1
(anonymous) @ resume.html:153

The end result is that while the Training Block appears in the final webpage, the employment block does not, and from the console.log it would appear that the Employment Javascript is not running. I gone over this a few thousand times and even asked another developer to look at it, and we both came up empty.

Does anyone see where I screwed up?

Are you getting the data back from the AJAX requests that you expect? — phuzi
– phuzi, Commented Jul 6, 2018 at 13:32
You're using the same variable names in both script blocks. They share the same global namespace. — Pointy
– Pointy, Commented Jul 6, 2018 at 13:32
Try to put both blocks into separate IIFEs, so they wil have separate scopes — Andrzej Smyk
– Andrzej Smyk, Commented Jul 6, 2018 at 13:32

Andrzej Smyk · Accepted Answer · 2018-07-06 13:38:02Z

The problem lies in fact, that you declare all your variables and function in the same scope. Therefore, when code in training block is executed it overwrites xmlhttp variable and as a result only code in that block is executed. ou can either rename xmlhttp in training block to something other or, a better solution, use module pattern and put both block in separate IIFEs (immediately-invoked function expression):

<script>
(function () {
  var xmlhttp = new XMLHttpRequest();
  var url = "training.json";

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState === 4 && xmlhttp.status == 200) {
      var json_in = JSON.parse(xmlhttp.responseText);
      load_json(json_in);
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function load_json(data) {
    console.log("Showing Training data");
    console.log(data);
    var out = "";
    var i;
    for (i = 0; i < data.courses.length; i++) {
                        out += "<tr><td width=\"20%\">" + data.courses[i].Course + "</td><td width=\"10%\">" + data.courses[i].Website + "</td><td width=\"35%\">" + data.courses[i].URL + "</td><td width=\"35%\">" + data.courses[i].Description + "</td></tr>";
     }
     document.getElementById("train").innerHTML = out;
  }
})();
</script>

This way, you will have separate scopes and no names collision.

Collectives™ on Stack Overflow

Embedded Javascript not executing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related