Gusti Aldi Gusti Aldi - 18 days ago 5
Ajax Question

Dropdown menu with processing API with AJAX and DOM

I am getting data from API but it does not appear in my dropdown.

If I echo with

?act=showprovince
the result is there.

example.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.min.js">
</script>
<script type="text/javascript" src="js/script.js"></script>
<title>Penggunaan API RajaOngkir | IDMore</title>
<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>Provinsi</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>
</link>
</link>
</head>


process.php

require_once('idmore.php');

$IdmoreRO = new IdmoreRO();
if(isset($_GET['act'])):

switch ($_GET['act']) {

case 'showprovince':
$province = $IdmoreRO->showProvince();
echo $province;

break;
default:
# code...
break;
}
endif;


idmore.php

class IdmoreRO{
public function __construct()
{

}
//menampilkan data provinsi
public function showProvince()
{
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "http://rajaongkir.com/api/starter/province",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_HTTPHEADER => array(
"key: 3f01f13ce2b42ba983ad3f3bc4852f84"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
$result = 'error';
return 'error';
} else {
return $response;
}
}
}


script.js

$(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>';
province = province + '';
$(id).append(province);
});
},
error:function(){
$(id).html('ERROR');
}
});
}

Answer

I've checked your code and all you problem is in this line of JavaScript function loadProvinsi():

province = '<option value="'n['province_id']'">'+n['province']+'</option>';

You have missed two '+' signs!

So the correct code will be like:

province = '<option value="'+n['province_id']+'">'+n['province']+'</option>';

The rest of the code looks OK and with these two small changes the dropdowns are showing the provinces

In case you may need the complete javascript function loadProvinsi() will look like this:

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>';
                    province = province + '';
                    $(id).append(province);
                });
        },
        error:function(){
                $(id).html('ERROR');
        }
    });
}
Comments