วันนี้เอา BlockUI มาฝากครับ plugin ของ jQuery อีกหนึ่งตัวที่จะทำให้เว็บไซต์ของเราน่าสนใจมากยิ่งขึ้นครับ ซึ่งในตอนนี้เว็บของเพื่อนๆ หลายคนคงจะนำเอา ajax มาใช้ และในขณะที่ผู้ใช้ของเรากดที่ปุ่มอะไรซักอย่าง จากนั้นเราก็จะโหลดเนื้อหามาแสดงโดยใช้ ajax ซึ่งในขณะที่เรา request ข้อมูลอยู่นี้ อาจจะใช้เวลานิดนึงทำให้ผู้ใช้ของเรานึกว่ามันไม่ทำงาน ก็เลยกดปุ่มอีก บางคนอาจจะกดย้ำๆ จนทำให้เซิฟเวอร์ของเราต้องทำงานหนักได้
หลังจากประสบปัญหาการตรวจสอบความถูกต้องของ input ต่างๆ ในโปรเจ็คที่ผ่านมา ก็เลยต้องเริ่มสรรหาเครื่องที่จะช่วยให้เราทำงานได้เร็วขึ้นเกี่ยวกับการทำงานในส่วนนี้ ก็เลยไปเจอกับ plugin ของ jQuery ก็คือ เจ้า validation
โดยเจ้า plugin ตัวนี้จะทำน่าที่ตรวจสอบความถูกต้องให้เราก่อนที่ข้อมูลจะถูกส่งไปประมวลผลที่ฝั่งเซิฟเวอร์ เช่น ตัวเลข, อีเมล, URLs และอีกมากมาย ลองเข้าไปศึกษาดูครับ
ปกติแล้วเวลาเรา submit ฟอร์ม (form) ค่าต่างๆ จะถูก submit ไปที่หน้าเดิม แต่ถ้าเราต้องการให้มัน submit ไปหน้าใหม่ล่ะจะทำยังไง วิธีการก็ง่ายนิดเดียวครับ แค่เราระบุ target ให้กับ form ของเราแค่นั้นเองครับ
<form action="..." method="POST" target="_blank">
อ่านเพิ่มเติมได้ที่ target attribute ครับ
โดยปกติแล้วเวลาเรากดปุ่ม submit ก็จะมีการส่งค่าของฟอร์มไปที่หน้าใหม่ ถ้าเกิดเว็บของเรามีข้อมูลเยอะๆ แล้ว เวลาโหลดหน้าใหม่ก็ต้องเสียเวลาในส่วนนี้ด้วย อาจจะทำให้ผู้ใช้เว็บของเราหงุดหงิดได้ ผมก็เลยเขียนตัวอย่างการ submit form แบบไม่ต้องรีเฟรช (refresh) หน้าใหม่โดยใช้ความสามารถของ jQuery ไว้ให้เพื่อนๆ ลองเอาไปใช้ดูครับ ไม่ต้องมากความลุยกันเลยครับ
วันนี้ว่างๆ ก็เลยเอาความรู้เกี่ยวกับ jQuery มาอัพเดทซักหน่อย ก็เลยเลือกเอาเรื่องการดึงค่าจากแท็ก select ซึ่งบ้างคนอาจจะยังใช้ selector แบบสะบั้นหั่นแหลกกันอยู่ เช่น
แท็ก select ของเรา
<select id="test-select"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>
ลองดาวน์โหลด Opencart มาติดตั้งดู พอติดตั้งเสร็จในส่วนของสกุลเงินมันจะเป็นเงินดอลล่าร์ (USD) และค่าภาษาเป็นภาษาอังกฤษ พอจะเข้าไปแก้ไขให้ค่า default มันเป็นเงินบาทกับภาษาไทย ที่หน้าแก้ไขมันก็ไม่มีปุ่มหรือลิงค์อะไรให้กดเป็นค่า default ซะงั้น ก็เลยลองหาๆ ดูในเมนูอื่นๆ ก็ไปเจออยู่ที่ System > Settings ที่แท็บ Local จะมีให้เลือกสกุลเงินกับภาษาอยู่ครับ
วันนี้ติดปัญหากับการจัดการ click event ด้วย jquery ซึ่งปกติแล้วก็จะใช้ฟังก์ชัน click() เลย แต่วันนี้ดันใช้ไม่ได้ซะงั้น หลังจากที่ตรวจสอบดูก็พบว่า ถ้าเราเอาเนื้อหา (html) จากการโหลดด้วย ajax มาแสดง เหมือนว่ามันจะไม่ตอบสนองกับ jquery script ที่เราเขีียนไว้ที่หน้าหลัก
ไม่ได้อับเดทมานานสองเดือนเลยทีเดียวคิดถึงๆ ก็เลยหาเกร็ดเล็กเกร็ดน้อยมาอัพเดทซักนิดดีกว่า เอาเป็นวิธีการเลือก (selector) input ที่เป็น checkbox ด้วย jQuery ก็แล้วกันครับ
1. วิธีการดึงเอา input ที่เป็น checkbox ทั้งหมด
var allCheckbox=$('input:checkbox');
2. วิธีการดึงเอา input ที่เป็น checkbox ที่ถูกเลือก (checked)
var checkedList=$('input:checkbox:checked');
3. วิธีการดึงเอา input ที่เป็น checkbox ที่ไม่ถูกเลือก (uncheck)
var uncheckList=$('input:checkbox:not(:checked)');
ถ้าต้องการระบุชื่อของ checkbox นั้นด้วยก็เพิ่ม [name=checkboxname] เข้าไปครับ เช่น
var mycheckbox=$('input[name=mycheckbox]:checkbox:checked');
จะเป็นการดึงเอา checkbox ที่มีชื่อว่า mycheckbox ที่ถูกเลือก (checked) ครับ
ในภาษา PHP ปกติเวลาเราจะหาขนาด (length) ของ string เราก็จะใช้ฟังก์ชัน strlen()
แต่วันนี้ผมไปเจออีกวิธีหนึ่งที่ใช้ในการตรวจสอบขนาดของ string อีกวิธีหนึ่งที่น่าสนใจมากครับ
ผมลองเอามาทดสอบดูแล้ว มันก็เร็วกว่าที่เราใช้ฟังก์ชัน strlen() ในการตรวจสอบซะด้วยสิ
ปัญหานี้จะเกิดขึ้นให้เราเห็นเวลาที่เรานำเข้า (import) ข้อมูลเยอะๆ ครับ สาเหตุถ้าพูดให้เข้าใจง่ายๆ หน่อยก็จะเป็นเพราะเซิฟเวอร์ (server) หรือว่าโฮส (host) ของเราต้องการใช้หน่วยความจำมากกว่าที่กำหนดไว้ในไฟล์ php.ini ปกติแล้วค่าเริ่มต้นจะเป็น 8M ครับ