Bagaimana menampilkan hasil data menggunakan typehead bootstrap multiple field ?

Comments

• labalaba

  December 2017 edited December 2017

  ini ndak ngomongin framework atau apa ...
  
  dipahami dulu cara kerja javascript nya yg berhubungan ama html.
  
  contoh form + js kaya begini :
  
  [A]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input"><br>
  </div>
  
  <script>
  var ip=document.getElementsByClassName("input");
  for(index in ip) alert("index="+index+" | element="+ip[index].tagName);
  </script>
  ------------------------------------------------------------
  
  coba elo jalankan, alert apa yg keluar ? perhatikan baik-baik.
  
  hanya ada SATU input yg pake class "input", dengan TAG / element INPUT.
  itu terbaca saat index = 0 ... index lainnya tidak menunjuk ke object element
  
  
  [B]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input"><br>
  <input type="text" class="input"><br>
  </div>
  
  <script>
  var ip=document.getElementsByClassName("input");
  for(index in ip) alert("index="+index+" | element="+ip[index].tagName);
  </script>
  ------------------------------------------------------------
  
  coba elo jalankan, alert apa yg keluar ? perhatikan baik-baik.
  
  hanya ada DUA input yg pake class "input", dengan TAG / element INPUT.
  itu terbaca saat index = 0 dan 1 ... index lainnya tidak menunjuk ke object element
  
  JADI ...
  kalo elo mau melekatkan "SESUATU" yg diambil pake method "Elements" (pake S, multi / banyak, karena ada getElementById yg tanpa S, karena HANYA bisa ambil 1 element, itu mengapa ID element tidak boleh kembar), hanya elo proses saat index adalah angka.
  
  
  [C]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input" value="123"><br>
  <input type="text" class="input" value="456"><br>
  </div>
  
  <script>
  var ip=document.getElementsByClassName("input");
  for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
  </script>
  ------------------------------------------------------------
  
  coba jalankan, lalu clik pada salah satu input text yg ada.
  
  !isNaN(...) ... hanya mem-proses yg index nya angka.
  .onclick=function() ... melekatkan fungsi ke event onclick di element yg dimau
  
  karena saat awal yg terbaca hanya ada index 0 & 1 ...
  ya event onclick nya cuma nempel di 2 element itu.
  
  
  sampai sini masih paham yah ?
• labalaba

  December 2017 edited December 2017

  [D]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input" value="123"><br>
  <input type="text" class="input" value="456"><br>
  </div>
  
  <script>
  function tambah() {
  var container=document.getElementById("container");
  var container_html=container.innerHTML;
  
  container_html=container_html+'<input type="text" class="input" value="abc"><br>'+"\n";
  
  container.innerHTML=container_html;
  }
  
  var ip=document.getElementsByClassName("input");
  for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
  </script>
  ------------------------------------------------------------
  
  sekarang ada fungsi tambah().
  
  coba elo jalankan.
  klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
  
  lalu klik button tambah ...
  ada input text baru ?
  coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
  
  
  [E]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input" value="123"><br>
  <input type="text" class="input" value="456"><br>
  </div>
  
  <script>
  function tambah() {
  var container=document.getElementById("container");
  
  var input_text=document.createElement("INPUT");
  input_text.setAttribute("type", "text");
  input_text.setAttribute("class", "input");
  input_text.value="abc";
  
  container.appendChild(input_text);
  container.appendChild(document.createElement("BR"));
  }
  
  var ip=document.getElementsByClassName("input");
  for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
  </script>
  ------------------------------------------------------------
  
  fungsi tambah() tetep ada, tapi bukan pake .innerHTML.
  pakenya createElement().
  
  coba elo jalankan.
  klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
  
  lalu klik button tambah ...
  ada input text baru ?
  coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
  
  
  apa beda hasil dari [D] dan [E] ?
  
  bisa elo logika kenapa beda ?
  apa sebabnya ?
• labalaba

  December 2017 edited December 2017

  [F]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input" value="123"><br>
  <input type="text" class="input" value="456"><br>
  </div>
  
  <script>
  function tambah() {
  var container=document.getElementById("container");
  
  var input_text=document.createElement("INPUT");
  input_text.setAttribute("type", "text");
  input_text.setAttribute("class", "input");
  input_text.value="abc";
  
  input_text.onclick=function() {alert(this.value);};
  
  container.appendChild(input_text);
  container.appendChild(document.createElement("BR"));
  }
  
  var ip=document.getElementsByClassName("input");
  for(index in ip) if(!isNaN(index)) { ip[index].onclick=function() {alert(this.value);}; }
  </script>
  ------------------------------------------------------------
  
  fungsi tambah() tetep ada, tapi bukan pake .innerHTML.
  pakenya createElement().
  di dalamnya juga ada definisi event onclick buat element yg baru.
  
  coba elo jalankan.
  klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
  
  lalu klik button tambah ...
  ada input text baru ?
  coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
  
  
  kira-kira bisa menyimpulkan kenapa koding elo bermasalah ?
• labalaba

  December 2017 edited December 2017

  terakhir ...
  
  [G]
  ------------------------------------------------------------
  <input type="button" value="tambah" onclick="tambah()">
  <div id="container">
  <input type="text" class="input" value="123" onclick="alert(this.value);"><br>
  <input type="text" class="input" value="456" onclick="alert(this.value);"><br>
  </div>
  
  <script>
  function tambah() {
  var container=document.getElementById("container");
  var container_html=container.innerHTML;
  
  container_html=container_html+'<input type="text" class="input" value="abc" onclick="alert(this.value);"><br>'+"\n";
  
  container.innerHTML=container_html;
  }
  </script>
  ------------------------------------------------------------
  
  kembali pake innerHTML.
  tapi dgn definisi onclik yg sudah dari awal di definisikan di element nya.
  bukan dilekatkan setelah element ada.
  
  saat tambah element baru, onclick juga di definisikan langsung di string tambahan element nya.
  
  
  coba elo jalankan.
  klik input text 2 yg awal ... bisa ? event onclick nya jalan ?
  
  lalu klik button tambah ...
  ada input text baru ?
  coba elo klik ke SEMUA input text yg sekarang ada ... bisa ? event onclick nya jalan ?
  
  
  bisa menyimpulkan kenapa kalo model kaya begini pake innerHTML juga bisa jalan ?
• setiadhi

  December 2017

  lagi di test A ampe G
• labalaba

  December 2017

  dipahami yah ... itu levelnya lebih medium buat pemahaman javascript ...
  
  tapi sering bikin salah logika.
• labalaba

  December 2017

  [A] [B] & [C] ... gw anggap sudah jelas, dasar banget.
  
  
  [D] ...
  karena .innerHTML itu hanya baca "STRING" dari isi element.
  semua event ditinggal / tidak dibaca
  
  jadinya, saat dikembalikan ke .innerHTML, ya yg "nempel" cuma "STRING"
  semua event hilang.
  
  mau pake model
  element.innerHTML+= "... element baru ...";
  ndak ngaruh, sama saja.
  
  
  [E] ...
  langkahnya sudah setengah bener ... tapiiiii ...
  
  pelekatan event onclick HANYA ADA DI AWAL, saat halaman dibuka.
  otomatis hanya akan dilekatkan ke element yg index 0 & 1.
  
  kalo ada element baru, otomatis ya ndak ada proses pelekatan event onclick di element yg baru.
  kalo ada element baru, ya harus melekatkan sendiri / lagi event onclick di element itu
  
  
  [F] ...
  sudah bener ...
  
  event onclick dilekatkan ke element yg baru.
  
  
  [G] ...
  kalo ini, tidak ada proses pelekatan event onclik setelah element ada.
  
  memang dari awal onclik nya ditulis gabung dengan string element.
  jadi saat dibaca pake innerHTML, ya definisi oncliknya juga ada, sebagai "STRING".
  
  tapi saat tambah element baru, onclick baru tetep harus ditulis juga.
• labalaba

  December 2017 edited December 2017

  ... kalo liat model koding elo ...
  
  elo definisi element baru pake innerHTML.
  
  [1] pelekatan event hanya ada di awal, di element yg baru tidak ada (baca [E])
  
  [2] elo nulis element baru pake innerHTML, ya mau ndak mau elo pake cara [G], tulis event langsung di string html element baru nya.
• setiadhi

  December 2017

  terima kasih om labalaba atas elmunya
  
  iya aq pke cara G, untuk event onclick memang lancar2 saja,
  namun typeahead tidak berjalan untuk form tambah selanjutnya
  
• labalaba

  December 2017 edited December 2017

  event nya elo lekatkan di string element baru ...
  
  event apa to yg elo pake ?
  coba baca koding elo sendiri baik-baik.
  sama saja.
  
  iya, bukan onclick.
  
  .on('typeahead:selected', function(event, datum)
  
  itu kan ?
  itu event apa ?
  
  on... ?
  
  html cuma punya event ini :
  https://www.w3schools.com/jsref/dom_obj_event.asp
• setiadhi

  December 2017 edited December 2017

  cuma panggil class="pegawai-typeahead"
• labalaba

  December 2017 edited December 2017

  
  
  kalo liat modelnya event yg cocok itu onkeyup.
  
  tapi mendingan elo buatkan fungsi baru utk pencariannya.
  model awal elo juga elo ubah pake fungsi yg sama.
  data juga elo keluarkan dari definisi fungsi awal elo, biar bisa dipake bersama.
  
  jadi kira-kira begini :
  
  var data=[
  ...
  ];
  
  function searchdata(...) {
  ...
  }
  
  // definisi fungsi awal elo di sesuaikan pake data dan fungsi pencarian yg sama
  
  
  
  lalu di innerHTML elo :
  
  ... <input type="text" class="pegawai-typeahead" id="nama" name="nama[]" value="" placeholder="nama" onkeyup="searchdata(...)"> ...
• setiadhi

  December 2017

  tak coba dulu
• labalaba

  December 2017 edited December 2017

  btw ...
  
  definisi ini di koding awal elo ...
  
  $('#nip').val(datum.nip);
  $('#jabatan').val(datum.jabatan);
  $('#golongan').val(datum.golongan);
  
  mestinya bermasalah.
  itu mengganti semua element yg ber-ID tsb.
  
  tapi ID elo kembar semua.
  yg terambil / terupdate pasti hanya yg PERTAMA.
  
  elo belum liat salahnya karena kebetulan script tambah elo ndak jalan.