การใช้ jQuery ร่วมกับ library อื่นๆ ด้วยโหมด no-conflict

ในบางครั้งท่านผู้อ่านอาจจะมีปัญหา ในการนำ jQuery ไปใช้กับ ร่วมสคริปต์อื่นๆ หรือแม้กระทั่งพวก css framework ที่บางตัวจะมีการฝัง script ไว้ข้างในด้วย  ซึ่งอาจทำให้ script ของท่านทำงานผิดเพี้ยนไปจากที่ควรเป็น  วันนี้จะขอแนะนำเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การปรับ jQuery ไปใช้งานในโหมด no-conflict นั่นเองค่ะ   สิ่งที่พึงระวังสำหรับมือใหม่ก็คือ ตัว jquery เองนั้นจะใช้ตัวแปร $  อ้างถึงฟังก์ชั่น jQuery  ดังนั้น ถ้ามีสคริปต์ตัวอื่นที่ใช้ตัวแปร $ นี้เหมือนกันล่ะก็  เกิดปัญหาขึ้นแน่นอนค่ะ วิธีแก้ปัญหา  วิธีที่ 1 คือให้สร้างตัวแปรเพิ่มขึ้นมาอีกตัวเพื่อใช้แทนเครื่องหมาย $ ตัวอย่างพร้อมคำอธิบาย <script src=”other_library.js”></script> <script src=”jquery.js”></script> <script> //ในที่นี้เราประกาศตัวแปร $j แทนตัว $ var $j = jQuery.noConflict(); $j(document).ready(function(){ $j(“div”).hide(); }); // ถึงตรงนี้ตัวแปร $ จะหมายถึงตัวแปรจากสคริปต์ other_library.js // mainDiv ดังนั้นคำสั่งข้างล่างนี้ $(‘main’) จึงหมายถึงการเรียกฟังก์ชั่น // จาก other_library ไม่ใช่การเรียกฟังก์ชั่นของ jquery window.onload = function(){ var mainDiv = $(‘main’); } </script> วิธีที่ 2 ในกรณีที่ไม่ต้องการประกาศตัวแปรเพิ่ม ในที่นี้เราสามารถใช้งานตัวแปร $ ได้แต่เป็นการเรียกใช้แบบ locally scope(เรียกใช้เฉพาะในบล็อคของ jQuery เอง) ตัวอย่างพร้อมคำอธิบาย <script src=”other_library.js”></script> <script src=”jquery.js”></script> <script> jQuery.noConflict(); jQuery(document).ready(function($){ // การใช้ตัวแปร $ ในนี้จะหมายถึง jQuery (locally scope) $(“div”).hide(); }); // ส่วนการใช้ตัวแปร $ นี้จะหมายถึงการเรียกใช้แบบ global scope // ซึ่งในที่นี้หมายถึงการเรียกใช้ $ ของ other_library นั่นเอง window.onload = function(){ var mainDiv = $(‘main’); } </script> การเรียกใช้งานแบบนี้จะทำให้เราไม่สับสนกรณีที่เขียนโค๊ดยาวๆ หรือใช้ไลบราลีหลายตัว สองวิธีข้างต้น จะสังเกตว่าเรา include สคริปต์ jQuery หลังสคริปต์ตัวอื่น กรณีที่เรามีการ include สคริปต์ jQuery ก่อนสคริปต์ตัวอื่น จะทำอย่างไร? ในกรณีที่เรา include jQuery มาก่อนและหากสคริปต์ที่ตามหลังใช้ตัวแปร $ จะถือว่าตัวแปร $ นั้นเป็นของสคริปต์ที่ประกาศที่หลัง(override) ซึ่งถ้าเราต้องการใช้งาน jQuery จะทำได้โดยการเรียกใช้ฟังก์ชั่น  jQuery โดยตรง  ดังตัวอย่างข้างล่างนี้ ตัวอย่างพร้อมคำอธิบาย <script src=”jquery.js”></script> <script src=”other_library.js”></script> <script> //เรียกใช้ jQuery ฟังก์ชั่นแบบเต็ม jQuery(document).ready(function(){ jQuery(“div”).hide(); });   // เรียกใช้ตัวแปร $ ที่ระบุไว้ใน other_library.js window.onload = function() { var mainDiv = $(‘main’); };   </script> สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ หวังว่าต่อไปนี้ท่านผู้อ่านที่ใช้งาน jQuery ร่วมกับสคริปต์อื่นๆ คงจะไม่มีปัญหาสคริปต์ทำงานผิดเพี้ยนหรือสคริปต์ทำงานไม่ครบอีกแล้วนะคะ แหล่งอ้างอิง : http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/  

Read More »

วิธีสลับสีแถวข้อความใน Crystal Report เมื่อมีการจัด Group

ในการอ่านหรือดูรายงานหนึ่ง ๆ นั้น แม้ข้อมูลจะมีการจัดเป็นข้อ ๆ แล้วหรือมีการจัดกลุ่มข้อความนั้นแล้วก็ตาม แต่เมื่อข้อมูลมีจำนวนมาก ก็อาจทำให้เราวิงเวียน ตาลายได้ ดังนั้นในฐานะผู้จัดทำรายงานคนหนึ่ง ก็พยายามหาทางให้ผู้ใช้สามารถอ่านรายงานได้ง่าย โดยการใส่สีข้อความสลับบรรทัดนั่นเอง    โดยปกตินั้น การใส่สีสลับบรรทัดสามารถทำได้โดยวิธีง่าย ๆ นั้นคือ if row mod 2 = 0 then   //ตรวจสอบว่าแถวนั้นเป็นแถวคู่หรือไม่    color(240,240,240)    //ถ้าใช่แสดงสี else crNocolor             //ถ้าไม่ใช่ไม่ต้องแสดงสี ซึ่งจะทำให้ได้ผลลัพธ์ดังรูป จากรูปจะเห็นได้ว่า ข้อมูลมีการสลับสีแล้ว แต่เนื่องจากข้อมูลถูก Group จะพบว่า ข้อมูลที่มี 1 record ก็มีการสลับสีด้วย ซึ่งผู้เขียนไม่ต้องการให้มีการสลับสีกรณีที่ข้อมูลมีเพียง 1 ดังนั้นผู้เขียนจึงปรับวิธีการเขียนใหม่ดังนี้ เพิ่ม Formula Fields ตัวที่ 1 ตั้งชื่อว่า ffRowCount เขียน Code ภายในดังนี้ shared numbervar rowcnt;rowcnt := rowcnt+1; ตัวที่ 2 ตั้งชื่อว่า ffRowReset เขียน Code ภายในดังนี้ shared numbervar rowcnt:rowcnt := 0; นำตัวที่ 1.1 ใส่ไว้ในส่วนของ Details และเลือก Suppress นำตัวที่ 1.2 ใส่ไว้ในส่วนของ Group 2(คณะ) เนื่องจากต้องการให้มีการ reset เมื่อมีการเปลี่ยน Group และเลือก Suppress ส่วนของ Details ให้จัดการดังนี้ Click ขวา เลือก Section Expert Click เลือก Tab Color ทำเครื่องหมาย / หน้า Background Color กดปุ่ม x-2 หลักช่องสี เขียน Code ดังนี้ shared numbervar rowcnt; if remainder(rowcnt,2) = 0 then    color(240,240,240) else crNocolor จากนั้นลอง run ผลลัพธ์ดังรูป จะเห็นได้ว่า ข้อมูลที่มีเพียง 1 record นั้นจะไม่มีสี   ผู้เขียนหวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อยสำหรับผู้อ่านนะคะ แล้วพบกันใหม่ตอนหน้าค่ะ 

Read More »

WatIn Framework

WatIn Framework เป็น Framework ที่ใช้ในการทดสอบการทำงานของเว็บ ที่พัฒนาด้วย .Net ซึ่งสามารถทำงานได้อย่างอัตโนมัติ โดยที่ไม่ต้องทำการทดสอบซ้ำ ๆ เพียงแต่ถ้าต้องการข้อมูล Input ที่แตกต่างไป สามารถแก้ไข Source Code ได้ การติดตั้ง WatIn Framework คลิก Tool จากนั้นคลิก Extensions and Updates… ที่ NuGet Package Manager คลิก Download เมื่อ Download เสร็จแล้ว ทำการ Install โดยกดปุ่ม Install เมื่อ Install เสร็จแล้ว ไปที่เมนู จากนั้นค้นหา “WatIn” กดปุ่ม “Install” จากตัวอย่างมีการ Install เข้าไปแล้ว เมื่อ Install เสร็จจะแสดงดังรูปด้านบน จากนั้นค้นหา “NUnit” การเรียกใช้งาน WatIn Framework สร้าง Form ขึ้นมาปกติ จากนั้น ให้เขียนคำสั่งดังนี้ IE browser = new IE();browser.GoTo(“http://tqf-test.psu.ac.th/”); browser.TextField(Find.ByName(“ctl00$MainContent$Login1$UserName”)).TypeText(“thichaluk.s”); browser.TextField(Find.ByName(“ctl00$MainContent$Login1$Password”)).TypeText(“xxx”); browser.Button(Find.ByName(“ctl00$MainContent$Login1$Button1”)).Click();   – ในส่วนของคำสั่ง browser.GoTo(“http://tqf-test.psu.ac.th/”) เป็นการเรียกให้เปิด URL ที่ต้องการ – ในส่วนของคำสั่ง TextField หมายถึง Text box – ในส่วนของคำสั่ง Button หมายถึง ปุ่ม Button – ในส่วนของคำสั่ง Find.ByName ต่อด้วยชื่อ Control  ในการดูชื่อ Control สามารถดูได้จาก IE โดยกดปุ่ม F12 อย่าลืม using WatiN.Core; เมื่อรันโปรแกรมจะปรากฏหน้าจอทำงานอัตโนมัติ ดังรูป

Read More »

วิธีการอัพเกรด php 5.5.9 เป็น php 5.6 (หรือ 7.0) บน Ubuntu 14.04 และวิธีการสลับการทำงานระหว่างเวอร์ชั่น

บันทึกนี้สืบเนื่องจากต้องการอัพเกรดเวอร์ชั่น php เพื่อให้เครื่องเซิร์ฟเวอร์สามารถรองรับสคริปท์ WebApp php เวอร์ชั่นใหม่ที่สูงขึ้น คำเตือน! ควรทดลองทำในเครื่อง dev ดูก่อนอย่าทำบนเครื่องเซิร์ฟเวอร์จริงทันทีเดี๋ยวจะน้ำตาตก ควรทดสอบสคริปท์บนเครื่องทดสอบดูว่าสามารถทำงานได้ไม่มีปัญหาจะได้ไม่ต้องเสียเวลาแก้ไข เพราะตัวผมมั่วจนได้เรื่องบนเครื่องเซิร์ฟเวอร์จริงจนเกือบแก้ไม่ได้ T_T … มาเริ่มกันเลย

Read More »

ใช้ Firebug ในการตรวจสอบข้อมูล

วันนี้จะมาพูดถึง Firebug ซึ่งหลาย ๆ คนคงใช้งานหรือรู้จักกันอยู่แล้ว แต่ผู้เขียนเพียงแค่นำส่วนที่ใช้งานมาแบ่งปันสำหรับผู้ที่ยังไม่เคยใช้งานค่ะ Firebug เป็นเครื่องมือสำหรับ Web Development ในการแก้ไขตรวจสอบ JavaScript / CSS / HTML เป็น Extension หรือ Add-ons สำหรับใช้ในการช่วยจัดการ Debug พวก HTML , JavaScript และ CSS การใช้งานไม่ยาก โดยทำการติดตั้ง Plugin ลงใน Web Browser เช่น Google Chrome หรือ Mozilla Firefox หลังจากนั้นก็เปิด URL หรือเว็บไซต์ที่ต้องการ และทำการคลิกที่ Icon ของ Firebug จากนั้นโปรแกรม Firebug ก็จะแสดงรายละเอียดโครงสร้าง HTML , JavaScript และ CSS ทั้งหมดใน URL นั้น ๆ เราสามารถทำการคลิกเพื่อแก้ไข CSS หรือแม้กระทั่งตรวจสอบค่าต่าง ๆ ซึ่งการใช้งานนั้นไม่ยากซับซ้อนอะไร ผู้เขียนได้ใช้ Firebug กับการทำงานโดยใช้การ debug ที่แท็บ Console ตัวอย่างดังนี้ เมื่อมีการแจ้งจากผู้ใช้งานระบบว่าข้อมูลแสดงไม่ครบถ้วน จึงทำการตรวจสอบ Service ที่ดึงข้อมูลดังกล่าว โดยใช้ Firebug ในการตรวจสอบ คลิก Service ที่ต้องการจะแสดงข้อมูลดังนี้ (จะเห็นได้ว่าจากรูปด้านบนแสดงเวลาที่โหลดข้อมูลแต่ละคำสั่งด้วยค่ะ) ในส่วนอื่น ๆ ก็สามารถศึกษาได้ไม่ยากค่ะ

Read More »