1

これは私の JavaScript コードです。サーバーから受け取ったデータを使用して HTML で動的リストを作成しようとしています。データのタイプは「json」です

私のJavascriptスニペット

function addBooks(data) { // USing DOM to populate the tables 


    //var  newdata=document.getElementById('addBooks');
    //newdata.setattribute()

    //get the unordered list

    var newdata = document.getElementById('addBooks');
    var parent = document.getElementById('gBookList');
    //removeChildrenFromNode(parent);

    //create list divider
    var listdiv = document.createElement('li');
    listdiv.setAttribute('id', 'gBookListDiv');
    listdiv.innerHTML = ("Books Found:");
    parent.appendChild(listdiv);
    // (this is where the first error happens)

    //create dynamic list

    for (i = 0; i < data.length; i++) {
        // (this is where the second error happens)



        //create each list item 
        var listItem = document.createElement('li');
        listItem.setAttribute('id', 'gBookListItem');
        parent.appendChild(listItem);
        //var link = document.createElement('a');
        //link.setAttribute('onclick','displayBook(data[i])');
        //link.setAttribute('href','#FindBook)');
        //listItem.appendChild(link);
        var pic = document.createElement('img');
        pic.setAttribute('src', data[i].pictureURL);
        pic.setAttribute('width', '80px');
        pic.setAttribute('height', '100px');
        pic.setAttribute('style', 'padding-left: 10px');
        link.appendChild(pic);
        var brk = document.createElement('br')
        link.appendChild(brk);
        var title = document.createElement('p');
        title.innerHTML = data[i].title;
        title.setAttribute = ('style', 'float:right');
        link.appendChild(title);
        var author = document.createElement('p');
        author.innerHTML = data[i].author;
        link.appendChild(author);
    }
    var list = document.getElementById('gBookList');
    // $(list).listview("refresh");
}

/*function removeChildrenFromNode(node){
            while (node.hasChildNodes()){
                node.removeChild(node.firstChild);
            }
        //}*/

私のhtmlコードは

<!DOCTYPE html>

<head>
   <script ...> 
 <head>                  
<body onLoad="addBooks()">
    <div id="addBooks" class="row-fluid">
        <div id="gBookList">
        </div>
    </div>
</body>
</html>

次のエラーが表示され続け、リストにデータを入力できません。クロムを使用しています

1) キャッチされていない TypeError: null のメソッド 'appendChild' を呼び出せません
2) キャッチされていない TypeError: 未定義のプロパティ 'length' を読み取れません

alert box を使用してデバッグすると、.length コマンドが正しい整数 (json オブジェクトの量) を返すため、なぜこれが発生するのかわかりません。

それを呼び出す関数

$.ajax({
    type: 'GET',
    url: ........,
    dataType: "json",
    complete: function (xhr, statusText) {
        alert(xhr.status);
    },
    success: function (data, textStatus, jqXHR) {
        alert(JSON.stringify(data));
        window.location.replace("Page2_updated.html");
        addBooks(data); // Passing JSON to be replaced on page
    },

    function (data, textStatus, jqXHR) {
        alert(data);
        alert('error');
    },

});

編集

このフォーラムでアドバイスを受けた後、HTML ファイルを次の構造に変更しました。

<html>
<head>
</head>
<body>
<div id="1" "display:block">
</div>
<div id="2" "display:none">  // no onLoad() anymore!!
</div>
</body>
</html>

この部分を呼び出し関数で編集しました

 $.ajax({
        type: 'GET',
        url: ........,
        dataType: "json",
        complete: function (xhr, statusText) {
            alert(xhr.status);
        },
        success: function (data, textStatus, jqXHR) {
            alert(JSON.stringify(data));
            if(document.getElementById(1).style.display == "block"){ 
                document.getElementById(1).style.display = "none"; 
                document.getElementById(2).style.display = "block"; }
            addBooks(data); // Passing JSON to be replaced on page
        },

        function (data, textStatus, jqXHR) {
            alert(data);
            alert('error');
        },
    });

しかし、私はまだ次のエラーが発生します Uncaught TypeError: Cannot call method 'appendChild' of null Uncaught TypeError: Cannot read property 'length' of undefined

4

5 に答える 5

2

リストを作成するコードの実際のバージョンを次に示します。自分のバージョンと比較して、マークアップとコードの両方で間違いを犯した場所を確認します。

2 番目のエラーの原因は、addBooks 関数に渡された誤ったデータ (ほとんどの場合 null) であるため、修正する必要があります。

Chrome と Firebug には、ブレークポイントを備えた優れた JavaScript デバッガーがあるため、それを利用して問題を特定します。

http://jsfiddle.net/tgth2/

編集：

あなたの問題は、あなたのコメントと質問への更新の後、きらきらと明白です：

  1. 最初のページはサービスから JSON データを読み込んでいますが、その後、ブラウザーを新しいページに送信します (直後にwindow.location.replace("Page2 Updated.html");呼び出していることに注意してください。ただし、ブラウザーが既に別のページに移動しているため、そのコードは実行されません。addBooks(data);
  2. 2 番目のページが<body onload="addBooks();">含まれているため、データを使用して関数が呼び出されnullます。これが問題の原因です。

解決：

一番の提案は、AJAX 呼び出しだけでなく、他のすべての作業に jQuery を使用することです。

次に、ブラウザを別のページにリダイレクトしても意味がないため、ajax 呼び出しと結果を 1 つのページに表示する必要があります。JavaScript は常に単一のページのコンテキストで機能するためです。次のようなことをするとすぐwindow.location.replace(..)に、現在のページで行ったすべてが失われます。

これらの変更を行うと、リストが正常に読み込まれることがわかります。

于 2012-07-24T00:31:08.157 に答える
0

ループ内の次の行は、同じ ID を持つ複数のリスト アイテムを作成します。

listItem.setAttribute('id','gBookListItem');

削除してみてください-必要ないと思います。

于 2012-07-24T00:11:20.180 に答える
0

addBooks()なしでコードのどこかで誤って呼び出している可能性はありますかdata?

于 2012-07-24T00:36:40.140 に答える
0

それはエラーです:

title.setAttribute=('style','float:right');

行う：

var title = document.createElement('p');
    title.innerHTML = data[i].title;
    title.style.cssFloat = 'right';
link.appendChild(title);

と

var pic = document.createElement('img');
    pic.src = data[i].pictureURL;
    pic.width = '80px';
    pic.height = '100px';
    pic.style.paddingLeft = '10px';
link.appendChild(pic);

等......

于 2012-07-24T00:16:15.230 に答える
0

私はそれを必要最小限にlink切り詰めようとしましたが、appendChild を呼び出すときにエラーが発生するのは、未定義であるという事実が原因であると確信しています。これは確かに、Firebug のコンソールで見つけた最初のエラーです。次のベアボーン シーケンスは Firefox で機能します (申し訳ありませんが、Chrome を持っていません)。

    var json =[
        {"pictureURL":"/test1.jpg/","title":"test1"},
        {"pictureURL":"/test2.jpg/", "title":"test2"},
        {"pictureURL":"/test3.jpg", "title":"test3"}
    ];
    function displayBook(title){
        alert(title);
        return false;
    }
    function addBooks(data) {
        var  newdata=document.getElementById('addBooks');
        var parent = document.getElementById('gBookList');
        var listdiv = document.createElement('li');
        listdiv.id = 'gBookListDiv';
        listdiv.innerHTML = "Books Found:";
        parent.appendChild(listdiv);
        for(var i=0;i<data.length;i++){
            var listItem = document.createElement('li');
            listItem.id = 'gBookListItem-' + i;
            parent.appendChild(listItem);
            var link = document.createElement('a');
            link.id = listItem.id + "-link";
            link.href = '#FindBook';
            link.innerHTML = data[i].title;
            listItem.appendChild(link);
            link.setAttribute("onclick", "return displayBook('" + data[i].title + "');");
            var pic = document.createElement('img');
            pic.src = data[i].pictureURL;
        }
        var list = document.getElementById('gBookList');
    }

私はこの回答JavaScriptから発見しました： onclickハンドラーを追加するにはsetAttributeを使用しなければならなかったjQueryを使用してまたは使用せずにonclickの値を変更します。idsetAttributeを呼び出さずにadeneoで言及されているように、他の属性を直接追加することに慣れています。

于 2012-07-24T01:18:01.637 に答える