0

すべてのCSコースを取得してドロップダウンリストにロードするHarvard APIを使用したこのコードがあります。コースを選択した後、コースのすべての情報を含むテーブルを描画したいのですが、何らかの理由でこれが機能し、機能が起動しません(問題だと思います)。私が書いた関数の問題を誰かが見ることができますか?

<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>

マークアップ:

<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>

事前に10倍。

4

1 に答える 1

0

それを呼び出すために、ShowCourseDetailsこのコードを変更しました：

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

これに：

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

そして、これをコールバック関数の一番下に移動しました:

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

イベントが追加された後に DOM 要素にフックされるようにします。次に、このコードを変更する必要がありました。

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

これには、documentElement が定義されていないようだったので:

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

次に、ConvertToTable関数でこの行を削除するだけで済みました。

targetNode = targetNode.childNodes[0];

返された XML を正しくナビゲートしていないため、まだうまくいきません。しかし、それを修正するのはあなたに任せます。

于 2012-07-22T17:49:17.883 に答える