<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>S i X h E a D { ? } &#187; popup</title>
	<atom:link href="http://sixhead.com/tag/popup/feed/" rel="self" type="application/rss+xml" />
	<link>http://sixhead.com</link>
	<description>เมื่อความรู้มีไว้แบ่งปัน</description>
	<lastBuildDate>Mon, 27 Feb 2012 06:23:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>submit form ให้ขึ้นเป็น popup และอยู่กลางจอ</title>
		<link>http://sixhead.com/2008/02/28/form-submit-to-center-popup/</link>
		<comments>http://sixhead.com/2008/02/28/form-submit-to-center-popup/#comments</comments>
		<pubDate>Wed, 27 Feb 2008 17:28:36 +0000</pubDate>
		<dc:creator>Pipo</dc:creator>
				<category><![CDATA[Developer]]></category>
		<category><![CDATA[center]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[popup]]></category>
		<category><![CDATA[submit]]></category>

		<guid isPermaLink="false">http://sixhead.com/2008/02/28/form-submit-to-center-popup/</guid>
		<description><![CDATA[อาจจะมีความจำเป็นในบางงาน ที่จะต้องมีการ submit form ให้ขึ้นเป็นหน้าใหม่ ยกตัวอย่างเช่น การ submit form ไปเรียก php, aspx ข้าม domain หรือคนละ server ซึ่งการกดปุ่ม submit แล้วขึ้นเป็น windows ใหม่เลยมันก็ดูแสนจะธรรมดา แถมยังอาจจะดูไม่ค่อยดีเท่าไหร่ แต่ถ้าทำให้เป็น popup น่าจะดีกว่า เพราะจำกัดการแสดงผลได้ และผู้ใช้จะปิด popup ได้ง่ายกว่า ผมว่าถ้าจะทำอะไรแล้วต้องทำให้ดีที่สุด นอกจากจะเป็น popup แล้วก็ยังต้องการให้อยู่กลางจอด้วยเพื่อความสวยงาม มาดูตัวอย่างกันครับ function submitPopup &#40;objForm,W,H,S&#41; &#123; // W = width, H = height, S = scrollbar var winleft = &#40;screen.width - W&#41; / [...]]]></description>
			<content:encoded><![CDATA[<p>อาจจะมีความจำเป็นในบางงาน ที่จะต้องมีการ submit form ให้ขึ้นเป็นหน้าใหม่ ยกตัวอย่างเช่น การ submit form ไปเรียก php, aspx ข้าม domain หรือคนละ server ซึ่งการกดปุ่ม submit แล้วขึ้นเป็น windows ใหม่เลยมันก็ดูแสนจะธรรมดา แถมยังอาจจะดูไม่ค่อยดีเท่าไหร่</p>
<p><span id="more-29"></span>แต่ถ้าทำให้เป็น popup น่าจะดีกว่า เพราะจำกัดการแสดงผลได้ และผู้ใช้จะปิด popup ได้ง่ายกว่า ผมว่าถ้าจะทำอะไรแล้วต้องทำให้ดีที่สุด นอกจากจะเป็น popup แล้วก็ยังต้องการให้อยู่กลางจอด้วยเพื่อความสวยงาม มาดูตัวอย่างกันครับ</p>
<pre class="javascript"><span style="color: #003366; font-weight: bold;">function</span> submitPopup <span style="color: #66cc66;">&#40;</span>objForm,W,H,S<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	<span style="color: #009900; font-style: italic;">// W = width, H = height, S = scrollbar</span>
	<span style="color: #003366; font-weight: bold;">var</span> winleft	=	<span style="color: #66cc66;">&#40;</span>screen.<span style="color: #006600;">width</span> - W<span style="color: #66cc66;">&#41;</span> / <span style="color: #CC0000;">2</span>;
	<span style="color: #003366; font-weight: bold;">var</span> winup	=	<span style="color: #66cc66;">&#40;</span>screen.<span style="color: #006600;">height</span> - H<span style="color: #66cc66;">&#41;</span> / <span style="color: #CC0000;">2</span>;
	winProp		=	<span style="color: #3366CC;">'width='</span>+W+<span style="color: #3366CC;">',height='</span>+H+<span style="color: #3366CC;">',left='</span>+winleft+<span style="color: #3366CC;">',top='</span>+winup+<span style="color: #3366CC;">',scrollbars='</span>+S+<span style="color: #3366CC;">',resizable'</span> + <span style="color: #3366CC;">',status=yes'</span>
&nbsp;
	objForm.<span style="color: #006600;">target</span> = <span style="color: #3366CC;">&quot;newPopup&quot;</span>;
	window.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">''</span>, <span style="color: #3366CC;">&quot;newPopup&quot;</span>, winProp<span style="color: #66cc66;">&#41;</span>;
	objForm.<span style="color: #006600;">submit</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre>
<p>ตัว function javascript ด้านบน ทำงานดังนี้<br />
1. คำนวณตำแหน่งกลางจอ<br />
2. ทำการสร้าง popup ขึ้นมามีชื่อว่า newPopup<br />
3. สั่ง submit form</p>
<pre class="html4strict">&nbsp;
<span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">&lt;form</span></a> <span style="color: #000066;">action</span>=<span style="color: #ff0000;">&quot;/path/to/script.php&quot;</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">&quot;post&quot;</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;frmTest&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;frmTest&quot;</span> <span style="color: #000066;">target</span>=<span style="color: #ff0000;">&quot;newPopup&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;test&quot;</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;test&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;test&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">&quot;Submit&quot;</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">&quot;Submit&quot;</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;Submit&quot;</span> <span style="color: #000066;">onClick</span>=<span style="color: #ff0000;">&quot;submitPopup(document.frmTest,300,400,'no');&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">&quot;javascript:submitPopup(document.frmTest,300,400,'no');&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>Submit<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/form&gt;</span></span>
&nbsp;</pre>
<p>คำสั่ง html ทำงานดังนี้<br />
1. เมื่อกดปุ่ม Submit หรือ click link ที่คำว่า Submit จะไปเรียก function submitPopup() ของ javascript ให้ทำงานโดยส่ง parameter ไป 4 ตัว<br />
2. จุดสังเกตุคือ target="newPopup" ใน tag form จะชื่อเดียวกับ popup ที่สร้างใหม่จาก javascript นั่นเอง เพราะถ้าเราใส่ชื่อ target ที่ไม่มีอยู่จริงมันจะเด้งเป็นหน้าใหม่ แต่ว่าตัว javascript ไปดักสร้าง popup ชื่อว่า newPopup ไว้ทำให้ form ถูก submit ไปยัง popup ดังกล่าวนั่นเอง</p>
<p><map name='google_ad_map_29_f21c57aff87a446f'>
<area shape='rect' href='http://imageads.googleadservices.com/pagead/imgclick/29?pos=0' coords='1,2,367,28' />
<area shape='rect' href='http://services.google.com/feedback/abg' coords='384,10,453,23'/></map>
<img usemap='#google_ad_map_29_f21c57aff87a446f' border='0' src='http://imageads.googleadservices.com/pagead/ads?format=468x30_aff_img&amp;client=&amp;channel=&amp;output=png&amp;cuid=29&amp;url= http%3A%2F%2Fsixhead.com%2F2008%2F02%2F28%2Fform-submit-to-center-popup%2F' /></p>]]></content:encoded>
			<wfw:commentRss>http://sixhead.com/2008/02/28/form-submit-to-center-popup/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>เขียน javascript เล่นกับ popup และ opener</title>
		<link>http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/</link>
		<comments>http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/#comments</comments>
		<pubDate>Fri, 25 Jan 2008 19:08:49 +0000</pubDate>
		<dc:creator>Pipo</dc:creator>
				<category><![CDATA[Developer]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[popup]]></category>
		<category><![CDATA[window.close]]></category>
		<category><![CDATA[window.opener]]></category>

		<guid isPermaLink="false">http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/</guid>
		<description><![CDATA[พอดีต้องเขียน javascript สั้นๆ เป็นตัวอย่างไปให้ programmer อีกท่านที่ไม่ถนัด javascript เลยคิดว่าน่าจะเอามาเล่าให้ฟัง การทำงานคือ หน้าต่างหลักมี text field อยู่ พอกดปุ่มจะเปิด popup ขึ้นมาโดยจะมี textarea เพื่อกรอกข้อมูล พอกดปุ่ม submit ค่าที่อยู่ใน textarea จาก popup จะไปอยู่ใน text field ตัวหน้าต่างหลัก, แปลงจากขึ้นบรรทัดใหม่เป็น : แทน และ popup ปิดตัวเอง ตามรูป ขออธิบายส่วนที่น่าสนใจแล้วกันนะครับ ไฟล์ test.html (หน้าต่างหลัก) &#160; // function นี้มีไว้เพื่อสร้าง popup ให้อยู่กลางจอเสมอ function popUpWindow&#40;URL, N, W, H, S&#41; &#123; // name, width, [...]]]></description>
			<content:encoded><![CDATA[<p>พอดีต้องเขียน javascript สั้นๆ เป็นตัวอย่างไปให้ programmer อีกท่านที่ไม่ถนัด javascript<br />
เลยคิดว่าน่าจะเอามาเล่าให้ฟัง</p>
<p>การทำงานคือ หน้าต่างหลักมี text field อยู่ พอกดปุ่มจะเปิด popup ขึ้นมาโดยจะมี textarea <br />
เพื่อกรอกข้อมูล พอกดปุ่ม submit ค่าที่อยู่ใน textarea จาก popup จะไปอยู่ใน text field<br />
ตัวหน้าต่างหลัก, แปลงจากขึ้นบรรทัดใหม่เป็น : แทน และ popup ปิดตัวเอง ตามรูป</p>
<p><span id="more-9"></span></p>
<p><img width="392" height="272" src="http://sixhead.com/wp-content/uploads/image/javascript/javascript-popup-and-window-opener.png" alt="" /><br />
ขออธิบายส่วนที่น่าสนใจแล้วกันนะครับ</p>
<p>ไฟล์ test.html (หน้าต่างหลัก)</p>
<pre class="javascript">&nbsp;
<span style="color: #009900; font-style: italic;">// function นี้มีไว้เพื่อสร้าง popup ให้อยู่กลางจอเสมอ</span>
<span style="color: #003366; font-weight: bold;">function</span> popUpWindow<span style="color: #66cc66;">&#40;</span>URL, N, W, H, S<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> <span style="color: #009900; font-style: italic;">// name, width, height, scrollbars</span>
<span style="color: #003366; font-weight: bold;">var</span> winleft    =    <span style="color: #66cc66;">&#40;</span>screen.<span style="color: #006600;">width</span> - W<span style="color: #66cc66;">&#41;</span> / <span style="color: #CC0000;">2</span>;
<span style="color: #003366; font-weight: bold;">var</span> winup    =    <span style="color: #66cc66;">&#40;</span>screen.<span style="color: #006600;">height</span> - H<span style="color: #66cc66;">&#41;</span> / <span style="color: #CC0000;">2</span>;
winProp        =    <span style="color: #3366CC;">'width='</span>+W+<span style="color: #3366CC;">',height='</span>+H+<span style="color: #3366CC;">',left='</span>+winleft+<span style="color: #3366CC;">',top='</span> +winup+<span style="color: #3366CC;">',scrollbars='</span>+S+<span style="color: #3366CC;">',resizable'</span> + <span style="color: #3366CC;">',status=yes'</span>
Win            =    window.<span style="color: #000066;">open</span><span style="color: #66cc66;">&#40;</span>URL, N, winProp<span style="color: #66cc66;">&#41;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>parseInt<span style="color: #66cc66;">&#40;</span>navigator.<span style="color: #006600;">appVersion</span><span style="color: #66cc66;">&#41;</span> &amp;gt;= <span style="color: #CC0000;">4</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span> Win.<span style="color: #006600;">window</span>.<span style="color: #000066;">focus</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
<span style="color: #003366; font-weight: bold;">function</span> popUpTextArea<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #009900; font-style: italic;">// สั่งสร้าง popup จากการกดปุ่มที่หน้าต่างหลัก</span>
popUpWindow<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'popup_textarea.html'</span>,<span style="color: #3366CC;">'SH1'</span>,<span style="color: #CC0000;">340</span>,<span style="color: #CC0000;">130</span>,<span style="color: #3366CC;">'no'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
&nbsp;</pre>
<p>ไฟล์ popup_textarea.html</p>
<pre class="javascript">&nbsp;
<span style="color: #009900; font-style: italic;">// เมื่อกดปุ่ม Set Value ที่ popup จะอ่านค่าจาก textarea มา</span>
<span style="color: #009900; font-style: italic;">// และแปลงจาก \n (ขึ้นบรรทัดใหม่) เป็น :</span>
<span style="color: #003366; font-weight: bold;">function</span> setContent <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #003366; font-weight: bold;">var</span> strContent = document.<span style="color: #006600;">frmSelect</span>.<span style="color: #006600;">tbTextArea</span>.<span style="color: #006600;">value</span>;
strContent = replaceString<span style="color: #66cc66;">&#40;</span>strContent,<span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span>,<span style="color: #3366CC;">':'</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #009900; font-style: italic;">// window.opener ก็คือตัวที่เปิดมันขึ้นมานั่นเอง</span>
window.<span style="color: #006600;">opener</span>.<span style="color: #006600;">document</span>.<span style="color: #006600;">frmTest</span>.<span style="color: #006600;">tbTest</span>.<span style="color: #006600;">value</span>=strContent;
window.<span style="color: #000066;">close</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #009900; font-style: italic;">// เอาไว้ replace ข้อความใน string ตามต้องการ</span>
<span style="color: #003366; font-weight: bold;">function</span> replaceString <span style="color: #66cc66;">&#40;</span>strString,strFind,strReplace<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
<span style="color: #000066; font-weight: bold;">while</span> <span style="color: #66cc66;">&#40;</span>strString.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span>strFind<span style="color: #66cc66;">&#41;</span>&amp;gt;<span style="color: #CC0000;">-1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
intPosition= strString.<span style="color: #006600;">indexOf</span><span style="color: #66cc66;">&#40;</span>strFind<span style="color: #66cc66;">&#41;</span>;
strString = <span style="color: #3366CC;">''</span> + <span style="color: #66cc66;">&#40;</span>strString.<span style="color: #006600;">substring</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;">0</span>, intPosition<span style="color: #66cc66;">&#41;</span> + strReplace +
strString.<span style="color: #006600;">substring</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>intPosition + strFind.<span style="color: #006600;">length</span><span style="color: #66cc66;">&#41;</span>, strString.<span style="color: #006600;">length</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span>
<span style="color: #000066; font-weight: bold;">return</span> strString;
<span style="color: #66cc66;">&#125;</span>
&nbsp;</pre>
<p>
ลองของจริงโดยการ <a href="http://sixhead.com/wp-content/uploads/file/javascript/javascript-popup-and-window-opener.zip">ดาวน์โหลดไฟล์ที่นี่</a></p>
<p>&nbsp;</p>
<p><map name='google_ad_map_9_f21c57aff87a446f'>
<area shape='rect' href='http://imageads.googleadservices.com/pagead/imgclick/9?pos=0' coords='1,2,367,28' />
<area shape='rect' href='http://services.google.com/feedback/abg' coords='384,10,453,23'/></map>
<img usemap='#google_ad_map_9_f21c57aff87a446f' border='0' src='http://imageads.googleadservices.com/pagead/ads?format=468x30_aff_img&amp;client=&amp;channel=&amp;output=png&amp;cuid=9&amp;url= http%3A%2F%2Fsixhead.com%2F2008%2F01%2F26%2Fjavascript-popup-and-window-opener%2F' /></p>]]></content:encoded>
			<wfw:commentRss>http://sixhead.com/2008/01/26/javascript-popup-and-window-opener/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

