TypeError:loaddata为null

时间:2014-11-20 13:38:52

标签: javascript html firebug typeerror

我的结果代码有问题。 firefox中的firebug提到TypeError:loaddata为null为错误。这是我的代码:

detail.html

    <!DOCTYPE html>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TelkomVision Mobile</title>
    <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="demo/css/jqm-demos.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="demo/js/jquery.mobile.demos.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="javascript/detail_pemasok.js"></script>
</head>
<body>

<div id="detail_pemasok_page" data-role="page" class="jqm-demos">

    <div data-role="header" data-position="fixed">
        <a href="datapemasok.html" data-ajax="false" data-icon="arrow-l" data-theme="b" data-transition="slide">Back</a>
        <h1>Detail News</h1>
    </div>



    <div data-role="content">

            <div id="loading_panel" style="display:none;text-align:center;">
                <b>Please Waiting...!</b>
                <br><br>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 100%;"></div>
                </div>
            </div>

            <div id="not_found" style="display:none;text-align:center;color:#F00;">
                <div class="alert alert-danger">
                    <strong>Data not found...! Please try again</strong>
                </div>
                <br><br><br>
                <a href="index.html" data-role="button" data-inline="true" data-icon="check" data-theme="b" data-ajax="false">Back</a>
            </div>



            <div id="conn_failed" style="display:none;text-align:center;color:#F00;">
                <div class="alert alert-danger">
                    <strong>Connection Failed...! Please try again</strong>
                </div>
                <br><br><br>
                <a href="index.html" data-role="button" data-inline="true" data-icon="check" data-theme="b" data-ajax="false">Back</a>
            </div>



            <div id="allData" style="display:none;">
                <p style="font-weight:bold;">Nama Perusahaan : </p>
                <div id="nama_perusahaan" class="alert alert-info"></div>
                <p style="font-weight:bold;">Alamat : </p>
                <div id="alamat" class="alert alert-info"></div>
                <p style="font-weight:bold;">Telepon : </p>
                <div id="telp" class="alert alert-info"></div>
                <p style="font-weight:bold;">Kodepos : </p>
                <div id="kodepos" class="alert alert-info"></div>
                <p style="font-weight:bold;">Nama Direksi : </p>
                <div id="nama_direksi" class="alert alert-info"></div>
                <p style="font-weight:bold;">Nilai Saham : </p>
                <div id="nilai_saham" class="alert alert-info"></div>
                <p style="font-weight:bold;">Nama Stakeholder : </p>
                <div id="nama_stakeholder" class="alert alert-info"></div>
                <p style="font-weight:bold;">Pekerjaan Stakeholder : </p>
                <div id="pekerjaan_stakeholder" class="alert alert-info"></div>
                <p style="font-weight:bold;">Kewarganegaraan Stakeholder : </p>
                <div id="kewarganegaraan_stakeholder" class="alert alert-info"></div>
                <p style="font-weight:bold;">Alamat Stakeholder : </p>
                <div id="alamat_stakeholder" class="alert alert-info"></div>
                <p style="font-weight:bold;">Komoditas : </p>
                <div id="komoditas" class="alert alert-info"></div>
                <p style="font-weight:bold;">Lokasi : </p>
                <div id="lokasi" class="alert alert-info"></div>
                <p style="font-weight:bold;">Desa : </p>
                <div id="desa" class="alert alert-info"></div>
                <p style="font-weight:bold;">Kecamatan : </p>
                <div id="kecamatan" class="alert alert-info"></div>
                <p style="font-weight:bold;">Kabupaten / Kota : </p>
                <div id="kabkota" class="alert alert-info"></div>
                <p style="font-weight:bold;">Provinsi : </p>
                <div id="prov" class="alert alert-info"></div>
                <p style="font-weight:bold;">Luas (Ha) : </p>
                <div id="luas" class="alert alert-info"></div>
                <p style="font-weight:bold;">Jangka Waktu Penyelidikan : </p>
                <div id="jangka_wkt_p" class="alert alert-info"></div>
                <p style="font-weight:bold;">Jangka Waktu Ekspedisi : </p>
                <div id="jangka_wkt_eks" class="alert alert-info"></div>
                <p style="font-weight:bold;">Jangka Waktu Studi : </p>
                <div id="jangka_wkt_studi" class="alert alert-info"></div>
                <p style="font-weight:bold;">Status Pemasok : </p>
                <div id="status_pemasok" class="alert alert-info"></div>
                <p style="font-weight:bold;">Tanggal Pengesahan : </p>
                <div id="tgl_pengesahan" class="alert alert-error" style="text-align:left;"></div>
            </div>


    </div><!-- /content -->


   <div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
        <ul data-role="listview" data-theme="d" data-divider-theme="a" class="jqm-list">
            <li data-role="list-divider">TelkomVision Menu</li>
             <li><a href=".html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/search.png" class="ui-li-icon ui-corner-none">Login</a></li>
            <li><a href=".html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/search.png" class="ui-li-icon ui-corner-none">Data Pemasok</a></li>
            <li><a href="addpemasok.html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/search.png" class="ui-li-icon ui-corner-none">Tambah Data Pemasok</a></li>
            <li><a href="promo.html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/promo.png" class="ui-li-icon ui-corner-none">Update Data Pemasok</a></li>

        </ul>
    </div><!-- /panel -->



</div><!-- /page -->
</body>
</html>

这是js脚本:

    $(document).ready(function() {
    $('#loading_panel').show();

    var noIup = getUrlVars()["no_iup"];
    var serviceURL = "http://localhost:81/testmobile/php/";
    $.ajax({
                type : 'GET',
                url : serviceURL + 'detail_pemasok.php?no_iup='+noIup,
                async: true,
                beforeSend: function(x) {
                    if(x && x.overrideMimeType) {
                         x.overrideMimeType("application/j-son;charset=UTF-8");
                    }
                },
                dataType : 'json',
                success : function(data){
                        var GetData = data.item;
                        if(GetData==''){
                            $('#loading_panel').hide();
                            $('#not_found').show();
                        }else{

                            $('#loading_panel').hide();
                            $('#allData').show();

                            $.each(GetData, function(index, loaddata) {
                                var Nama_perusahaan = loaddata.nama_perusahaan;
                                var Alamat = loaddata.alamat;
                                var Telp = loaddata.telp;
                                var Kodepos = loaddata.kodepos;
                                var Nama_direksi = loaddata.nama_direksi;
                                var Nilai_saham = loaddata.nilai_saham;
                                var Nama_stakeholder = loaddata.nama_stakeholder;
                                var Pekerjaan_stakeholder = loaddata.pekerjaan_stakeholder;
                                var Kewarganegaraan_stakeholder = loaddata.kewarganegaraan_stakeholder;
                                var Alamat_stakeholder = loaddata.alamat_stakeholder;
                                var Komoditas = loaddata.komoditas;
                                var Lokasi = loaddata.lokasi;
                                var Desa = loaddata.desa;
                                var Kecamatan = loaddata.kecamatan;
                                var Kabkota = loaddata.kabkota;
                                var Prov = loaddata.prov;
                                var Luas = loaddata.luas;
                                var Jangka_wkt_p = loaddata.jangka_wkt_p;
                                var Jangka_wkt_eks = loaddata.jangka_wkt_eks;
                                var Jangka_wkt_studi = loaddata.jangka_wkt_studi;
                                var Status_pemasok = loaddata.status_pemasok;
                                var Tgl_pengesahan = loaddata.tgl_pengesahan;
                                $('#nama_perusahaan').text(nama_perusahaan);
                                $('#alamat').text(alamat);
                                $('#telp').text(telp);
                                $('#kodepos').text(kodepos);
                                $('#nama_direksi').text(nama_direksi);
                                $('#nilai_saham').text(nilai_saham);
                                $('#nama_stakeholder').text(nama_stakeholder);
                                $('#pekerjaan_stakeholder').text(pekerjaan_stakeholder);
                                $('#alamat_stakeholder').text(alamat_stakeholder);
                                $('#komoditas').text(komoditas);
                                $('#lokasi').text(lokasi);
                                $('#desa').text(desa);
                                $('#kecamatan').text(kecamatan);
                                $('#kabkota').text(kabkota);
                                $('#prov').text(prov);
                                $('#luas').text(luas);
                                $('#jangka_wkt_p').text(jangka_wkt_p);
                                $('#jangka_wkt_eks').text(jangka_wkt_eks);
                                $('#jangka_wkt_studi').text(jangka_wkt_studi);
                                $('#status_pemasok').text(status_pemasok);
                                $('#tgl_pengesahan').text(tgl_pengesahan);

                            });
                        }
                },
                error : function(){
                    $('#loading_panel').hide();
                    $('#conn_failed').show();
                }
        });
});

function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

1 个答案:

答案 0 :(得分:1)

在评论中你说过从Ajax调用返回的数据是

Object { nama_perusahaan="1", alamat="1", telp=null, more...}

并且你正在循环它就像它是一个数组,实际上你正在循环对象中的键。

$.each(GetData, function(index, loaddata) {
    var Nama_perusahaan = loaddata.nama_perusahaan;
    var Alamat = loaddata.alamat;

那是错的!如果你在每个内部添加了console.log(loaddata)行,你会看到

> "1"
> "1"
> null
> ERROR

为了使您的代码正常工作,您的JSON需要看起来像

[{ nama_perusahaan:"1", alamat:"1", telp:null}] 

要使代码正常工作,请删除每个代码并仅引用对象的属性。

var loaddata = GetData;
var Nama_perusahaan = loaddata.nama_perusahaan;
var Alamat = loaddata.alamat;