Understanding jQuery conflicts in an large Visualforce page context

on
I was going through lot of jQuery stuff recently and thought I will brief about what and how can a conflict of jQuery is understood in a better way.

Here we go! following is the detailed example for using jQuery variables ( Demo - JSBin )

<!-- source of inspiration: source fo inspiration: https://stackoverflow.com/questions/10131268/jquery-no-conflict-still-conflicts-with-other-version-of-jquery#answer-10131373 -->
<html>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<head>
<script>
console.log('THUMB Rule 1: $ variable will hold version which is before conflict version');
console.log('THUMB Rule 2: jQuery variable will hold latest version unless it is conflicted with passing true as an argument');
jQ_v1_7_2 = jQuery.noConflict();
console.log('*******************************************************************');
console.log('SCENARIO 1:');
console.log('*******************************************************************');
console.log('Loaded only 1.7.2 & Added jQ_v1_7_2 = jQuery.noConflict()');
console.log('$ is_________________'+$);
console.log('jQuery is____________'+jQuery.fn.jquery);
console.log('jQ_v1_7_2 is_________'+jQ_v1_7_2.fn.jquery);
console.log('*******************************************************************');
</script>
</head>
<body>
<p id="container_1">Hello World</p>
<p id="container_2">Hello World</p>
</body>
<script src="https://code.jquery.com/jquery-1.8.3.js"></script>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
jQ_v1_10_2 = jQuery.noConflict();
console.log('SCENARIO 2:');
console.log('*******************************************************************');
console.log('Along with 1.7.2, loaded 3 more 1.8.3 -> 2.0.3 -> 1.10.2');
console.log('& added jQ_v1_10_2 = jQuery.noConflict();');
console.log('$ is_________________'+$.fn.jquery);
console.log('jQuery is____________'+jQuery.fn.jquery);
console.log('jQ_v1_7_2 is_________'+jQ_v1_7_2.fn.jquery);
console.log('jQ_v1_10_2 is________'+jQ_v1_10_2.fn.jquery);
console.log('*******************************************************************');
</script>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
jQ_v2_2_4 = jQuery.noConflict(true); //Passing true argument will store "jQuery" version to get previously to latest loaded jQuery
</script>
<script>
console.log('SCENARIO 3:');
console.log('*******************************************************************');
console.log('Along with previously loaded jQuery libraries, ');
console.log('loaded 3 more 3.0.0 -> 2.1.4 -> 2.2.4');
console.log('& added jQ_v2_2_4 = jQuery.noConflict(true);');
console.log('$ is_________________'+$.fn.jquery);
console.log('jQuery is____________'+jQuery.fn.jquery);
console.log('jQ_v1_7_2 is_________'+jQ_v1_7_2.fn.jquery);
console.log('jQ_v1_10_2 is________'+jQ_v1_10_2.fn.jquery);
console.log('jQ_v2_2_4 is_________'+jQ_v2_2_4.fn.jquery);
console.log('*******************************************************************');
</script>
<!-- OUTPUT
THUMB Rule 1: $ variable will hold version which is before conflict version
THUMB Rule 2: jQuery variable will hold latest version unless it is conflicted with passing true as an argument
*******************************************************************
SCENARIO 1:
*******************************************************************
Loaded only 1.7.2 & Added jQ_v1_7_2 = jQuery.noConflict()
$ is_________________undefined
jQuery is____________1.7.2
jQ_v1_7_2 is_________1.7.2
*******************************************************************
SCENARIO 2:
*******************************************************************
Along with 1.7.2, loaded 3 more 1.8.3 -> 2.0.3 -> 1.10.2
& added jQ_v1_10_2 = jQuery.noConflict();
$ is_________________2.0.3
jQuery is____________1.10.2
jQ_v1_7_2 is_________1.7.2
jQ_v1_10_2 is________1.10.2
*******************************************************************
SCENARIO 3:
*******************************************************************
Along with previously loaded jQuery libraries,
loaded 3 more 3.0.0 -> 2.1.4 -> 2.2.4
& added jQ_v2_2_4 = jQuery.noConflict(true);
$ is_________________2.1.4
jQuery is____________2.1.4
jQ_v1_7_2 is_________1.7.2
jQ_v1_10_2 is________1.10.2
jQ_v2_2_4 is_________2.2.4
*******************************************************************-->
</html>
view raw Understanding jQuery Conflict in page context.htm hosted with ❤ by GitHub



Comments

Post a Comment