Javascript : Ajax JSON

Pada ajax kita bisa menggunakan JSON .. gunanya adalah agar kita tidak perlu melakukan proses split ..
contohnya adalah apabila controller (disini saya menggunakan CodeIgniter) memberikan output seperti :

$nama_produk."|".$harga_produk."|".$stock_produk .

sehingga kita harus melakukan proses split ..
success:function(det){
   detail=det.split('|');
   ...
   ...

akan tetapi bila kita menggunakan dataType:'json' . kita tidak perlu melakukan proses split lagi .. dengan syarat output yg kita keluarkan dari controller sudah berbentuk array .. contoh :
output ->
$output = array('nama_produk'=>$nama_produk,'harga_produk'=>$harga_produk,'stock_produk'=>$stock_produk);
echo $output;

pada saat di javascript (.js) . yg perlu kita lakukan hanya :
success:function(det){
   var nama_produk = det.nama_produk;
   var harga_produk = det.harga_produk;
   var stock_produk = det.stock_produk;

tanpa harus menggunakan split ..

dan tidak lupa kita harus menambahkan dataType:'json' pada saat sebelum mengirimkan data apa saja yg akan di post kan .. contoh :

$.ajax({
   type:"POST",
   url:base_url+"get_detail_produk",
   dataType:'json',
   data:dataString,
   success:function(det){
      var nama_produk = det.nama_produk;
      var harga_produk = det.harga_produk;
      var stock_produk = det.stock_produk;
}

sekian . terima kasih .. :)

Javascript : serialize() - unbind()

Function javascript serialize() digunakan untuk mengirimkan data inputan yg berjumlah banyak . terdiri dari beberapa elemen akan tetapi akan kita satukan menjadi satu ..
contohnya adalah elemen bernama image_filename[] yg akan dikirim ke proses input .. karena kemungkinan akan terdapat lebih dari satu image_filename .. maka dilakukan pemanggilan function javascript serialize(). yg berguna untuk memisahkan satu satu inputan pada elemen dengan nama yg sama ..
contoh :
nama elemen : image_filename[]
class elemen : hidden_value
kemudian kita melakukan upload 3 buah image dan elemen hidden bernama image_filename[] terisi dari masing masing nama image_filename .. pada saat mengirimkan ke proses ajax . kita perlu memanggil function serialize().
contoh penggunaannya adalah buat sebuah variabel baru . kemudian pilih class elemen yg akan diambil nilainya .. dan lakukan serialize() ..

var image_filename = $('.hidden_value').serialize();

kemudian kirimkan seperti layaknya mengirimkan post ajax biasa .. secara otomatis function serialize() tersebut akan memisahkan setiap inputan dari elemen class hidden_value tadi .. sehingga yg kita perlu lakukan selanjutnya adalah menerima inputan dari ajax tadi di dalam controller (disini saya menggunakan framework CodeIgniter) .. lakukan foreach untuk proses insert data nya .. untuk mengambil masing masing nilai yg ada pada elemen bernama image_filename[]..
cara menerima nya adalah :

$image_filename = $this->input->post('image_filename');

foreach($image_filename as $nama_image)
{
     $insert = $this->produk_model->insert_image_filename($id_produk,$nama_image);
}

proses akan dilakukan sebanyak jumalh $image_filename yg ada di dalam array ..


Function javascript unbind()
Function unbind ini digunakan untuk menghapus function yg kita buat agar tidak terdapat double .. disini jika kita menggunakan append() . karena append() artinya kita menambah .. apabila kita menggunakan empty().html() . kita tidak perlu melakukan unbind()..

Pemanggilan unbind() ini dilakukan sebelum kita melakukan pemanggilan function yg kita buat dan akan kita panggil lagi ..
contoh kita telah membuat sebuah function delete() .. kemudian kita append pada saat setelah user melakukan upload image .. apabila kita tidak memanggil function unbind() . maka proses delete akan menjadi terus bertambah seiring dengan bertambah banyaknya image yg di upload ..

contoh :
var div_img_upl = "<div id='img_prev_container_um"+no_img_up_um+"'>" +
   "<input type='hidden' class='hidden_value' id='pi_path_um"+no_img_up_um+"' name='pi_path_um[]' value=''/>" +
   "<div id='img_prev_um"+no_img_up_um+"'>" +
   "<img src='"+base_url+"addscripts/ubah_ukuran_gambar.php?image=../../"+msg[1]+"&lebar=150&tinggi=150&"+t.getTime()+"'>" +
   "</div>" +
   "<a href='#' class='del_img_um_ins'>delete gambar resep</a>" +
"</div>";

$('#img_um').append(div_img_upl);
$("#img_prev_container_um"+no_img_up_um+"").fadeIn();
$("#pi_path_um"+no_img_up_um+"").val(msg[1]);
$('#no_img_up_um').val(no_img_up_um);
$('.del_img_um').unbind('click'); //salah satu fungsi yg terdapat pada delete()
$('.del_img_um_ins').unbind('click'); //salah satu fungsi yg terdapat pada delete()
delete();

fungsi nya adalah untuk mengatasi penumpukan function pada saat kita menggunakan append()