I have a bit of an issue with getting Dropzone to work with jQuery. I was wondering if anyone could help.
I've tried both jQuery version 1.11.1 and 2.1.1 and neither seems to work. I've made it to work with straightforward Javascript but, I was planning on doing some major scripting and want dropzone to work with jQuery to save a few variables from being created to transfer data.
The Dropzone documentation mentions a jQuery plugin. But, I can't find it anywhere in the source and it's only mentioned here:
http://www.dropzonejs.com/#toc_4
With no information as to where it actually is.
I'm planning on using Dropzone with a div rather than a form and with no server code involved. It's a static one-off-use web page. For the time being I'm just following the documentation.
Here's some of my code:
HTML
<link href="css/dropzone.css" type="text/css" rel="stylesheet" />
<script src="dropzone.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
<body>
<div id="dropthat" class="dropzone"></div>
<script src="script.js"></script>
jQuery
$(document).ready(function() {
$("div#dropthat").dropzone({ url: "/file/post" });
//Below is my older, working Javascript code, still here for comparison.
//var myDropzone = new Dropzone("div#dropthat", { url: "/file/post" });
});
I'm sure I've either missed something really small or it is indeed a problem with the lack of the jQuery plugin file. Does anyone know about the jQuery plugin file and it's name? I've run a search for jQuery in the source files for dropzone but can't find anything. It seems like Dropzone was made as a jQuery plugin first and has only recently become a standalone. Or maybe it's my version of jQuery.
If worst comes to worst, I can always grab variables using JavaScript event listeners rather than jQuery.
I'm not entirely sure what are you asking for, but if you want to know about the relationship between your library and JQuery, just look inside the source code:
if (typeof jQuery !== "undefined" && jQuery !== null) {
jQuery.fn.dropzone = function(options) {
return this.each(function() {
return new Dropzone(this, options);
});
};
}
First it checks if jQuery is already loaded on your page and if it does, then it attaches itself as a plugin, which means: in order to use the jQuery plugin you need to ensure that your jQuery library script runs before Dropzone.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="dropzone.js"></script>
Notes:
- I looked inside the source code provided in the INSTALLATION section from here
- Git wiki (maybe it will help you during development)
Related
I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.
Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.
I have a script src for a deprecated version of JQuery which I cannot control (controlled externally via a CMS, not cross-domain, just no access to changing it) and I'd like to change the script src to a newer version of Jquery.
Old code:
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
Replace with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Once an external script has loaded, it can't be removed as it's already loaded into memory, so changing the source would just load another version of jQuery without removing the first version, so you'd have two versions of jQuery, creating a conflict, and in many cases nothing will work.
There is a workaround if you absolutely have to:
$(function() {
$j_142 = $.noConflict(true);
$j_142.getScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function() {
$j_191 = $.noConflict(true);
});
});
FIDDLE
now you have two versions of jQuery mapped, and to use them you'd do:
$j_191('#selector')
of course, this would cause issues with code already written, but you could probably get away with just mapping the second script to a new variable or something ?
EDIT:
You could use a closure to map one of those values back to the dollarsign within the closure:
(function($) { //anonymous self invoking function
// now you could use the dollarsign as normal
$(function() { // document ready function
});
})($j_191);
You can use
var oldJquery = document.querySelectorAll('script[src="js/jquery-1.4.2.min.js"]');
oldJquery.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
Once you do this, it will automotically will download coz it is live dom element. All changes should be reflected immediately.
But I would suggest that long term this is not good idea. what if CDN from google is down.
You might be in trouble. Just take precaution while doing this changes.
That easy, this is your code:
$("script[src='js/jquery-1.4.2.min.js']").attr('src', '//ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js');
This is example http://jsfiddle.net/rebeen/KwLM3/
on my site I am using a few of the newish JQuery UI controls like the datepicker and dialog.
I recently found a cool project online showing how to make the google dashboard, which is also used on the bbc.co.uk website.
This allows the user to have widgets that move around nicely when selected.
I created a test solution, it worked.
When I integrated it into my exisitng solution with currect Jquery controls and versions it causes a number of errors shown in firebug.
These are:
$("#menu").mouseleave is not a function
$('#menu').mouseleave(function() {
for this piece of code:
$('#menu').mouseleave(function() {
setSubItemVisibility();
});
for the datepicker JQuery ui control:
$(".startdate").datepicker is not a function
$(".startdate").datepicker({ dateFormat: 'dd/mm/yy' });
for the dialog:
$("#inputupdatecontrol").dialog is not a function
position: 'top center'
These all work fine until I put in the inettuts with cookies dashobard solution in found here: http://james.padolsey.com/javascript/inettuts-with-cookies/
This includes the following JQuery versions and files:
jquery-1.2.6.min.js
jquery-ui-personalized-1.6rc2.min.js
cookie.jquery.js
inettuts.js
Is there any way I can seperate the functionality that comes with these files from my existing JQuery versions?
I am currently using the latest Jquery version out and have no problems, its only when i add this functionality from the old versions that I face problems.
I am only using this old version of Jquery on one page, but ofcourse the new versions are needed to.
Cheers
Okay here is the full pattern, put the following in:
<script src="jQuery1.3.js"></script>
<script>
jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
jq131 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
The variables jq13 and jq131 would
each be used for the version-specific
features you require.
Jquery in the command above returns a reference to its self essentially 'boxing' it in another variable.
So to call a function on 1.3 you would call
jq13('#'+ myId).bind('onclick',function(){});
NOTE : You must load the first version of javascript that was developed last.
Yes you can use jQuery.noConflict.
I have a custom developed WordPress plugin that is using jQuery 1.4 and for some reason it is conflicting with the core of the WordPress js code... not sure, but I think it's also jQuery, no?
Anyway, I assumed it was this datepicker script I was using called "anytime.js" however, after debugging it turns out that the conflict was still happening after removing the link within the plugin to "anytime.js" but finally resolved when I got rid of the link to jquery.1.4.min.js ...
So, Any ideas for how to avoid the conflict? Is WordPress jQuery-based and that's the cause or is it something else?
Here's the relevant code found within the plugin:
function datepicker_header(){
$theme_dir = get_bloginfo('wpurl').'/wp-content/plugins/postevents/js/';?>
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>anytime.css" />
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type='text/javascript'></script>
<script src="<?=$theme_dir?>anytime.js" type='text/javascript'></script>
<script type="text/javascript">
$(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
</script>
EDIT
I think I may have caused some confusion. I should explain functionality. There is a plugin called "Post Events" that has a jQuery based datepicker. The datepicker relies on jQuery to run. The specific and unusual problem is that while the plugin is active, it causes the new WordPress 3.0 draggable menus to fail from the WP admin panel. All other functionality is working, however, disabling the datepicker does not result in the menus becoming draggable. Instead, only deleting the link to "/libs/jquery/1.4.2..." in the code above causes the menus to become draggable again.
EDIT #2
While I can only indicate one correct answer, both #Matthew as well as #polarblau's corrections below were required to fix the problem!
This code will check to see if jQuery is already loaded... then loads it if it's not already (this code loads from Google code - you can update the URL to a local file if you like).
if(typeof(jQuery)=='undefined'){
var loadjQuery = document.createElement("script");
loadjQuery.setAttribute("type","text/javascript");
loadjQuery.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(loadjQuery);
}
I do have to note, however, that this will only work if loaded AFTER another potential instance of jQuery (there's no guarantee that an instance of jQuery won't be loaded later, unless it performs this same check).
This is useful in situations where jQuery is loaded SOMETIMES and you need it to ALWAYS be loaded, no matter what. In that case, place this code at some point after the original would have loaded, but before you use any jQuery functionality.
One more thing: I sometimes WordPress gets fussy with the $ in jQuery code. You can get around this by simply typing out 'jQuery' (or performing a find/replace) instead of $ anywhere the $ is needed.
See this link about properly adding scripts to Wordpress:
http://weblogtoolscollection.com/archives/2010/05/06/adding-scripts-properly-to-wordpress-part-1-wp_enqueue_script/
And yes, Wordpress uses JQuery for some of it's functionality...
Try:
jQuery(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
Generally it's a good practice to wrap your scripts and plugins which are using jQuery into their own scope:
(function($){
//... your plugin, etc. here
})(jQuery);
Let me give my question some context. I have a JavaScript widget. The widget includes a copy of jQuery from my site. This widget is placed on a third-party site. The widget parses a JSON feed and injects the contents into the DOM. Pretty simple stuff.
If the third-party page already has jQuery referenced and relies on jQuery plugins, conflicts could arise. Especially, when the third-party site references a different version of jQuery. $.noConflict() is useful, but the existence of plugins make it unreliable. From the $.noConflict() documentation:
If necessary, we can free up the
jQuery name as well by passing true as
an argument to the method. This is
rarely necessary, and if we must do
this (for example, if we need to use
multiple versions of the jQuery
library on the same page), we need to
consider that most plug-ins rely on
the presence of the jQuery variable
and may not operate correctly in this
situation.
To get around this issue, my idea is to reset the name of the jQuery global object. At the bottom of the jQuery source, there are these lines:
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
Could I refactor the lines to:
// Expose jQuery to the global object
window.myjQuery = jQuery;
I've removed the shorthand $ variable, and I've changed jQuery to myjQuery. Now my code can look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>myjQuery</title>
<script type="text/javascript" src="myjquery-1.4.js" />
<script type="text/javascript">
// .ready() can alias the jQuery object
// I can pass $ and write code as normal
myjQuery(document).ready(function($) {
$('p').css('color', 'red');
});
// Fails
jQuery(document).ready(function($) {
$('p').css('color', 'blue');
})
// Fails
$(document).ready(function() {
$('p').css('color', 'green');
})
</script>
</head>
<body>
<p>myjQuery changed my color to red.</p>
</body>
</html>
Is this a good idea? I don't know the internals of the library enough to say for sure. I understand the library is basically a closure, so I'm guessing this approach is OK. Thoughts?
EDIT: I've accepted Doug's answer because he provided code which is almost identical to an example on the $.noConflict() documentation page. I didn't notice it before. Here is the example:
// Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
// Do something with the new jQuery
dom.query("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
// Do something with another version of jQuery
jQuery("div > p").hide();
It's not normally a good idea to edit a released file if you don't need to. I read your question, and this solution will work for your needs. Don't edit the jQuery core at all. Do this:
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
// Revert $ and jQuery to their original values:
window.myjQuery = jQuery.noConflict(true);
(function($){
// Inside here, $ = myjQuery
$(document).ready(function(){
});
})(window.myjQuery);
</script>
The important thing is for your widget to include jQuery, then immediately call noConflict(true) and store it in a variable.
If you follow these steps exactly, it will not affect existing jQuery instances or plugins on the page. It will only give you a private version of jQuery in the variable myjQuery for your own plugin.
Secondly, using a self executing anonymous function, you can create a private scope for your widget where $ equals your included jQuery file.