Quick Reach
jQuery noconflict() method
As described in introduction chapters, jQuery is a javascript library that is built on “write less, do more” slogan. There are many other java script libraries out there for different purposes e.g. javascript MVC, Ember, MooTools and others.
What if you are using other libraries in your application along with jQuery and the other one also uses ‘$’ just like jQuery does? ‘$’ in jquery is alias or shorthand for jQuery as we also used in examples.
In order to avoid conflicts between different libraries using ‘$’ jQuery provides $.noConflict() method. The $.noConflict() method gives up the hold of using ‘$’ alias so it can be used for other libraries. In place of ‘$’ you can specify other alias to be used for shorthand instead of using ‘jQuery’. The examples below shows how, but first noconflict syntax.
jQuery noConflict syntax
jQuery.noConflict() or $.noConflict();
Example of using jQuery with noConflict();
In example below as you click button fadetoggle() method is used to fade in and fade out elements. The example uses ‘$’ alias in this example. Before document.ready we placed $.noConflict(); method and so the code will not work as ‘$’ is “disabled”. To run this properly you can disable or remove, and code will work.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
$.noConflict();
$(document).ready(function(){
$("#fadebutton").click(function(){
$("#orangeblock").fadeToggle("fast");
$("#cyanblock").fadeToggle("slow");
$("#blackblock").fadeToggle("3000");
});
});
</script>
<style>
.blackblock {
width:200px;
height:200px;
background-color:black;
}
.cyanblock {
width:200px;
height:200px;
background-color:cyan;
}
.orangeblock {
width:200px;
height:200px;
background-color:orange;
}
</style>
</head>
<body>
<button id="fadebutton">Click this button to see FadeOut/fadeIn using fadeToggle method jquery</button>
<br>
<div id="blackblock" class="blackblock"></div>
<div id="cyanblock" class="cyanblock"></div>
<div id="orangeblock" class="orangeblock"></div>
</body>
</html>
|
Example using jQuery rather ‘$’
Now same example as used above and using jQuery in place of ‘$’ alias and then using $.noConflict(); method. See code below:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("#fadebutton").click(function(){
jQuery("#orangeblock").fadeToggle("fast");
jQuery("#cyanblock").fadeToggle("slow");
jQuery("#blackblock").fadeToggle("3000");
});
});
</script>
<style>
.blackblock {
width:200px;
height:200px;
background-color:black;
}
.cyanblock {
width:200px;
height:200px;
background-color:cyan;
}
.orangeblock {
width:200px;
height:200px;
background-color:orange;
}
</style>
</head>
<body>
<button id="fadebutton">Click this button to see FadeOut/fadeIn using fadeToggle method jquery</button>
<br>
<div id="blackblock" class="blackblock"></div>
<div id="cyanblock" class="cyanblock"></div>
<div id="orangeblock" class="orangeblock"></div>
</body>
</html>
|
Using custom alias like your company/website name
Very interesting and cool feature is you can use your own alias rather ‘$’ or jQuery as shorthand. For example using website name or its abbreviation or company name. In example below we use tutorialscollection short name ‘tc’.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js">
</script>
<script>
// Here we are specifying tc as alias to use in place of '$'
var tc = $.noConflict();
tc(document).ready(function(){
tc("#fadebutton").click(function(){
tc("#orangeblock").fadeToggle("fast");
tc("#cyanblock").fadeToggle("slow");
tc("#blackblock").fadeToggle("3000");
});
});
</script>
<style>
.blackblock {
width:200px;
height:200px;
background-color:black;
}
.cyanblock {
width:200px;
height:200px;
background-color:cyan;
}
.orangeblock {
width:200px;
height:200px;
background-color:orange;
}
</style>
</head>
<body>
<button id="fadebutton">Click this button to see FadeOut/fadeIn using fadeToggle method jquery</button>
<br>
<div id="blackblock" class="blackblock"></div>
<div id="cyanblock" class="cyanblock"></div>
<div id="orangeblock" class="orangeblock"></div>
</body>
</html>
|
This line of code will make ‘tc’ as alias rather ‘$’.
var tc = $.noConflict();
Leave A Comment?