Question

I have this code using Harvard API that thakes all the CS courses and load them to a dropdownlist.
after picking a course I want to draw an table with all the information of the course, but for some reason I get this to work, the function just not fire (I think it’s the issue).
can some one see the problem in the function i wrote?

<script type="text/javascript">
         function loadXMLDoc() {
             document.getElementById("span").style.visibility = "visible";
             document.getElementById("button").style.visibility = "hidden";
             $.ajax({
                 type: "GET",
                 url: "http://courses.cs50.net/api/1.0/courses?field=COMPSCI&output=xml",
                 success: function (data) {
                     var courses = data.documentElement.getElementsByTagName("course");
                     var options = document.createElement("select");
                     $(options).change(function () {
                         ShowCourseDetails(this);
                     });
                     for (var i = 0; i < courses.length; i++) {
                         var option = document.createElement("option");
                         option.value = $(courses[i]).find("cat_num").text();
                         option.text = $(courses[i]).find("title").text();
                         options.add(option, null);
                     }
                     document.getElementById("selectDiv").appendChild(options);
                     document.getElementById("span").style.visibility = "hidden";
                 }
             });
         }
         //Get the Course information
         function ShowCourseDetails(event) {
             // get the index of the selected option 
             var idx = event.selectedIndex;
             // get the value of the selected option 
             var cat_num = event.options[idx].value;
             $.ajax({
                 type: "GET",
                 url: "http://courses.cs50.net/api/1.0/courses?output=xml&&cat_num=" + cat_num,
                 success: function (data) {
                     $("#TableDiv").html(ConvertToTable(data.documentElement));
                 }
             });
         }
         //Draw The Table
         function ConvertToTable(targetNode) {
             targetNode = targetNode.childNodes[0];
             // first we need to create headers
             var columnCount = 2;
             var rowCount = targetNode.childNodes.length
             // name for the table
             var myTable = document.createElement("table");
             for (var i = 0; i < rowCount; i++) {
                 var newRow = myTable.insertRow();
                 var firstCell = newRow.insertCell();
                 firstCell.innerHTML = targetNode.childNodes[i].nodeName;
                 var secondCell = newRow.insertCell();
                 secondCell.innerHTML = targetNode.childNodes[i].text;
             }
             // i prefer to send it as string instead of a table object
             return myTable.outerHTML;
         }
</script>

the Markup:

<div class="left">
                   <input id="button" type="button" onclick="loadXMLDoc()" value="Get all Coputer Science Courses From Harvard"/>
                   <br />
                   <span id="span" style="visibility: hidden">Downloading Courses From Harvard.. Please Wait.. </span>
                   <div id="selectDiv"></div>
                   <div id="TableDiv"></div>
            </div>

10x alot in advance.

Answer 1

To get it to call ShowCourseDetails I changed this code:

$(options).change(function () {
    ShowCourseDetails(this);
});

To this:

$('select').change(function () {
    ShowCourseDetails(this);
});

And moved it to the bottom of your callback function, under this:

document.getElementById("span").style.visibility = "hidden";

So that the event gets hooked up to the DOM element after it’s been added. I then had to change this code:

$("#TableDiv").html(ConvertToTable(data.documentElement));

To this, since documentElement didn’t seem to be defined:

$("#TableDiv").html(ConvertToTable(data.childNodes[0]));

Which then allowed me to just remove this line in your ConvertToTable function:

targetNode = targetNode.childNodes[0];

It still doesn’t quite work since you are not navigating through the returned XML correctly. But I’ll leave fixing that up to you.