Multiple jquery noConflict files - javascript

I am implementing 2 sets of functions as below:-
For Window generation - Required jQuery Libraries are:
- jquery.js (v1.3.2)
- jquery-ui.js (v1.7.2)
I am using an extensive library used here - which creates a jquery based dialog window using $.window{...}.
For Autocomplete/Plugin Searching, - the required Libraries that I am using are:
- jquery.js (v1.7.2)
- jquery-ui.js (v1.8.18)
These 2, separately, work perfectly fine. But, when used on the same page, I had to create noconflict files so that both of these functions meet somewhere in between. Thus, for now, I am using:
jquery.js (v1.3.2)
jquery.js (v1.7.2)
jquery-ui.js (v1.8.1)
as:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.autocomplete.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js"></script>
/* Here I would like to use the script below with another noConflict, because v1.8.1 (above) causes flickering of dialog boxes while dragging around & isnt smooth like the one below, which is v1.7.2:-
<script type="text/javascript" src="http://fstoke.me/jquery/window/js/jquery/jquery-ui.js"></script>
*/
<script type="text/javascript" src="http://fstoke.me/jquery/window/js/jquery/window/jquery.window.js"></script>
When used like above, there are fair amount of visual glitches when interacting with windows. When moving windows around often other sections of the page get highlighted or flicker (quick highlight) - roughly 50% of the time. The dragging & resizing arent much smooth either.
If I remove the v1.7.2 jquery.js, the windows are a lot smoother, but the autocomplete functionality ceases to work. If I remove v1.3.2 jquery.js, the windows are not generated.
Right now, I use the functions like:-
function createSampleWindow() {
sampleWnd = $.window({
.......//Code here
}(jQuery_1_3_2);
How can I use the v1.7.2 jquery-ui.js here too using some variable like:-
<script type="text/javascript" src="http://fstoke.me/jquery/window/js/jquery/jquery-ui.js"></script>
<script type="text/javascript">
var jq_172= $.noConflict(true);
</script>
Qn 1 What is the correct syntax for using both variables - jQuery_1_3_2 AND jq_172 - for the same function? Something which is used here like:-
function createSampleWindow() {
sampleWnd = $.window({
.......//Code here
}(jQuery_1_3_2, jq_172);
Or
function createSampleWindow() {
sampleWnd = $.window({
.......//Code here
}(jQuery_1_3_2),(jq_172);
Doesnt work.
Qn 2 Would it be possible to implement a large javascript such as the one used in fstoke with jquery.js v1.7.2 instead of v1.3.2 - If someone can make a notable distinction as to why replacing v1.3.2 with v1.7.2 makes it stop working - I would be much obliged.
If I might add, since the windows are made by $.window({...}); - Replacing $.window by $.dialog doesnt make a dialog box. Is there somewhere I am going wrong? Please glance through the js file used in fstoke.
Qn 3 Could someone point out what difference is there between fstoke jquery-ui and cdn hosted jquery-ui - both being v1.7.2 jquery-ui.js files.
I feel it is a very long query, but I need help with this urgently. Kindly help me at the earliest.!

I'll take question 1.
The correct syntax for using both versions of jQuery would be something like
var jQuery_1_3_2 = jQuery.noConflict(true);
function createSampleWindow() {
var no_op = jQuery.noop; // refers to jQuery 1.7.2's noop function
var no_op = $.noop; // same as the above
var no_op = jq_172.noop; // same as the above
var guid = jQuery_1_3_2.guid; // refers to jQuery 1.3.2's guid member
}
In other words, you just use them, if you have them defined already. noConflict(true) will return $ and jQuery to their previous meanings, so you can go on using them as usual.

Related

How to organise multiple portlets which require jQuery and jQuery extensions?

I am developing a few portlets for Liferay 6.2 and chose to use jQuery along with a number of extensions.
I seem to be getting problems where the extensions I need are attaching themselves to a jQuery instance which is not the one that I am using in the portlet. So when I come to use an extension it is not available.
My code looks something like this. The liferay-portlet.xml contains
<header-portlet-javascript>/js/jquery-1.12.2.min.js</header-portlet-javascript>
<header-portlet-javascript>/js/jquery-ui.min.js</header-portlet-javascript>
<header-portlet-javascript>/js/datepicker-de.js</header-portlet-javascript>
<header-portlet-javascript>/js/calendar.js</header-portlet-javascript>
In the JSP
<script type="text/javascript">
var $CAL;
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
$CAL = jQuery; // create my own jQuery handle
...
$CAL.datepicker.setDefaults($CAL.datepicker.regional['de']);
// $CAL.datepicker is NULL !
});
</script>
I'm not sure, but I think the datepicker function gets attached to a different jQuery instance. The debugger lists about 7 instances of jQuery and 3 instances of jQueryUI that different portlets are loading.
After some research, we tried to load all JS libraries in the theme but some portlets are loaded before the theme. Our current attempt is to load them in a 'hook'. That is still on-going.
At the moment we are creating all the portlets ourselves. It is possible that in the future we might want to use a 3rd party portlet so I'm wondering what the best approach is.
EDIT
The answer below and How to resolve two jquery conflict?
show how to avoid the conflict when multiple jQuerys are loaded. Is this best practice in Liferay portlet development? I assume that the are times when requiring different jQuery versions is unavoidable but is it normal for each portlet to simple load its' own copy of jQuery?
$CAL = jQueryis the issue. Define $CAL as variable referencing jQuery.noConflict()
Create a different alias instead of jQuery to use in the rest of the
script.
var j = jQuery.noConflict();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$CAL = jQuery.noConflict();
$CAL(document).ready(function() {
$CAL.datepicker.setDefaults($CAL.datepicker.regional['de']);
console.log("jQuery version ", $CAL().jquery);
$CAL("body").datepicker("dialog", "10/14/2016");
});
</script>

Conflict between pages in Jquery easy tabs, trying to solve with jquery noconflict

I have an easy tabs page,with three different pages(TAB1,TAB2,TAB3).
Tab.php
Tab1|Tab2|Tab3
//Tab1 has an slider plugin(with Jquery UI)
//Tab2 has an autocomplete for select list
The conflict come from because two function wants to use jquery variable.
Two pages contains jquery plugins but with only jquery version(jquery-1.11.1.min.js)
The tabs only works properly(elements showing,jquery methods correctly running) when only one tabs is enabled(just commenting the link).
I use the jquery no conlict to try to solve this problem(before that there was conflict between the main tab page and the invidual page):
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var s = $.noConflict();
</script>
So on the sub page(tab1) i use like:
s(document).ready(function(){.....}
I also try to define a second shortcut(first i try to use the same 's' there too) :
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var j = $.noConflict();
var s = $.noConflict();
</script>
to use this at the Tab2 page.It was not a solution for me.Diseable Tab1 and using 'j' also works good.
One more importent thing is the firts downloaded page shown correctly each time,so i know the conflict is becuse of the jquery variable(overwrite it or something like this).
I try to find a solution by my self but i couldn't.Please help me
Update1:
As i note before i made a lot of research before that:
Jquery tabs conflicting with revolution slider
This question is very similar for my problem,but the difference i have more tabs,more conflict so i thought if i use more shortcut it will solve the issue.
Update2:
It is more interfering between the plugins than conflict.
using
var s = $.noConflict(true);
totally throw awey the full page,even the tabs does not want to work
First the tab.php load,it is using the jquery global variable,
than if i click on Tab1 it is also wants to use the global variable,
After if i click on Tab2 also need jquery variable
So bumm the interfering is ready
Update3:
After a lot of research,i found the problem is not with the noconflict.
The Tab2(upload.php) page is correctly rendered when i full reload the page.
s(document).ready(function(s) {//without the ready it does not rendered even after F5
s("#modell").select2(); });
I believe that you are trying to load jQuery with a different variable name. I would suggest that you use:
$.noConflict();
jQuery( document ).ready(function( blah ) {
//You can now use blah as the jquery method (e.g. blah("#button").click();)
});
I've made an example here: http://jsfiddle.net/me66st8w/. You can find out more about this in the official documentation here: http://api.jquery.com/jquery.noconflict/.

Undefined is not a function when using jquery plugin

I am using a plugin that converts my select boxes to better looking select boxes through a method called tzSelect(), which is contained in the jquery.tzSelect.js file. When this file is called from script.js (it is called on document ready), it functions correctly. However, when called in main.js, I get Unknown TypeError: Undefined is not a function.
This is the functioning call in script.js:
jQuery(document).ready(function($){
$('select.regularSelect').tzSelect();
});
This is the nonfunctioning call in main.js (not within anything else)
function redoSelect(){
$('select.regSelect').tzSelect();
}
And lastly, the order in which my javascript is loaded in my footer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="/static/js/ready_script.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/tzSelect/jquery.tzSelect.js"></script>
<script src="/static/js/script.js"></script>
The plugin only works with the older jquery, which explains the version. I have tried placing the function in a document.ready and using the word jQuery instead of $, both to no avail. Any ideas?
EDIT: Fixed. The issue was with my jQuery version. The newer version of jQuery broke a couple of features, which I was then able to fix with small edits.

Two different versions of JQuery in the same HTML page

I have an HTML document where I have referenced jQuery version 1.2.2 in the header for thickbox and I have later referenced jQuery 1.7.1 just before the </body> tag which is for a picture slideshow.
The problem is that the thickbox won't work unless the reference for jQuery 1.7.1 is removed which then stops the slideshow from working.
I have googled around to find out about $ conflict but none of the suggested solutions worked.
The most common one I have seen and did tried is: var $j = jQuery.noConflict();
How can I resolve this?
<script src="http://code.jquery.com/jquery-1.2.2.min.js"></script>
<script type="text/javascript">
var jQ122 = jQuery.noConflict();
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var jQ171 = jQuery.noConflict();
(function($) {
$(function() {
// here $ is jQuery 1.2.2
});
})(jQ122);
(function($) {
$(function() {
// here $ is jQuery 1.7.1
});
})(jQ171);
</script>
If the plug-ins are well-behaved, then this should work:
<script src="jquery-1.2.2.js"></script>
<script src="thickbox.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="slideshow.js"></script>
(Obviously those script names are made up.) Here's an example (source) (I used jQuery 1.4.2 and jQuery 1.7.1 because Google doesn't host 1.2.2).
The above works with well-behaved plug-ins because a well-behaved plug-in doesn't rely on the global $ at all, but rather uses the value of the jQuery global as of when it was loaded and grabs a reference to it in a closure, then uses that local reference throughout the plug-in's code, like this:
// Example plug-in setup
(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})(jQuery);
or
(function() {
var $ = jQuery;
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
})();
Both of those grab the global jQuery value as of when the plug-in is loaded and then use their local alias throughout.
If the plug-in wants to wait for the ready event, it can also do this:
jQuery(function($) {
// ...Plug-in code using `$` here -- note it's a *local* `$`,
// not the global `$`, and not the global `jQuery`...
});
...which uses the jQuery function passed into the ready handler.
Any of those three would work correctly (with thickbox seeing jQuery 1.2.2, and slideshow seeing jQuery 1.7.1) with the script load order listed above.
But the "if" in my opening sentence is a big "if". A lot of plug-ins are not written to be bullet-proof in this way.
The above notwithstanding, I would migrate away from any plug-in that requires jQuery 1.2.2 in order to work, and wherever possible (and it's almost always possible) avoid having to load two different versions of any library, including jQuery, in the same page.
I would not advise using two different versions of jQuery. There are some other alternatives to thickbox that works perfectly with the latest jQuery.
What you want to do is an extremely bad practice (you should indeed migrate all code to the same version) but it can theoretically be done...
You would need to make changes to the respective plugins anyways tho...
consider this code:
<script src="jquery-1.4.js"></script>
var jQuery14 = jQuery;
<script src="jquery-1.7.js"></script>
var jQuery17 = jQuery;
you would then change the code of your plugins at the point where jQuery is handed to the plugin, which would look similar to this:
(function( $ ){
// all your plugins code would be here
})( jQuery ); // replace "jQuery" with one of your respective jQuery14/jQuery17 versions/variables
Be advised.. this is veryveryvery messy to say the least!
write clean code or pay later! :)
Although you could use jQuery.noConflict(); to declare separate versions of jQuery at the same time.
I've often had some problems with IE8 with certain libraries when I do that.
So, an alternate solution would be to use an iframe to load a page within your current page.
Have a given version of jQuery on one page, and another on the second.
For example:
<iframe frameborder="0" width="700" height ="400" scrolling="no" seamless="seamless" src="your.html"></iframe>

ContentFlow: load AddOn on creation?

I'm using ContentFlow (http://www.jacksasylum.eu/ContentFlow/index.php) to create an image carousel on my page. The images are loaded via a jQuery AJAX-call. This works fine. The ContentFlow is included with this code:
<script language="JavaScript" type="text/javascript" src="contentflow.js" ></script>
Now I want to apply the default 'white' addOn upon creation of the ContentFlow. The CF is created in my document.ready()-codeblock. According to the documentation this should be done like (I believe):
$(document).ready(function () {
...
var ajax_cf = new ContentFlow('ajax_cf', {useAddOns : 'white' });
});
The ContentFlow is created just fine, the AddOn/theme however, is not applied. When using a non-AJAX approach the theme is applied correctly, so I know for sure the theme works, has no syntax errors, etc.
Any clues?
You need to manually add the addon script into the page.
For example, to include the slideshow addon use:
<script type="text/javascript" src="content_flow/contentflow.js" load="slideshow"></script>
<script type="text/javascript" src="content_flow/ContentFlowAddOn_slideshow.js"></script>
Then the Ajax config. worked for me
Trying to find the answer to something else about ContentFlow, I may have stumbled upon a solution to your issue: http://www.jeremyckahn.com/blog/?p=61
This post basically suggests not to set your ContentFlow configurations in $(document).ready
Additionally, my experience from Oliver Kohll's answer is that you DO need to specify the AddOn you want in the 'load' attribute for inclusion of contentflow.js as above...but you should NOT need to also specify the AddOn.js
Hope this helps!

Categories

Resources