Using jQuery noConflict() with script.aculo.us - javascript

I have a site using a "widget" (from http://healcode.com) that includes the script.aculo.us JavaScript library. The problem is that the site I'm building is on WordPress, so there's the classic jQuery vs script.aculo.us conflict.
I know that I need to run jQuery in .noConflict() mode, but I must be getting the syntax wrong. When I assign the $ to jQuery .noConflict as follows, it still shuts down the script.aculo.us functions:
var $ = jQuery.noConflict();
$(document).ready(function () {
//#nav-main dropdown effects
$('#nav-main ul li').hoverIntent(function () {
$(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
$(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
I know that I am assigning the $ to jQuery in .noConflict() mode, and I assume that script.aculo.us (which loads via a widget in the main body, therefore AFTER jQuery) is trying to re-assign the $ back to script.aculo.us.
How can I assign the $ to jQuery in a way that the later-loaded script.aculo.us library won't conflict? I've already tried the following without any success (the following code causes script.aculo.us to work, but jQuery to fail):
jQuery(document).ready(function () {
//#nav-main dropdown effects
jQuery('#nav-main ul li').hoverIntent(function () {
jQuery(this).find('.dropdown').stop(true,true).slideDown('900'); },
function(){
jQuery(this).find('.dropdown').stop(true,true).slideUp('500');
});
}); // end document.ready
EDIT
The debug console output for the above code is:
Uncaught TypeError: Object #<HTMLDocument> has no method 'ready' (anonymous function) so the document.ready fails because it's assigned to jQuery, which is somehow not loading properly...
EDIT 2
Both of the 2 (at the time of this update) answers posted below do nothing to address the issue I'm struggling with. Perhaps they are technically correct, but they do not address my issue.

This worked for me so that I can have jQuery and script.aculo.us/Prototype working well together. Credit goes to codeimpossible for this lifesaver!
Instead of:
jQuery(document).ready(function () {
// Code to run on DOM ready
}); // End document.ready
Try this:
( function($) {
// Code to run on DOM ready
} )( jQuery ); // End document.ready

I found the solution VERY surprising!
First of all, using the $j = jQuery.noConflict(); mode did not work.
Second, calling jQuery.noConflict(); at the head did not work.
The method that did work was this one: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/
Oddly, the Coda Slider 2.0 plugin does not automatically do noConflict so it turned out that IN ADDITION to the problems listed above, I needed to wrap that plugin in .noConflict(); as well. Shout out the the author of the blog post, not sure why other noConflict(); calling methods didn't work, but I'm glad I found the post.

Assigning jQuery right back to $ doesn't do anything.
Either assign jQuery to a different variable:
var j$ = jQuery.noConflict();
Or don't assign it to anything:
jQuery.noConflict();

Try this:
<script src="url to jquery"></script>
<script type="javascript">jQuery.noConflict();</script>
<script src="url to scriptaculous"></script>

Related

jquery not loading in a script from another domain

I have the problem that I want to load a Javascript on a website from another website and use jQuery there. But it seems jQuery is never available.
I tried all the things in this post: Test if jquery is loaded not using the document ready event.
Is it maybe a security cross site issue?
Here is the page:
Japanese cities
jQuery is loaded here in line 29
<script src="/cache/template/gzip.php?jquery.min-3eab6f02.js" type="text/javascript"></script>
The script is loaded in line 343
<script type="text/javaScript" src="http://www.factfish.com/api/js/japanese_cities.js"></script>
To narrow it down I just used an empty $ajax function
(function() {
if (jQuery) {
$.ajax({});
}
})();
I always get the error
TypeError: $.ajax is not a function
Any ideas?
Thank you
Bernhard
In your page there's
<script src="/cache/template/gzip.php?jquery-noconflict-4baa84c1.js" type="text/javascript"></script>
which does this:
jQuery.noConflict();
This means you
Relinquish jQuery's control of the $ variable
I.e. $ is no longer associated with jQuery, and you must explicitly use jQuery instead.
See this: https://api.jquery.com/jquery.noconflict/
This should work:
(function() {
if (jQuery) {
jQuery.ajax({});
}
})();
Another way to do this:
(function( $ ) {
$(function() {
// More code using $ as alias to jQuery
$.ajax({});
});
})(jQuery);
As pointed out by #dekkard, you have effectively erased the $ shortcut alias for jQuery.
As an alternative to the IIFE's shown by #dekkard, There is also a shortcut DOM ready that combines document.ready with a locally scoped $
e.g.
jQuery(function($){
// Your DOM ready code - using a locally scoped $
});
"Half the code, twice the flavour!" :)

jQuery No Conflict Wrapper Not Working

I'm getting the dreaded Uncaught TypeError: undefined is not a function error in WordPress. I'm pretty sure that I've properly enqueued my jQuery script (it's showing up properly in the footer), and I've used the following no conflict wrapper at the start of my code: jQuery(document).ready(function($) {.
I've tried replacing all $ variables with jQuery. I've also defined var $j = jQuery; and replaced all $ variables with $j.
There are other theme-generated jQuery scripts on the page that are working (embedded, not enqueued), so there might be potential conflicts, but I'm not sure how to debug that.
Any help appreciated. I can provide link to the site if that helps.
EDIT
I had this script working perfectly earlier from within the jQuery UI Widgets plugin, but that plugin seemed to be causing serious issues (crashed my site). So I disabled the plugin, and I haven't been able to get the script working since.
That doesn't look quite right. Try this
(function($) {
$(document).ready(function() {
console.log("dom is ready");
});
})(jQuery);
You could try this:
var j = jQuery.noConflict();
j(document).ready(function () {
...
//replacing all Dollar Signs with the j
});
That's what worked for me

Creating a very simple jQuery plugin, not working

I've never created a jQuery plug-in before. I'm trying it out and keeping it simple for now- here's my plug-in code which is hosted on a CDN in my company:
(function ($) {
$.fn.displayToastrNotifications = function () {
alert('test');
};
})(jQuery);
I'm referencing this JavaScript file inside my page:
<script src="http://server/sites/CDN/Scripts/toastr-notifications.js"></script>
Finally, in the same page, I have:
$(document).ready(function () {
$.displayToastrNotifications();
});
Am I doing this right? The JavaScript file containing my plug-in code is being brought back to the browser per Firebug. I do not get an alert box when I refresh my page. What am I doing wrong?
EDIT
The console reports an error:
TypeError: $.displayToastrNotifications is not a function
$.displayToastrNotifications();
But, it is a function, at least I think it is...
No, that's not right. You're adding the function to $.fn, so that means it's something to be used as a method of jQuery objects:
$(something).displayToastrNotifications();
If you want a "global" function like $.ajax, then you'd set it up as just a property of $, not $.fn.
since it is a plugin it need to be invoked in a jQuery wrapper object like
$('body').displayToastrNotifications();
Demo: Fiddle

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>

Drupal problems with noConflict JQuery

Hi I am trying to make a jquery no conflict work as descriped here:
http://drupal.org/node/1058168
I have this in my php template:
<script type="text/javascript">
var $jq = jQuery.noConflict();
</script>
I modified my javascript accordingly. But it does not work... it starts the first function, but then after it, it does not run any of it:
$jq(function () {
console.info('First $JQ function');
//"use strict";
// this function is strict...
$jq(document).ready(function () {
The $jq(document).ready(function () does not run, hence the whole script stops. The full script is located at www.htconsulting.hu/sites/validation.js
Thank you for your help!
Update:: removing the first $jq(function () did help to at least remove the dougle ready functions. Still it does not solve the problem I faced initially for which I use the noConflict. Part of the code would ensure that based on input thhe input area color changes, as the helper text next to it. The text still does not change. Since in my testing enviroment everything worked, I assumed its because the site I am forced to use, uses old Jquery. Appereantly, using the newer one still does not solve the problem. Form located at www.htconsulting/test/form
$jq(function () {
is equivalent to
$jq(document).ready(function () {
http://api.jquery.com/ready/
So basically you have a document.ready inside of a document.ready. I don't think that works, try removing the inner ready and see if that helps.

Categories

Resources