การใช้งาน 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>