Rei Rei - 5 months ago 11
jQuery Question

Show data with ajax onchange function

Hey guys this is my on change function

<select name="select-native-1" id="namakota" data-native-menu="false">
<option value="-1" selected="selected" disabled="disabled" >City</option>
<option value="surabaya">Surabaya</option>
<option value="jakarta">Jakarta</option>
</select>


and this is my div and onchange function

<ul class="rig columns-2" id="daftaracara" data-filter="true" data-filter-placeholder="Cari Acara">

</ul>
$(document).on('change', '#pilihkota', function () {
//event.preventDefault();
var kota = $(this).val();
//alert(kota);
$.ajax({
url: host+'/skripsi3/phpmobile/asd.php',
data: { "id": user,"kota": kota},
dataType: 'json',
success: function(data, status){

$.each(data, function(i,item){

if(item.kosong=="tidak")
{

if(item.cekfol=="ya")
{

$('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="following green followButton" style="background: green; color: white;" onclick="simpanacara('+item.idacara+')">Following</a></li>').trigger("create");

}
else if(item.cekfol=="tidak")
{

$('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="follow ui-btn-b followButton" data-theme="b" onclick="simpanacara('+item.idacara+')">Follow</a></li>').trigger("create");

}
$("#daftaracara").show();
}
else if(item.kosong=="ya")
{
$("#daftaracara").hide();
}

});

},
error: function(ts){
alert(ts.responseText);
}
});
});


In "surabaya" there is 2 result data and in "jakarta" there is 1 result data. First when i select "surabaya" the result is fine, just show 2 data, but when i choose "jakarta" after "surabaya" the result show 3 data which is 2 data from "surabaya" and 1 data from "jakarta". When i check from my php its work fine. My goal is ajax result can show the correct result. Maybe someone can give me tell me what's wrong with my code. I am really newbie with this thing. Thank you Guys and Have a nice day!!

Answer

Use empty to clear the previous values:

success: function(data, status){
                    $('#daftaracara').empty();//here clear the previous values
                    $.each(data, function(i,item){

                    if(item.kosong=="tidak")
                    {

                        if(item.cekfol=="ya")
                        {

                                $('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="following green followButton" style="background: green; color: white;" onclick="simpanacara('+item.idacara+')">Following</a></li>').trigger("create");    

                        }
                        else if(item.cekfol=="tidak")
                        {

                                $('#daftaracara').append('<li><img id="gambar" onclick="detailAcara('+item.idacara+')" onclick="detailAcara('+item.idacara+')" src="web/uploads/'+item.gambar+'" alt=""><h2>'+item.nama+'</h2>'+'<p style="font-size:18px; color:#333366;">'+item.tanggal+'</p><p style="font-size:14px; color:#00F;">Lokasi : '+item.lokasi+'</p><p style="font-size:14px; color:#F00;">Pemesanan : '+item.pesan+'</p><a data-role="button" class="follow ui-btn-b followButton" data-theme="b" onclick="simpanacara('+item.idacara+')">Follow</a></li>').trigger("create");     

                        }
                        $("#daftaracara").show();
                    }
                    else if(item.kosong=="ya")
                    {
                        $("#daftaracara").hide();
                    }

                    });

                },