Print Page - combobox from database query with function js

Title: combobox from database query with function js
Post by: cumie on December 26, 2014, 02:11:46 AM

I have sql database with table name worker, it has 2 column id and name
I wanna create easyui-combobox selecting id and i want show the name column behind or beside this combobox.
actually this my code :

Code:

   <tr valign="baseline">
      <td nowrap="nowrap" align="right">Kode anggota:</td>
      <td><label for="kd_anggota"></label>
        <select class="easyui-combobox" name="kd_anggota" id="kd_anggota" onchange="tampilkanAnggota()">
		<option value=""   >--Pilih Anggota--</option> 
          <?php
do {  
?>
          <option value="<?php echo $row_anggotaset['kd_anggota']?>"   
                 <?php if($row_anggotaset['kd_anggota']==$kd_anggota){echo " selected ";}
				 else{echo "";}; ?>>                    
					  <?php echo $row_anggotaset['kd_anggota']?>
  </option>
          <?php
} while ($row_anggotaset = mysql_fetch_assoc($anggotaset));
  $rows = mysql_num_rows($anggotaset);
  if($rows > 0) {
      mysql_data_seek($anggotaset, 0);
	  $row_anggotaset = mysql_fetch_assoc($anggotaset);
  }
?>
        </select></td>
    </tr>
	<tr valign="baseline">
<td nowrap="nowrap" align="right">Nama Anggota:</td>
<td> <b><span id="anggo" name="anggo"></span></b></td> 
</tr>

this the script

Code:

function tampilkanAnggota()
{
	var elemen_kd_anggota=document.getElementById("kd_anggota");
	var kd_anggota=elemen_kd_anggota.value;
	//var ukuran = $("#ukuran").val();
	if(kd_anggota=='--')
	{
		var anggo_ket=document.getElementById("anggo");
		lokasi_ket.innerHTML="";
		return;
	}	
	
	var url="ambilanggota.php?id="+kd_anggota;
	//var url="ambilbuku.php?id=7";
	ambilData(url,"anggo");

and this another php code to show the name

Code:

<?php
	header("Cache-Control: no-cache, must-revalidates");
	header("expires: Mon, 26 Jul 1997 00:00:00 GMT");
		mysql_connect("localhost","root","");
		mysql_select_db("nkit_perpust");
	$kd_anggota = $_GET['id'];
	$kec = mysql_query("SELECT nama_anggota FROM tanggota WHERE kd_anggota='$kd_anggota'");
	if(!$kec)
		print("Query Gagal");
	else
	{
		$baris = mysql_fetch_row($kec);
		if(!empty($baris))
		{
			$harga=$baris[0];
			print($harga);
		}
		else
			print("Anda belum memilih Anggota");
	}
?>

when i remove the class="easyui-combobox" its working, but u know its worst :-X

Title: Re: combobox from database query with function js
Post by: yamilbracho on December 27, 2014, 06:13:38 PM

In general, it's not good practice to mix server side code with client side code.
According docs, you can provide an url to feed your combo box, something like :

get_data.php

Code:

<?php
	header("Cache-Control: no-cache, must-revalidates");
	header("expires: Mon, 26 Jul 1997 00:00:00 GMT");
	
	mysql_connect("localhost","root","");
	mysql_select_db("your_database");
	
	$sql = 'SELECT id, name FROM you_table';
	if (isset($_REQUEST['id']) 
	{
	  $sql .=' WHERE id=' . $_REQUEST['id'];
	}
	$rs = mysql_query($sql);
	$result = array();
	while($row = mysql_fetch_object($rs)){
		array_push($result, $row);
	}
 
	echo json_encode($result);	
?>

And in your client side code

Code:

<input id="cc1" 
	class="easyui-combobox" 
	data-options="valueField: 'id',
        textField: 'name',
        url: 'get_data.php',
        onSelect: function(rec) 
		{
            var url = 'get_data.php?id=' + rec.id;
			$.getJSON( url, function( data ) 
			{
			   var result = eval('(' + data + ')');
			   alert(result.id + ' ' + result.name);
			});
       }">

Additional information in http://www.jeasyui.com/documentation

Title: Re: combobox from database query with function js
Post by: cumie on December 29, 2014, 09:22:41 PM

Great ;D sorry for my nubies, because I took from any source to make mycode works, so there's no different server side n client side.
but I m sure, practice makes perfect. :)

actually I still cant load my combobox.

Code:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

<input id="cc1" 
	class="easyui-combobox" 
	data-options="valueField: 'kd_anggota',
        textField: 'nama_anggota',
        url: 'get_data.php',
        onSelect: function(rec) 
		{
            var url = 'get_data.php?kd_anggota=' + rec.kd_anggota;
			$.getJSON( url, function( data ) 
			{
			   var result = eval('(' + data + ')');
			   alert(result.kd_anggota + ' ' + result.nama_anggota);
			});
       }">

its still not showing any value of my table.

this server side code :

Code:

<?php
	header("Cache-Control: no-cache, must-revalidates");
	header("expires: Mon, 26 Jul 1997 00:00:00 GMT");
	
	mysql_connect("localhost","root","");
	mysql_select_db("pustarda");
	
	$sql = 'SELECT kd_anggota, nama_anggota FROM tanggota';
	if (isset($_REQUEST['kd_anggota']) 
	{
	  $sql .=' WHERE kd_anggota=' . $_REQUEST['kd_anggota'];
	}
	$rs = mysql_query($sql);
	$result = array();
	while($row = mysql_fetch_object($rs)){
		array_push($result, $row);
	}
 
	echo json_encode($result);	
?>

Title: Re: combobox from database query with function js
Post by: yamilbracho on December 30, 2014, 07:42:48 AM

Run your php code first and check if it is working
or add an alert to your javascript code, for example :

Code:

$.getJSON( url, function( data ) {
   var result = eval('(' + data + ')');
   alert(JSON.stringify(result));
   //alert(result.kd_anggota + ' ' + result.nama_anggota);
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: cumie on December 26, 2014, 02:11:46 AM