I tried to grab data from the API using php via ajax on my html page, when I tried to make a direct link, it works successfully, but when I try to call it using ajax on my dropdown, it seems like not ajax call ..
Here is my html
<head>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<script type="text/javascript" src="js/jquery-2.1.3.min.js">
</script>
<script type="text/javascript" src="js/script.js"></script>
<title>Penggunaan API RajaOngkir | IDMore</title>
</head>
<body>
<div class="container">
<div class="row">
<br />
<div class="twelve columns">
<h1>Hitung Ongkos Kirim</h1>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h5>Masukan Data</h5>
</div>
</div>
<div class="row">
<div class="two columns">Asal
<br />
<select id="oriprovince">
<option>Province</option>
</select></div>
<div class="two columns">
<br />
<select id="oricity">
<option>Kota</option>
</select>
</div>
<div class="two columns">Tujuan
<br />
<select id="desprovince">
<option>Provinsi</option>
</select></div>
<div class="two columns">
<br />
<select id="descity">
<option>Kota</option>
</select>
</div>
<div class="two columns">Layanan
<br />
<select id="service">
<option>JNE</option>
<option>POS</option>
<option>TIKI</option>
</select></div>
<div class="two columns">
<br />
<button id="btncheck">Cek Harga</button>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h5>Harga</h5>
</div>
<hr />
<table class="twelve columns">
<tr>
<th>Servis</th>
<th>Deskripsi Servis</th>
<th>Lama Kirim (hari)</th>
<th>Total Biaya (Rp)</th>
</tr>
<span id="resultsbox">
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</span>
</table>
</div>
</div>
</body>
Here is my javascript.
$(document).ready(function() {
loadProvinsi('#oriprovince');
loadProvinsi('#desprovince');
$('#oriprovince').change(function() {
alert('yussan');
});
$('#desprovince').change(function() {
alert('yussan');
});
});
function loadProvinsi(id) {
$('#oricity').hide();
$('#descity').hide();
$(id).html('loading...');
$.ajax({
url: 'process.php?act=showprovince',
dataType: 'json',
success: function(response) {
$(id).html('');
province = '';
$.each(response['rajaongkir']['results'], function(i, n) {
province = '<option value="n[province_id]">'+n['province']+'</option>';
<option></option>
province = province + '';
$(id).append(province);
});
},
error: function() {
$(id).html('ERROR');
}
});
}
source
share