การอ้างอิง object ในหน้าหลัก จากหน้า popup ด้วย jQuery อย่างง่าย

02 April 2011 By Ninenik Narkdee
object jquery popup

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ object jquery popup



ตัวอย่างวิธีการต่อไปนี้ เป็นไปในลักษณะ ให้ข้อมูลจาก ฟอร์มในหน้า 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>

 

 



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: popup object jquery







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ