0

一部の選択ボックスを自動入力するために使用されている JSON ファイルがあります。ときどき (エラーを再現できません。ランダムに表示されます)、ページを更新するまでドロップダウンの項目が表示されません。

コンソールやログなどを確認しましたが、ファイルは正常にロードされており、エラーは表示されておらず、少し途方に暮れています。

何か案は？

JSON とそれを読み取るスクリプトの例を以下に示します。

ありがとう。

"radAbsorbed" : [
    {
        "value" : "rad",
        "name" : "Rad(rd)"
    },
    {
        "value" : "millirad",
        "name" : "Millirad(mrd)"
    }]

そしてスクリプト：

<script>
//        JSON:
//        The key is the class identifier, temp, area etc etc
//        Value is being used for both ID and Value when the list is being populated
    $.getJSON('JSON/conversionJSON.json', function(data){

        console.log(data);
        //for testing output only
        var list = $("<ul />");

        $.each(data, function (key, conversions) {
            console.log(key + ":" + conversions);

            $.each(conversions, function (index, conversion) {
                console.log("<li>Name: " + conversion.name + " :Value: " + conversion.value + "</li>");

                if(key == "<?php echo $conversionType ?>"){

                    $("#from").append('<option class="'+key+'" id="'+conversion.value+'" value="'+conversion.value+'">'+conversion.name+'</option>');
                    //testing output
                    var elem = $("<li>Name: " + conversion.name + " :Value: " +     conversion.value + "</li>").appendTo(list);
                }
            });
        });
        //$("#testJSON").html(list);
    });
</script>

編集: スクリプトを更新しました。

$(document).ready(function(){

$.getJSON('JSON/conversionJSON.json', function(data){

    console.log(data);
    //for testing output only
    var list = $("<ul />");

    $.each(data, function (key, conversions) {
        console.log(key + ":" + conversions);

        $.each(conversions, function (index, conversion) {
            console.log("<li>Name: " + conversion.name + " :Value: " + conversion.value + "</li>");

            if(key == "<?php echo $conversionType ?>"){

                $("#from").append('<option class="'+key+'" id="'+conversion.value+'" value="'+conversion.value+'">'+conversion.name+'</option>');
                $("#to").append('<option class="'+key+'" id="'+conversion.value+'" value="'+conversion.value+'">'+conversion.name+'</option>');
                //testing output
                var elem = $("<li>Name: " + conversion.name + " :Value: " + conversion.value + "</li>").appendTo(list);
            }
        });
    });
    //$("#testJSON").html(list);
});
});

編集：助けてくれてありがとう、それはうまく機能しているようで、私の側のアマチュアの間違いのように見えました。

4

1 に答える 1

1

問題は、ドキュメントの準備が整う前にスクリプトが実行されることがあることだと思います。

ドキュメント対応関数でコードをラップしてみてください。

$(function() {
    $.getJSON(...)
    // ...
});

これにより、影響を受ける要素が作成される前にコードが実行されないようになります。たとえば、ID を持つ要素fromが作成される前にコードが実行された場合、$('#from')どの要素とも一致せず、機能しません。

ドキュメント対応関数でラップすると、コードが実行前に要素が作成されるまで待機するようになります。

または、タグを頭の外に移動して、HTML<script>の要素の直後に配置することもできます。#fromこれにより、読み込みが少し速くなる場合があります。

于 2013-07-17T16:04:53.190 に答える