Question

I Wrote a code that takes a generates XML file from Harvard Uni, and put it in a dropdown, next you can choose a course from the list and it will generates a table with the course details.

     <script type="text/javascript" src="Script/jquery-1.7.2.js"></script>
     <script type="text/javascript">
     $('#button').click(function () {
         document.getElementById("span").style.visibility = "visible";
         document.getElementById("button").style.visibility = "hidden";
         $.ajax({
             type: "GET",
             url: "Harvard.aspx?field=COMPSCI",
             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";
             }
         });
     });
    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));
            }
        });
    }
    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>

and the body:

<div id="main">
            <div class="left">
                 <input id="button" type="button" value="Get all science courses from HARVARD"/>
                 <br />
                 <span id="span" style="visibility: hidden">Downloading courses from harvard....</span>
                 <div id="selectDiv"></div>
                 <div id="TableDiv"></div>
            </div>
        </div>

and What I get in the dropdown is only “undefined” on all the rows in the dropdown, can someone can see the problem with the code I wrote?

10x alot in advance 🙂

Answer 1

Working jsFiddle: http://jsfiddle.net/3kXZh/44/

Well, I found a couple of issues..

First, I’d stay away from setting “onclick” in the HTML. You want to separate your action layer from your content layer.

Since you’re using jQuery anyway, try this:

$('#button').click(function() {
    /* function loadXMLDoc contents should go here */
});

And change:

<input id="button" type="button" onclick="loadXMLDoc()" value="Get all sci..."/>

To:

<input id="button" type="button" value="Get all sci..." />

To solve your immediate problem in the JavaScript, change the loadXMLDoc function from this:

option.value = courses[i].getElementsByTagName("cat_num")[0].text;
option.text = courses[i].getElementsByTagName("title")[0].text;

to this:

option.value = $(courses[i]).find("cat_num").text();
option.text = $(courses[i]).find("title").text();

That should be enough to get you on to creating your tables from there.