แก้ปัญหา Gulp watch Error ENOSPC!! ตุลาคม 14, 2558 หากใครใช้งาน Gulp เป็นประจำแล้วเจอปัญหานี้เข้าเวลาที่สั่งรัน Gulp watch ให้ลองใช้คำสั่งนี้ดู echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p อ่านเพิ่มเติม
ความแตกต่างในการประกาศใช้งาน Datatable ที่หลายคนอาจจะไม่รู้ สิงหาคม 05, 2558 จากบทความก่อนที่พูดถึงการใช้งาน Datatable คร่าวๆ ไป มาต่อคราวนี้ต้องบอกเลยว่า อันนี้ต้องจำจริงๆ เนื่องจาก Datatable นั้นมีปลั๊กอิน และ API เยอะแยะมากมายให้เราเลือกใช้ แต่ว่ารูปแบบการใช้งานดันไม่เหมือนกัน หากใครมองผ่านๆ หรือไม่ได้อ่านคู่มือให้ดีๆ จะพบว่า Datatable นั้นมีวิธีเรียกใช้งาน หรือประกาศใช้งาน 2 แบบ คือ สองแบบนี้ต่างกันตรง การใช้งานในส่วนเสริมต่างๆ แบบที่ขึ้นต้นด้วยตัวใหญ่จะใช้งานได้ปกติ แต่จะไม่สามารถเรียกใช้ปลั๊กอินต่างๆ ได้ http://datatables.net/plug-ins/api ถ้าหากว่าเปลี่ยนไปใช้แบบตัวเล็ก ก็จะไม่สามารถเรียกใช้งาน Properties ต่างๆ ของ Datatables ได้อีก วิธีแก้ของผม คือ ประกาศการใช้งานหลักด้วยตัวใหญ่ จากนั้นเวลาจะใช้ปลั๊กอินก็ประกาศใหม่อีกครั้งด้วยแบบที่ขึ้นต้นด้วยตัวเล็ก ก็จะสามารถใช้งานได้ทั้ง 2 แบบแล้วครับ อ่านเพิ่มเติม
มาเข้าใจ และใช้ Datatable ดึงข้อมูลแบบ Server-side ด้วย PHP, MySQL กันเถอะ สิงหาคม 04, 2558 มีช่วงหนึงผมเคยนำ datatable มาพัฒนาในงานแต่เกิดปัญหาเนื่องจากมีข้อมูลขนาดใหญ่ ทำให้เกิดการโหลดในครั้งแรกที่โหลดหน้าเพจนั้นๆ เนื่องจากผมใช้ Ajax ในการโหลดข้อมูลทั้งหมดมาในครั้งเดียวด้วยจำนวนข้อมูล 1000 ขึ้น ซึ่งตอนนั้นผมคิดว่าการทำ preload น่าจะช่วยได้ แต่ว่าถ้า user เกิดเผลอไปกด refesh หรือแก้ไขข้อมูลเวลากลับมาที่หน้าข้อมูลก็ต้องโหลดใหม่อีก ทำให้ผมเลิกใช้ datatable ไปเลย เพราะคิดว่ามันคงไม่เหมาะ แต่ในความจริงแล้ว datatable ก็ได้มีสิ่งที่มาแก้ในจุดนั้นได้ ซึ่งเรียกว่า server-side โดยการที่อนุญาตให้เรา query ข้อมูลออกมาก่อนแล้วส่งมาให้ datatable อ่านข้อมูลในจำนวนที่น้อยลง หลักการก็เหมือนๆ กับบทความการทำสร้าง XML จากข้อมูลขนาดใหญ่นั่นแหละครับ แต่มีเงื่อนไขเพียงแต่ว่า ต้อง Filter และส่งข้อมูลออกมาในรูปแบบที่ตรงตามหลักของ datatable เท่านั้น ( บางครั้งเวลาเข้าไปอ่าน Document หรือดู Example จะงงๆ ว่าอะไรเยอะแยะ ) โดยวันนี้จะมาแนะนำการใช้งานแบบง่ายๆ กันเลย :D อ่านเพิ่มเติม
การใช้งาน Spin.js แสดงสถานะ Loading ของ Ajax โดยไม่ต้องใช้ไฟล์รูปภาพ พฤษภาคม 03, 2557 ปกติเวลาทำการรับ-ส่งข้อมูล ด้วย Ajax หรือ JSON มักจะมีช่วงที่ต้องแสดงสถานะว่ากำลัง รับ-ส่งข้อมูล ในกรณีที่ยังไม่เสร็จ ปกติทั่วไปจะใช้เป็นรูปภาพกัน วันนี้เลยอยากจะแนะนำของเล่นใหม่ให้รู้จักคือ Spin.js ที่สร้าง Ajax Loader โดยที่ไม่ต้องง้อไฟล์ gif เลย สามารถดาวน์โหลดได้จาก ที่นี่ ซึ่งรองรับ IE ด้วย สามารถนำไปใช้งานได้แบบหายห่วงเลยทีเดียว ตัวอย่างการใช้งานก็ง่ายๆ ครับ วันนี้ก็แวะมาฝากทิปเล็กๆ น้อยๆ แค่นี้นะครับ ลองนำไปใช้กันดูครับ ;) อ่านเพิ่มเติม
การใช้งาน jQuery Validation Plugin ตอนที่ 2 กันยายน 20, 2556 วันนี้จะมาขออธิบายการใช้งาน jQuery Validation เพิ่มเติม ในส่วนการ Config ค่าต่างๆ เพิ่มเติมที่นอกเหนือจากการเรียกใช้งานแบบปกติ ซึ่งจะสามารถทำได้โดยการประกาศกฏ เพิ่มเข้าไปในตัว validation ที่เราประกาศ ซึ่งค่าที่เราต้องจะแบ่งออกเป็น 3 ส่วนหลักๆ คือ การประกาศกฏ, ข้อความ error, กำหนดการกระทำหลังจากตรวจข้อมูลแล้ว อ่านเพิ่มเติม
การใช้งาน jQuery Validation Plugin ตอนที่ 1 สิงหาคม 28, 2556 สมัยก่อนตอนเขียนเว็บใหม่ๆ การกรอกฟอร์มต่างๆ ผมมักจะเขียนตรวจสอบข้อมูลต่างๆ ด้วย PHP ตลอด ถึงแม้ว่ามันจะสะดวกและง่าย แต่ว่าวิธีจะมีปัญหาในเรื่องการเก็บค่าต่างๆ ที่ผู้ใช้งานเคยกรอกไปแล้วในส่วนที่ถูกต้อง ซึ่งก็ทำให้ต้องมานั่งเขียนเก็บค่าที่รับมาจากฟอร์มไว้ แล้วส่งกลับไปยังหน้าเดิม ยิ่งถ้าฟอร์มมี input เยอะๆ ก็ต้องมานั่งเขียนเก็บค่าตามฟอร์ม อีกทั้งยังต้องมาเขียนตรวจสอบข้อมูลที่รับมาอีก อ่านเพิ่มเติม
การใช้ jQuery ในการทำ Checkbox Select All กุมภาพันธ์ 22, 2556 วันดี คืนดี ก็นั่งทำตัว Checkbox Select All สำหรับเลือกจัดการข้อมูลต่างๆ ในระบบได้หลายๆ ตัว ซึ่งก็ได้ออกมาแบบนี้ครับ // Add multiple select $('#selectAll').click(function(){ var checkAll = $(this).prop('checked'); $('.ChkBox').each(function(){ $(this).prop({'checked':checkAll}); }); }); // if all checkbox are selected, check the selectall checkbox $('.ChkBox').click(function(){ var chkNumRow = $('.ChkBox:checked').length; var chkMaxRow = $('.ChkBox').length; if(chkNumRow == chkMaxRow){ $('#selectAll').prop({'checked':'checked'}); }else{ $('#selectAll').removeAttr('checked'); } }); Check All 1 2 3 4 5 6 7 ลองเอาไปประยุกต์ใช้ดูนะครับ ^ ^ อ่านเพิ่มเติม