jQuery.noConflict เมื่อต้องใช้ library หลายตัวร่วมกัน

Posted By:   Published in All Categories, HTML/JavaScript/CSS

2

Oct 10

พอดีพึงได้เจอปัญหามากับตัวเองเรื่องการเรียกใช้ jQuery คนละเวอร์ชั่นในหน้าเดียวกันมาสดๆร้อนๆ ถือโอกาสเอามาแบ่งปันความรู้กันหน่อยว่าเราจะจัดการกับมันยังไงได้บ้าง จริงๆเขียนเป็น note ลงใน facebook ไปแล้วรอบหนึง ทีแรกคิดว่ามันจะหาเจอได้จาก Google แต่ลองหาเท่าไรก็หาไม่เจอ เลยเอามาลงใน Blog อีกรอบหละกันเผื่อมีใครที่อาจจะเจอปัญหาแบบเดียวกันจะได้เอาไปใช้งานด้วย ซึ่งการใช้งาน jQuery ร่วมกับ library ตัวอื่นๆก็มีอยู่สองแบบหลักๆ (แบ่งเองนะเนี้ยคงไม่มีตำราที่ไหนแบ่งแบบนี้) คือ

1. การใช้ jQuery หลายเวอร์ชั่นร่วมกัน
2. การใช้ jQuery ร่วมกับ library อื่นๆ เช่น prototype

# กรณีแรก ใช้ jQuery หลายเวอร์ชั่นร่วมกัน

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script type="text/javascript" src="jQuery1.2.js"></script>
<script type="text/javascript">
   jq12 = jQuery.noConflict(true);
</script>
 <script type="text/javascript" src="jQuery1.3.js"></script>
 
<script type="text/javascript">
  jq12("#id").hide(); // เรียกใช้เวอร์ชั่น 1.2
  $("#test").show(); // เรียกใช้เวอร์ชั่น 1.3
 
  // หรือจะใช้แบบนี้หากต้องการให้ใช้ $ ได้กับเวอร์ชั่น 1.2
  // ที่เราตั้งเป็น noConflict เอาไว้ โดยเพิ่ม (jq12) ต่อเข้าไปข้างท้าย
  (function($) {
     $("#id").hide(); // เรียกใช้เวอร์ชั่น 1.2
   })(jq12);
</script>

# กรณีที่สอง ใช้ jQuery ร่วมกับ library อื่นๆ เช่น prototype

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jQuery1.3.js"></script>
<script type="text/javascript">
   jQuery.noConflict();
 
    jQuery(document).ready(function($){
     $("div").hide(); // เรียกใช้ $ ของ jQuery
    });
 
   $('someid').hide(); // เรียกใช้ $ ของ prototype
</script>

Related articles

9 Responsed To This Post
mygif_alt
NuuoeiZ Says, in 6-2-2011 at 16:15:09 from 203.185.129.170    

มีตัวอย่างไหมอะครับ ไม่เข้าใจว่าใช้ยังไงเลย

mygif
LookHin Says, in 6-2-2011 at 16:18:32 from 203.146.191.101    

Code ที่เขียนในบทความก็เป็นตัวอย่างแล้วค่ะ

mygif_alt
NuuoeiZ Says, in 6-2-2011 at 16:41:44 from 203.185.129.170    

แล้วถ้าผมมีโค๊ด html ชุดนึงเพื่อเรียกรูปภาพ โดยคร่อมด้วย น่ะครับ แล้วผมก็ใช้ accordian.pack อยู่ ผมต้องเอาโค๊ด html ไปไว้ตรงไหนเหรอครับ

mygif
LookHin Says, in 6-2-2011 at 16:47:31 from 203.146.191.101    

accordian.pack ที่คุณใช้มันไป Conflict กับ code ตัวอื่นที่ใช้ด้วยหรือเปล่าหละค่ะ บทความนี้สอนเรื่องการใช้งาน code ที่มัน Conflict กันนะ

mygif_alt
l3iw Says, in 1-24-2012 at 14:26:21 from 61.90.104.226    

คือว่าผมทำเว็บ blogger แล้วติดปัญหานี้นะครับ
ถ้าเอาอีกอันใส่ลงไป อีกอันก็จะไม่ทำงานนะครับ ติดอยู่สองตัวนี้นะครับ
dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js

ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

มีวิธีแก้ใขมั้ยครับ

mygif
LookHin Says, in 1-24-2012 at 14:43:02 from 203.146.191.101    

ใช้ noConflict ตามตัวอย่างไม่ได้เหรอครับ อีกอย่าง น่าจะมีข้อมูลมากกว่านี้หน่อยนะครับว่า code ที่ใช้เป็นยังไง ส่งมาแค่ link ของ jquery มันช่วยให้ทราบแค่ว่าคนละ version เท่านั้น แต่ไม่รู้ว่ามันผิดที่ตรงไหนนะครับ

mygif_alt
l3iw Says, in 1-24-2012 at 15:10:22 from 61.90.104.226    

ขอบคุณที่ให้ความสนใจ มันเกิดจากการผิดผลาดของผมเองและครับ
ที่ว่างผิดทำแหน่ง ผมทำอยู่สองวันและยังไม่ได้เลยลองถามดูแต่เมื่อกี่ลองผิดลองถูกจนได้ครับ กลุ้มใจอยู่นานเลย ขอบคุณมากครับ
ถ้าผิดพลาดอะไรจะมาขอความช้วยเหลือใหม่นะครับ

Thank you very much for your help.

mygif
LookHin Says, in 1-24-2012 at 15:11:20 from 203.146.191.101    

ยินดีครับ

mygif_alt
yong Says, in 2-24-2012 at 17:18:05 from 110.77.176.127    

jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(‘.flexslider’).flexslider();
});

$.noConflict();
$(function() {
// Initialise the first and second carousel by class selector.
// Note that they use both the same configuration options (none in this case).
jQuery(‘.first-and-second-carousel’).jcarousel();
// If you want to use a caoursel with different configuration options,
// you have to initialise it seperately.
// We do it by an id selector here.
//jQuery(‘#third-carousel’).jcarousel();
});

jQuery.noConflict();
$(function() {
$(“ul.tabs”).tabs(“div.panes > div”);
//$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});

โค้ดใช้ jquery 3 ชุดอ่ะคับ
แล้วทีนี้ ชุดแรกมันไม่ทำงานอ่ะคับ
รบกวนช่วยดูให้ด้วยนะคับ

LookHin
Mr.Khwanchai Kaewyos (LookHin)
Mobile : 088-799-8421
Name : LookHin
E-mail : [email protected]

https://github.com/LookHin
https://www.facebook.com/LookHin
https://twitter.com/LookHin