การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่าย
02 April 2011ตัวอย่างวิธีการต่อไปนี้ เป็นไปในลักษณะ ให้ข้อมูลจาก ฟอร์มในหน้า popup
เมื่อทำการกดปุ่ม submit ให้ส่งค่ามาที่หน้า ที่ทำการเปิด popup
ตัวอย่าง
เปิด popup
แนวทางการทดสอบ ให้คลิกที่ลิ้งค์ว่า เปิด popup
ในหน้าหลัก โดยในหน้าหลักมี textbox ที่มี id เท่ากับ data1 สำหรับทดสอบรับค่าจาก popup
จากนั้นหน้า popup ก็จะแสดง โดยในตัวอย่าง จะแสดงฟอร์มที่มี textbox กับ ปุ่ม submit
เมื่อกรอกข้อมูลในช่อง textbox ของหน้า popup แล้วกดปุ่ม submit ข้อมูลนั้นก็จะมาแสดง
ที่ textbox ที่มี id เท่ากับ data1 ในหน้าหลัก
ในตัวอย่างเป็นเพียงแนวทางเท่านั้น สามารถศึกษาและประยุกต์เพิ่มเติมตามต้องการ
ส่วนสำคัญคือ การใช้งาน jQuery ในการอ้างอิงถึง object ในหน้าหลัก ตามตัวอย่างดังนี้
$("#data1",window.opener.document);
หมายถึง textbox ที่มี id เท่ากับ data1 ของหน้าหลัก
ตัวอย่างโค้ดทดสอบ หน้าหลัก
<form id="form1" name="form1" method="post" action="">
<input type="text" name="data1" id="data1" />
</form>
<a href="javascript:popup('main_and_popup2.php','',400,100)" >เปิด popup </a>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function popup(url,name,windowWidth,windowHeight){
myleft=(screen.width)?(screen.width-windowWidth)/2:100;
mytop=(screen.height)?(screen.height-windowHeight)/2:100;
properties = "width="+windowWidth+",height="+windowHeight;
properties +=",scrollbars=yes, top="+mytop+",left="+myleft;
window.open(url,name,properties);
}
ตัวอย่างโค้ดไฟล์ popup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>main and popup</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="data1_popup" id="data1_popup" />
<input type="submit" name="button" id="button" value="Submit" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form1").submit(function(){
var opener_obj=$("#data1",window.opener.document);
opener_obj.val($("#data1_popup").val());
window.close();
return false;
});
// jQuery code
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1651 05 Nov 10 แนวทาง ประยุกต์ กำหนด event ให้กับ jQuery UI datepicker อ่าน 2450 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 4078 04 Nov 10 การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 3389 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4713 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5569 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 3815 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1116 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 1196 25 Mar 11 สร้างรูปแบบ วันที่ คล้าย วันที่ใน facebook comment ด้วย php อย่างง่าย อ่าน 2839 26 Oct 08 แสดง popup window ตรงกลาง อ่าน 10425 04 Oct 08 SQL คืออะไร อ่าน 7631 11 Oct 10 แสดงการแบ่งหน้า แบบ ajax ด้วย jQuery php และ css อ่าน 6127 02 Apr 10 สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค css อ่าน 4727 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9443 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4808 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17951 14 Feb 09 คำนวณหาอายุ จากวันเกิด ด้วย php อ่าน 4650 09 Oct 10 สร้าง album และ อัพโหลด รูป photo ขึ้น facebook ด้วย php sdk อ่าน 3587 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 1011