เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)

ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า

By default, jQuery uses “$” as a shortcut for “jQuery”

ปัญหาก็คือ …..

มันดันใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นดิ

ทำให้เวลาเอามาใช้ร่วมกันมันจะตีกันสนุกสนานเลยหล่ะ วิธีแก้ไขก็คือให้ jQuery หลีกทางให้กับตัวอื่น ๆ ซะ

จาก

javascript

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // ต้องใช้ jQuery
  6. $(document).ready(function(){ $("div").hide(); });
  7. // ต้องใช้ Prototype/Mootools
  8. $('someid').style.display = 'none';
  9. </script>

ถ้าเป็นแบบนี้มันจะใช้งานไม่ได้ ครับ จะเกิดการตีกันระหว่างทั้ง 3 ตัวครับ เราต้องเปลี่ยนมาเป็น

javascript

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // เพิ่มบรรทัดนี้ลงไป
  6. jQuery.noConflict();
  7. // แล้วใช้ jQuery จาก $ เป็น jQuery(...) แทน
  8. jQuery(document).ready(function(){jQuery("div").hide();});
  9. // ส่วน Prototype/Mootools ใช้ $(...) ได้ตามปกติ
  10. $('someid').style.display = 'none';
  11. </script>

แนวทางการแก้ปัญหาก็ ok นะ แต่ …..

ใน Drupal หล่ะ ถ้าเราเอามาใช้เนี่ยทำไง

โดยตัว Drupal 5.2 แล้วมี jQuery 1.0.1 ใส่มาด้วย แต่ปัญหาคือมันดันไม่มี noConflict มาให้ ตอนนั่งแก้ปัญหา นั่งงงไปพักนึง เลยไปนั่งไล่แกะ จนรู้ว่าต้องมา upgrade เป็น jQuery 1.2 เสียก่อน เลยจัดการเอามาใส่ทับลงไปใน /misc แทนตัวเก่า

แล้วทำการแก้ไขไฟล์ต่าง ๆ ที่ Drupal นั้นใช้ jQuery ซึ่งได้แก่

  • misc/autocomplete.js
  • misc/collapse.js
  • misc/drupal.js
  • misc/progress.js
  • misc/tableselect.js
  • misc/textarea.js
  • misc/upload.js
  • misc/update.js
  • misc/farbtastic/farbtastic.js

โดยทำการ replace ‘$(‘ เป็น ‘jQuery(‘ แล้วทำการใส่ JavaScript ตัวนึงลงไปคือ

javascript

  1. jQuery.noConflict();

โดยเอาไปใส่ไว้ด้านล่าง Durpal $scripts ที่ Theme ของเรา ตามด้วยการใส่ mootools.js ไปก่อนหน้า Drupal $head

เฮ้อ ….. เล่นซะมึนไปครึ่งวัน

การมีมาตรฐานและเอามาใช้ร่วมกันนี่ยากเหมือนกันนะเนี่ย ยิ่ง JavaScript ที่มี Prototype หลายค่ายเหลือเกินยิ่งแล้วใหญ่ ความเข้ากันได้ยิ่งยากเข้าไปอีก แถมแต่ละตัวก็ ok ในเรื่องการใช้งาน แต่ว่าบางตัวมีข้อดีแต่ต่างกัน บางตัวใช้งานบางอย่างได้ดี และง่าย บางตัวทำแบบอีกตัวก็ได้ แต่ง่ายกว่ามาก เลยต้องหาจุดลงตัวของมันไป ทำให้ต้องมาปวดหัวกันไป แต่ก็นะเอามาใส่ลงไปในงานของเรา เพื่องานที่ออกมาดีที่สุด และง่ายที่สุดด้วย (ก็มีให้ใช้นิ)

อ้างอิงจาก

 

10 thoughts on “เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)

  1. บทความดีครับ มาเป็นกำลังใจให้

    ผมก้อเคยมีเจอปัญหาแบบนี้จนสุดท้ายต้องเลือก 1 อันก้อเลยมาทาง prototype ครับ

    ขอบคุณสำหรับความรู้ใหม่ครับ จะลองเอาไปทดสอบดูครับ

  2. ขอบคุณมากเลยครับสำหรับ post นี้เว็ปผมกลับมาแล้วเจอข้อหา jquery ตีกันเล่นเอาเว็ปเดี้ยงไปเลย

  3. ขอบคุณมากค่ะ เป็นประโยชน์อย่างมากสำหรับคนที่จำเป็นต้องใช้ หลายๆ อย่างรวมกัน

  4. ขอบคุณมากๆครับ magento ก็เจอปัญหาเหมือนกัน กว่าจะแก้ได้เป็นวันเหมือนกันครับ ขอบคุณจากใจจริง tomdythai.com

Leave a Reply