ตัวอย่างนี้เป็นการประยุกต์ใช้ 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>