Script mudah membuat simple lookup dengan popup Colorbox
Script lookup berfungsi untuk mengambil data tertentu dari list data.
Bagi yang mencari scr ipt simple lookup dengan popup colorbox:
1. Pertama-tama buat table pegawai di database test
CREATE TABLE `pegawai` ( `no_int` int(5) NOT NULL auto_increment, `NIP` char(5) collate latin1_general_ci default NULL, `nama` varchar(30) collate latin1_general_ci NOT NULL, `umur` int(2) NOT NULL, `alamat` varchar(100) collate latin1_general_ci NOT NULL, PRIMARY KEY (`no_int`) );
2. Create file index.html dengan code berikut:
<html> <head> <title>Searching By Ajax</title> <link rel="stylesheet" href="css/colorbox.css" /> <script src="js/jquery.min.js"></script> <script src="js/jquery.colorbox.js"></script> <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements$(".ajax").colorbox({width:'650px',height:'450px'}); }); </script><script language="javascript">var my_variable = new Array(); // for example function passingToParent(){ arrayOfStrings = my_variable[0].split(','); for (var i=1; i < my_variable.length; i++) { $('#' + arrayOfStrings[i-1]).val(my_variable[i]); } // single form //parent.$.fn.colorbox.close();// framework form jQuery.colorbox.close();; }</script> <style> body,table,input{ font-size:12px } </style> </head> <body> <form action="" method="post"> Pilih Pegawai: <input type="text" id="no_int" name="no_int" size="5" readonly /> <input id="id" type="text" name="pegawai" size="10" readonly /> <input type="text" id="nama_pegawai" name="nama_pegawai" size="50" readonly /> <a href="daftar_pegawai.php" class="ajax" onClick="my_variable[0]='no_int,id,nama_pegawai'"> <img src="button_search.png" border="0" /></a> <small id="divAlertPegawai"></small> </form> </body> </html>
3. Create file daftar_pegawai.php dengan code berikut:
<input type="text" name="cari" id="cari" onKeyPress="return disableEnterKey(event)" /> <input type="button" name="submit" value="cari" onClick="findRecord()" /> <br /><br /><script language="javascript"> // untuk menghapus baris atau data pada table pegawai function findRecord(){ // ID dari record pegawai dikirimkan sebagai parameter $.post( 'cari_pegawai.php', {cari: $("#cari").val() }, function(response){ //if(response == 'ok') // jika respon dari delete.php adalah 'ok' $('#result').html(response); // hapus 1 baris //else // alert('Delete gagal'); } ); } function disableEnterKey(e){ var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox if (key == 13) { findRecord(); return false; } else return true; } </script> <div id="result"><?php include "cari_pegawai.php"; ?> </div>
4. Create file cari_pegawai.php dengan code berikut:
<script language="javascript"> function getSelected(no_int, id, nama){ var args = new Array(); for (var i = 0; i < arguments.length; i++) window.parent.my_variable[i+1] = arguments[i]; window.parent.passingToParent(); }</script> <style> table { border-collapse: collapse; width: 100%; }th, td { text-align: left; padding: 8px; }tr:nth-child(even){background-color: #f2f2f2}th { background-color: #4CAF50; color: white; } </style> <?php$mysqli = new mysqli("localhost", "admin", "", "test"); $ssql = "SELECT * FROM pegawai WHERE nip like '%$_POST[cari]%' or nama like '%$_POST[cari]%'"; $query = $mysqli->query($ssql); ?> <table bgcolor="#000000" cellspacing="1" cellpadding="3"> <tr bgcolor="#DDDDDD"> <th>No. Peg</th> <th>Nama</th> <th>Umur</th> <th>Alamat</th> </tr> <?php while($row = $query->fetch_object()): ?> <tr bgcolor="#FFFFFF"> <td align="center"> <a href="javascript:getSelected('<?=$row->no_int?>','<?=$row->NIP?>','<?=$row->nama?>')"> <?=$row->NIP?> </a> </td> <td><?=$row->nama?></td> <td align="center"><?=$row->umur?></td> <td><?=$row->alamat?></td> </tr> <?php endwhile; ?> </table>
Berikut link download file sample simple lookup dengan popup colorbox.
Gak bisa didownload gan sample-nya
cb lg gan sudah diupload
setelah klik cari, kenapa data pegawai tidak muncul ?