2013-06-08

Ask2Solve : ajax - json dalam prog sebenarnya.

mari balik ke "ajax-json" yang kutulis sebelumnya. Dan mari kita langsung masuk ke dalam pertanyaan dan penggunaan. Tidak semua tulisan akan saya masukkan ke script. Hanya intinya yaitu select box dan kotak timana harga muncul. Sekedar info ada beberapa hal yang perlu diketahui sebelum menjawab dan menyelesaikan masalah ini. Anggap saja ini catatan buat kita
- terdapat 4 paket (ada di atas)
- saat di klik maka harga dibawah akan update
- bentuk update sebenarnya ada 2 yaitu update tampilan harga (Rp. 3 500 000) dan update di input hidden.
- agar tidak menyulitkan maka input hidden akan saya tampilkan (jadikan text)
- sekalian bonus untuk yang bertanya cara muncul sub select kayak propinsi lalu hadir kota. Saya akan munculkan

dalam script contoh akan saya tampilkan:
* select yang jadi pengendali (berisi paket 1-4)
* kotak buat nulis harga (div)
* input buat nulis harga (input=text)
* select buat tambahan aja

Dalam tulisan ini kita akan memakai
* AJAX
* POST
* JSON
* INPUT
* SELECT
* APPEND

alasan kenapa saya tulis di atas adalah biar kalau dicari di internet / Google nunjuknya ke mari!!
*okay itu curang*
pertama buka codepaste ini
menulis ulang disini takutnya hanya merusak tampilan.. perhatikan aja scriptnya disana. pertama saya akan bahas dari form awalnya kemudian javascript en apa yang dikirim

FORM

perhatikan bahwa script ini memiliki tampilan yang saya katakan di atas yaitu dari select, div, input dan button. Kenapa ada button karena saya mengajarkan langkah agar tidak auto dahulu, bila ingin jadi auto cukup pasang / gunakan change.
$(".paket").change(function(){
mulaiAjax()
});
letakkan ini di dalam script ya..

Intinya pilih select yg di inginkan dan sisanya akan muncul hasilnya..

JAVASCRIPT

disini ngak ada yang rumit2.. hanya menunjukkan pengiriman data pake ajax ($.ajax) lalu proses mengembalikannya!! bila muncul error, liat jquery yang kamu gunakan!! atau php yang akan di  proses !! kebetulan yang diproses ada di paling atas..
Setelah dapet.. tinggal distribusikan saja!!

PHP YANG DIPROSES

asumsikan kalau kita pake database dan hasilnya dapat. Dalam script saya mencarinya di array jadi sesuaikan kebutuhan anda ya!! Berikutnya kita juga ingin memasukkan select yang ada dibawah.. namun caranya beda neh.. perhatikan saya pake echo dan menangkap isinya dengan ob_start!!
hasil echo itu akan masuk kedalam variabel.. Setelah masuk kita akan kirim memakai json_encode!! json encode ini yang akan dibaca oleh JS di atas

CARA PAKAI 

langsung anda copy paste yang ada di atas ( link ), lalu jalankan. 
  • kemudian pilih salah satu paket. 
  • tekan button
  • lihat hasilnya.. 
  • check isi dari select terakhir. Tadinya kosong sekarang udah ada isinya. Letakkan pada option random (jangan yang teratas)
  • Lalu pilih lainnya dan tekan tombol
  • perhatikan perubahan pada hasil sebelumnya terutama pada select terakhir
Selamat belajar.. ada pertanyaan silakan tulis dibawah 

1 komentar:

Andres ZeroCross mengatakan...

Jos gandos om.... (y)