Passing PHP value ke Jquery UI Dialog

galih pringgodigdo · Nov 15, 2011
Salam olahraga :D,
kak saya ingin bertanya. Saya ingin membuat sebuah tabel yg berisi data dari database. Kemudian dari tabel itu ada link "detail" yang fungsinya untuk memunculkan Jquery UI Dialog.

Pertanyaannya, bagaimana saya bisa mengambil value, ID dan sebagainya dari item di table tadi ke texfield2 yang ada di Jquery UI Dialog.

Untuk form Jquery dialog sengaja saya pisah di booking-form2.php
<!-- Konten Tengah -->
<?php
include ("search.php");
$data = mysql_query("SELECT * FROM stuff order by F1 DESC LIMIT 20");
?>
<script>
$(function() {
			$('#dialog').dialog({autoOpen: false});
			$('*#dialok').click(function(){ 
				$("#dialog").dialog({
									autoOpen:true, 
									//closeOnEscape:false,
									modal:true, 
									show: 'fade',
									hide:'fade',
									width: 910,
									resizable: false, position: 'top'
									});
			});
  });</script>

<table cellpadding="0" cellspacing="0" id="listing">
	<tr class="kepala-kolom">
		<th>Invoice</th>
		<th>No Order</th>
		<th>Jenis</th>
		<th>Tanggal</th>
		<th>Pembeli</th>
	</tr>
	<?php 
		while($d = mysql_fetch_array($data))
		{
	?>
	<tr bgcolor="#FFFFFF">
		<td><strong><?php echo $d['F1'];?></strong></td>
		<td><?php echo $d['F22'];?></td>
		<td><?php echo $d['F9'];?></td>
		<td><?php echo $d['F16'];?></td>
		<td align="center"><a href="#" id="dialok" style="float:left">detail</a>
		</td>
	</tr>
	<?php }?>
</table>
<div id="dialog" title="Form Edit Stuffing"><?php include("booking-form2.php");?></div>

dan ini adalah file untuk formnya.
<table style="width:344px; float:left">
        	<tr>
            	<td colspan="2">
                <div style="width:170px; float:left"><strong>Invoice:</strong><br><input type="text" style="width:160px; border:0px; text-align:right" id="invoice-form"></div>
                  <div style="width:168px; float:left"><strong>No Order</strong><br>
                    <input type="text" style="width:169px; border:0px">
                  </div>
             </td>
            </tr>
            <tr><td>Jenis</td><td><input type="text" style="width:100%" id="autocomplete"></td></tr>
            <tr><td>Tanggal</td><td><input type="text" style="width:100%"></td></tr>
  	    <tr><td>Pembeli</td><td><input type="text" style="width:100%"></td></tr>
       
        </table>

Mohon bantuannya ya kak.
Silahkan login untuk menjawab!
1
Ellyx Christian · Nov 16, 2011 · 1 Suka · 0 Tidak Suka
pertama ubah file booking-form2.php menjadi:
<?php
/*silahkah sesuaikan kode ini dengan keperluan kamu, karena saya tidak tahu pasti struktur table kamu*/
$data = mysql_query("SELECT * FROM stuff where F1='".$_GET['F1']."'");
$d = mysql_fetch_array($data);
?>
<table style="width:344px; float:left">
        	<tr>
            	<td colspan="2">
                <div style="width:170px; float:left"><strong>Invoice:</strong><br><input type="text" style="width:160px; border:0px; text-align:right" id="invoice-form" value="<?php echo $d['F1'];?>"></div>
                  <div style="width:168px; float:left"><strong>No Order</strong><br>
                    <input type="text" style="width:169px; border:0px" value="<?php echo $d['F22'];?>">
                  </div>
             </td>
            </tr>
            <tr><td>Jenis</td><td><input type="text" style="width:100%" id="autocomplete" value="<?php echo $d['F9'];?>"></td></tr>
            <tr><td>Tanggal</td><td><input type="text" style="width:100%" value="<?php echo $d['F16'];?>"></td></tr>
  	    <tr><td>Pembeli</td><td><input type="text" style="width:100%"></td></tr>
        </table>
lalu ubah kode listing data menjadi:
<!-- Konten Tengah -->
<?php
include ("search.php");
$data = mysql_query("SELECT * FROM stuff order by F1 DESC LIMIT 20");
?>
<script type="text/javascript">
$(function(){
$('.dialok').click(function(e){
e.preventDefault();
var F1 = $(this).attr('rel');
$('body').append('<div id="detail-dialog">loading....</div>');
$('#detail-dialog').dialog({
autoOpen:false,
modal:true,
show:'fade',
hide:'fade',
width:910,
resizable:false,
open:function(){
$('#detail-dialog').load('booking-form2.php?F1='+F1);
},
close:function(){
$('#detail-dialog').remove();
}
});
});
});
</script>
 
<table cellpadding="0" cellspacing="0" id="listing">
	<tr class="kepala-kolom">
		<th>Invoice</th>
		<th>No Order</th>
		<th>Jenis</th>
		<th>Tanggal</th>
		<th>Pembeli</th>
	</tr>
	<?php 
		while($d = mysql_fetch_array($data))
		{
	?>
	<tr bgcolor="#FFFFFF">
		<td><strong><?php echo $d['F1'];?></strong></td>
		<td><?php echo $d['F22'];?></td>
		<td><?php echo $d['F9'];?></td>
		<td><?php echo $d['F16'];?></td>
		<td align="center"><a href="#" class="dialok" rel="<?php echo $d['F1'];?>" style="float:left">detail</a>
		</td>
	</tr>
	<?php }?>
</table>
0
galih pringgodigdo · Nov 16, 2011 · 0 Suka · 0 Tidak Suka
wah sip. sedikit koreksi kak, seharusnya autoOpen: false --> autoOpen: true
pentesan saya klik kok gak muncul2 dialog box nya.hehehe. makasih kak.
0
galih pringgodigdo · Nov 16, 2011 · 0 Suka · 0 Tidak Suka
oh ya kak..boleh nanya satu lagi.. Gimana cara me-refresh tabel utama setelah kita klik Submit pada Dialog box agar data yang kita tampilkan merupakan data yang terbaru.. *kasih contoh kecil jg gpp kak. makasih kak. :)