Rabu, 19 Desember 2012

Contoh Respon Ajax dengan dataType Text


Okay, bbarapa waktu lalu kan uda dibahas mengenai respon ajax yang tipe datanya script.. sekarang monggo diliat kalo balikan ajaxnya berupa text...
Kalo pake balikan (sekarang sya pake kata balikan aja ya, kmaren kan respon ajax bla bla bla) berupa text.. syntaxnya tuh lebi simpel n ga perlu bikin file baru dengan format .js.. cukup ditambahkan tujuan ditaronya text itu dmana.. biasanya balikan ini utk kasus2 yg lebi sederhana (ga sampe nuker2 posisi satu row, atau sgala macam aksi yg melibatkan bbrapa baris syntax).. biar ga bertele2.. yuk cekidot bekicot..


Pada suatu hari, sebuah supplier kedapatan order produk.. begitu melihat pesanannya ia harus mengetahui siapakah jasa ekspedisi yg akan mengirimkan produk drinya ke tangan konsumen sekalian memberitahu konsumen kalau pesanan tsb siap utk dikirim (biar konsumennya ga ngerasa di-PHP-in).. Nah, dri sono balikannya itu adl nama jasa ekspedisi skaligus layanan pengirimannya (entah itu kilat, biasa, ato apalah).. berikut syntaxnya...

Seperti biasa.. mulainya dari view yaaa (kyk mas2 pom bensin)...
sya menggunakan gambar truk yg kalo ditekan (onclick) fungsi bwt manggil ajaxnya bakal dijalankan..
:onclick => "var r=confirm('Apakah anda yakin pesanan ini telah dikirim?');
      if (r==true){
          terkirim(#{no});
          return false;
      }
      else{
          return false;
      }"
o ya, alasan sya make return false dsni nie.. biar formnya ga ngeload...

utk syntax di fungsi terkirim(no), hampir sama dgn pmbahasan kemaren.. cuma ada dua baris yg berubah.. yakni dataType dan success: function(data)..
$.ajax({
           url: "/pesananke_suppliers/terkirim_pesanan/new",
           dataType:"text",
           data:{
              authenticity_token: encodeURIComponent('<%= u form_authenticity_token %>'),
                idpesanan_konsumen: idpesanan_konsumen,
                idpesananke_supplier: idpesananke_supplier

            },
            beforeSend: function(data) {
              $('#loading_body').toggle();
            },
            success: function(data) {
              $('#aksi'+no).html(data);
            },
            complete: function(data) {
              $('#loading_body').toggle();
            }
        });

setelah success: function(data) kan ada $('#aksi'+no).html(data) mksudnya adl.. id #aksi inilah yg bkalan jdi tempat menampung balikannya ajax.. saya memakai span disini.. kalo kita pake field jdinya bukan .html() tapi .val()
    id="aksi<%=no%>"

syntax di atas merupakan id dari span..

sekarang kita menuju controller pesananke_supplier di method terkirim_pesanan
def terkirim_pesanan
pesananke_supplier = PesanankeSupplier.find_by_id(params[:idpesananke_supplier])
    pesanan_konsumen_detail = PesananKonsumenDetail.find_by_id(params[:idpesanan_konsumen])

    #------------update status di tabel pesanan ke supplier---------------
    pesananke_supplier.status_transaksi = '4'
    pesananke_supplier.tgl_kirim = Date.today
    pesananke_supplier.save


    #------------update status di tabel pesanan konsumen detail---------------
    pesanan_konsumen_detail.status = '4'
    pesanan_konsumen_detail.save

    #------------Pencarian Transportir-------------------
    idlayanan_pengiriman = pesanan_konsumen_detail.pesanan_konsuman.idlayanan_pengiriman
    layanan_transportir = LayananTransportir.find_by_id(idlayanan_pengiriman)
          namalayanan = layanan_transportir.nama_layanan rescue ""
          namatrans = layanan_transportir.nama_transportir rescue ""
          gabung = "#{namatrans}--#{namalayanan}"

    pesan = gabung

    respond_to do |format|
      format.text {render :text => pesan}
    end
end

perhatikan syntax di bawah ini
    pesan = gabung

    respond_to do |format|
      format.text {render :text => pesan}
    end

jadi balikan yg akan tampil itu adalah nilai yg disimpan di variabel pesan serta format.text yg beda dgn balikan script (makenya format.js).. jadi kata terkirim akan ditemukan di span dengan id #aksi


Dan begitu gmbar truk diklik, maka akan muncul balikannya "PT XXpress--BIASA" serta berbagai update kedua tabel..



Sekian tutorial dri newbie ini, semoga bermanfaat..

Salam,







Tidak ada komentar:

Posting Komentar