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.
Related
I have several scripts and the $(document).ready is being defined in another script. I tried defining functions in another file that make use of JQuery syntax but they don't work. Is there a way to use jQuery functions if they are not defined in the $(document),ready function?
Here is my first script. it's just a ready block (yes its empty):
$(document).ready(function () {
});
This is my second script:
function editPage() {
$("#mybutton").click(function() {
alert("Clicked");
});
}
editPage();
It does not work.
The second code does not work. They are in different files. The first script is always loaded. I have the jquery library defined. If i place the click code in the first script, it works.
This is ASP.NET MVC 5
If I understand you correct, as long as you reference JS file earlier, you can use it in all other files which is coming later in sequence.
In following scenario, you can use Jquery in "your-test-file.js"
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<script src="/your-test-file.js"></script>
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
I am trying to hide Division B on this page. Due to the nature of the Wordpress template, it's kind of difficult to do. I am trying to use javascript in the footer:
$('div#division-2 div.teampage').prev('h2').css("display","none");
This works perfectly on JSFiddle, so I'm not sure what I'm doing wrong. I also created a javascript file with the code. Can someone please give me some guidance?
In the header, you have this code:
var $jquery = jQuery.noConflict();
This disables the $ shortcut. Replace $ with jQuery or $jquery in your code. For example:
jQuery(document).ready(function() {
jQuery('div#division-2 div.teampage').prev('h2').css("display", "none");
});
The reason the code in hide-division.js isn't working is that while it is using $jquery (for $jquery(document).ready, at least; it still needs to use that in the body of the handler), hide-division.js is running before the code calling noConflict.
In your hide-division.js file, code is like:
$jquery(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Here $jquery is not defined so the next code is not executing. Please remove jquery and use the following code:
$(document).ready(function()
{
$('div#division-2 div.teampage').prev('h2').css("display","none")
});
Hope this helps you.
just try giving $('div#division-2 h2').css("display","none");
$jquery must not given... its invalid... either $ or jQuery must be given...
This tutorial may help u...
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>
I am using a 3rd party script to add a zoom function to images on a page. This works quite well with static, but not with dynamic content.
Static version, works:
$(document).ready(function(){
$('#gallery_main_img').addpowerzoom();
})
Dynamic version, doesn't work:
$(document).ready(function(){
$('#gallery_main_img').load(OnGalleryImageChanged);
})
function OnGalleryImageChanged() {
$('#gallery_main_img').addpowerzoom();
}
The addpowerzoom function is created with this code in the PowerZoom script, which is referenced in the <head> of my page:
$.fn.addpowerzoom=function(options){
// function content here
}
When entering the event handler, Firebug gives me this error message:
$("#gallery_main_img").addpowerzoom is not a function.
So it seems to be a scope problem. My question is:
How do I access the addpowerzoom() function from within my event handler?
If you check that 3rd party script's source, the first thing you'll notice it do is set jQuery in noConflict mode, with the code jQuery.noConflict() and it doesn't assign it to a variable either, meaning the $ isn't reserved for jQuery anymore.
As you mentioned that the first case is working, I am presuming that you have the ready statement before you include the 3rd party script, because otherwise that wouldn't work either.
You could either change your code to this (replacing $ with jQuery):
jQuery(document).ready(function(){
jQuery('#gallery_main_img').load(OnGalleryImageChanged);
})
function OnGalleryImageChanged() {
jQuery('#gallery_main_img').addpowerzoom();
}
example: http://jsfiddle.net/niklasvh/8Vjnu/
or wrap the code inside of a:
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
or perhaps remove the noConflict from the 3rd party script altogether (something that the author should have never put in there in the first place, unless they assume that everyone who use the script wants to remove jQuery from $).