How to use FancyUpload in a JQuery based project? The page in which I will use FancyUpload is made of JQuery. How to use FancyUpload? Please mention every steps in details. Please
You could just place jQuery in noConflict mode. Doing this requires that you put wrappers around all jQuery code where mootools will be loaded on the page. It's simple enough.
Example:
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.2.5/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" language="javascript">
// Example with Sep Mootools and jQuery domready's...
(function($){
window.addEvent('domready',function() {
// Do some MooTools Magic here!
});
})(document.id);
(function($) {
$(document).ready(function() {
// Do some jQuery stuff!
});
})(jQuery);
// Example with Mootools used as domready, with jQuery calls inside
(function($){
window.addEvent('domready',function() {
// Some mootools magic here!
//......
//Option 1 for jQuery using jQuery identifier...
alert(jQuery("#some_input_value").val());
// Option 2 for jQuery using temp override of $
(function($) {
alert($("#some_input_value").val());
})(jQuery);
});
})(document.id);
</script>
maybe you should use http://www.uploadify.com/demo/, its native Jquery with Flash. FancyUpload is a mootools plugin.
I successfully implemented FancyUpload with jQuery loaded as I discussed above. jQuery.noConflict() is the best solution if you want both jQuery and Mootools to co-exist. Otherwise, yeah, probably should stick with either "just" jQuery or "just" mootools.
My opinion, though, is that (while I'm a jQuery fan), the FancyUpload tool for Mootools is hands-down the cleanest, nicest looking, best/easiest to use tool for the job. it's the only piece that was mootools for me, and is light-weight enough to include without seriously burdening the browser loadtime.
If your heart is set on using FancyUpload in your jQuery project:
Step #1: Get MooTools.
FancyUpload does not work in jQuery, and as far as I know, there are no plans to make it do so. There are, of course, plenty of alternatives, such as meo's answer, above.
Related
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>
I am using jQuery on my website. However, given that Chrome plugins might import a jQuery version of there own in the global scope ($), how do I prevent their jQuery (from a plugin on the client's browser) from overriding my jQuery (the one being originally loaded with the website and the extended functions built on top of it).
Use Jquery jQuery.noConflict()
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
For More details refer https://api.jquery.com/jquery.noconflict/
Would recommend looking in to jQuery.noConflict, you give $/jQuery a different reference - https://api.jquery.com/jquery.noconflict/
var j = jQuery.noConflict();
j( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
Use the following. jQuery.noConflict() for tackling these situations.
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="other_lib.js"></script>
<script>
$j(document).ready(function(){
//your code
})
</script>
Then use you can use $j instead of jQuery or $ on the places you need to use jQuery reference. Same can be used if there are multiple versions of jQuery is needed on the page. Just use different variables.
In my regular project setup we are using jQuery v1.6.2, but recently we have started to use Kendo UI plugin for charts; this plugin won't support the jQuery version v1.6.2, it works only with v1.7 or higher, so we are forced to load v1.7 also using noConflict.
Are there any side effects to my existing old code? Can we load and use two versions of jQuery at the same time?
Yes, you can do it. Using jQuery.noConflict() you can make multiple versions of jQuery coexist on the same page:
<script src='jquery-1.3.2.js'></script>
<script>
var jQ132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jQ142 = jQuery.noConflict();
</script>
extracted from jQuery forums
Later, you just use jQ16 instead of $, e.g.:
<script>
jQ16.ready(function($) {
// inside here, $ refers to jQ16
$('#something').val(); // ...
});
</script>
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>
I use
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
to load jquery and then load an external script that contains these :
var jkpanel={
controltext: 'menu',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('1', '80px', 1000)
and also use a mootools plugin of course.
MY QUESTION IS THAT how should I use var $j = jQuery.noConflict(); in the above script to prevent conflicting
Wrap all the JavaScript that relies on jQuery in a closure to prevent namespace conflicts, like so:
// Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
It looks weird, but the syntax is right (yes, the first line starts with a semicolon). This automatically substitutes jQuery for the $ object, which both jQuery and mootools make use of. Since you're using both, you should wrap all of your jQuery code in a closure like this (one for each .js file or script tag).
If the problem is just, you load MooTools, and then you load jQuery, and then MooTools doesn't work because jQuery has taken over the dollar function, then you probably just need code like this:
<script type="text/javascript" src="mootools.js"> </script>
<script type="text/javascript" src="jquery-1.2.2.pack.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
That should get jQuery to relinquish $(). The code you have in your question already does the other handy thing, which is use the parameter to the ready event handler as a way to locally use a shorter name for the jQuery object.
I'd strongly recommend reading the jQuery page on working with other libraries and maybe the documentation for the noConflict() function.