GORAGOD.com

การใช้งาน GModal ในการแสดง Popup เพื่อเลือกข้อมูล

ตัวอย่างนี้เป็นการประยุกต์ใช้ GAJAX ในการเรียกฟอร์มข้อมูลจาก Server มาแสดงใน Popup ด้วย GModal ซึ่งเมื่อเราทำการเลือกข้อมูลแล้ว ข้อมูลที่เลือกจะไปปรกฏในฟอร์มหลัก

โค้ดแบ่งออกเป็น 2 ส่วน คือฟอร์มหลัก มีโค้ดดังข้างล่าง และมีการเรียกใช้ GAJAX

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.goragod.com/js/gajax.js"></script>

<p><input type="text"  id="text2" /></p>
<p><input type="text"  id="sel2" /></p>
<p><input type="button" value="GModal.show()" id="show" /></p>

<script type="text/javascript">
var modal;
var doModal = function(event){
 // ร้องขอข้อมูล ด้วย ajax ไปยัง get.php
 new  GAjax().send('get.php', null, function(xhr){
  // เมื่อได้รับค่าตอบกลับมา ก็ไปแสดง modal
  modal = new GModal();
  modal.show(xhr.responseText);
 });
};
function doClose(){
 // เมื่อกด OK คืนค่าไปยังฟอร์มหลัก
 $E('text2').value = $E('text1').value;
 $E('sel2').value = $E('sel1').value;
 // ยกเลิก modal
 modal.hide();
};
$G('show').addEvent('click', doModal);
</script>
<body>
</body>


ไฟล์ get.php ซึ่งถูกเรียกโดย Ajax ในตัวอย่างแสดงฟอร์มข้อมูล ซึ่งสามารถใช้ PHP เพื่อ query ข้อมูลได้เหมือนฟอร์มปกติ
<p><input type="text" value="test" id="text1" /></p>
<p><select id="sel1">
<option value="1">One</option>
<option value="2">Two</option>
</select></p>
<p><input type="button" value="Ok" onclick="doClose()" />><input type="button" value="Cancle" onclick="modal.hide()" /></p>