FancyBox not work in UpdatePanel

ปัญหาที่พบ
เวลาเรานำ FancyBox เข้ามาใช้ใน Web Page ของเรา เราจะต้องทำการเรียกคำสั่ง $("a").fancybox(); ที่ $(document).ready(function() { .. } เพื่อ initialize FancyBox ซึ่ง Web เราก็จะสวยงามตามประสา

แต่นรกมาเยือนเมื่อเราเขียน web app บน asp.net โดยใช้ "ASP.NET AJAX Control Toolkit" และใช้ Component "UpdatePanel" มาครอบไว้ที่ GridView มันจะทำให้ web page ของเราสามารถ send request แบบ asynchronous ได้ (พูดง่าย ๆ คือ page จะไม่แว๊บ เวลา server control ทำงาน) เช่น กดปุ่ม delete บน GridView แล้วเขียน Code ให้ Refresh GridView ผลที่ได้คือ page จะไม่แว๊บเลย แต่ถ้าใน GridView มี link ไปยังรูปภาพที่เป็น FancyBox มันจะไม่ทำงาน (คือ FancyBox ไม่ขึ้น จะเป็นการ Link โดยเปิดรูปภาพเฉย ๆ)

สาเหตุ
ทุกครั้งที่มีการเรียก asynchronous ผ่าน AJAX Control Toolkit มันจะ refresh ใหม่ทุกครั้งเพียงแต่เราไม่เห็น และการ Refresh Page แบบพิเศษนี้แหละที่ทำให้ jQuery ไม่สามารถจับ event $(document).ready(...) ได้

การแก้ปัญหา
เราก็แค่สั่ง initialize FancyBox ใหม่อีกครั้ง เมื่อมีการทำ Asynchronous Operation โดยเพิ่ม java script function ดังต่อไปนี้ (โดยของเดิมก็ยังคงไว้) ..

  1. function pageLoad(sender, args) {  
  2.    if (args.get_isPartialLoad()) {  
  3.       $("a").fancybox();
  4.    }  
  5. }  

ความคิดเห็น

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

Convert float to int

การแปลงค่าจาก float เป็น int ถ้าเราใช้ function int.Parse() จะใช้ overhead สูงเพราะ parameter ที่รับเข้าไปจะต้องเป็น string ตัวอย่างเช่น int.Parse(floatValue.ToString()); มันคือการเอา float -> string -> int ซึงเราไม่ต้องการ เราต้องการ float -> int มีอีกทางเลือกคือใช้ Convert.ToInt32() แต่การเรียกใช้ method นี้จะเป็นการ เรียกใช้ method ของ CLR ของ .net ซึ่งผู้ที่เขียน C# จะดูว่ามันไม่ค่อย native C# ซะเท่าไร่ เลยขอใช้วิธีการ boxing ธรรมดานี่แหละ โดยใช่ function ปัดทศนิยมเข้ามาช่วย ดูแล้วมันเข้าใจง่ายดี (คราวหน้าจะมาวัด Performance กัน) float  floatValue = 15.2F         int  intValue = ( int )Math.Round(floatValue)  // ปัดขึ้น           // หรือ       int  intValue = ( int )Math.Floor(floatValue)  // ปัดลง   
อ่านเพิ่มเติม

Get QueryString from JavaScript

สร้าง Function ต่อไปนี้... function   GetUrlVars () {        var  vars = [], hash;         var  hashes = window.location.href.slice(window.location.href.indexOf( '?' ) + 1).split( '&' );         for  ( var  i = 0; i < hashes.length; i++) {             hash = hashes[i].split( '=' );             vars.push(hash[0]);             vars[hash[0]] = hash[1];        }         return  vars;   }   เวลาเรียกใช้ก็ส่ง Query String Name ที่อยากได้เข้าไป (ในที่นี้คือ "P") GetUrlVars()[ "P" ]   การนำมาใช้งานจริงต้องมีการ validate นิดหน่อย.. if  ( GetUrlVar...
อ่านเพิ่มเติม