I have a problem with my result's code. firebug in firefox mention TypeError: loaddata is null as the error. Here is my code :
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>
this is the js script :
$(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;
}
In the comments you said that the data returned from the Ajax call is
and you are looping it like it is an array, in reality you are looping over the keys in the object.
That is wrong! If you added a console.log(loaddata) line inside of the each, you would see
In order for your code to work, your JSON would need to look like
To make your code work, get rid of the each and just reference the properties of the object.