my website is marutiindia.in. My website was working fine until I installed a module named lof k2 scroller. The website was showing jquery errors and the module at the lower half of the template was not working. But I managed to get the module to work by adding the following code at the start of the JS file which was showing error:
if(jQuery){
jQuery.noConflict();
}
But, now I am getting other JS errors which I am not able to understand.
Below is the link for the screenshot of errors:
Screenshot
I don't know what these errors mean.
Also I have one more plugin to use for my website which also causes scroller to not work.
Please help me resolve these errors.
Thanks.
Joomla uses Mootools, which also use the $ function name. in order to avoid this, your plugins either:
must use jQuery instead of $. For example, instead of $('div') to get divs, use jQuery('div')
if you really want to use $, wrap the jQuery code in a closure
(function($){
//code that uses `$`
}(jQuery))
make sure the plugins are extending from jQuery and not $.
Related
I'm trying to use two different libraries on a single webpage -- Materialize.css and JQuery EasyUI -- but their code seems to be interfering with each other and I'm running into errors. Is there any way I could ensure their codes do not conflict with each other and each run separately?
I guess using an iframe could be a solution here, but that would introduce other problems for me. Is there any other way I can ensure they both run on the same page in harmony?
EDIT: I should point out that I'm using the functionalities of each of of the libraries in two different sections of the page. More specifically, the Materialize.css is used for the navbar, text and the general look of the page whereas I'm using JQuery EasyUI just to display an editable datagrid.
Typically it is impossible to prevent conflicts between libraries that you yourself do not write/manage. If they don't have a means of preventing a conflict (like jQuery's jQuery.noConflict()), you just have a problem, except if you use module bundlers like Webpack which enables to load modules under different aliases so that they don't conflict.
Materialize and jQuery both use the $ prefix. Instead of using $.noConflict();, try assigning jQuery to a new variable as a prefix:
var jq = $.noConflict();
Then you'll be using jquery with the variable name as prefix, ex:
jq("div").click(function(){
//do something
});
I'm trying to run JS code in WordPress, using a plugin; but can't make it work.
Here on this Codepen page, you can see the element I'm trying to integrate on my site (i.e. a drag and drop feature)
http://codepen.io/galaxija737/pen/pHvEi
And here, this is working properly.
But then, I can't figure out how to integrate the JS code properly into WordPress; whatever plugin i'm using. And idem into JSFiddle, impossible to run properly the script, as you can see...
https://jsfiddle.net/szan6shz/)
For instance using "TC-custom-javascript" plugin; when I add the JS code, nothing is running (i.e the drag-drop feature is not working; like on the Fiddle) :
I'm really new at Javascript as you can see. If anyone can give me a hand on this. (I guess i miss something is the way JS needs to be written/integrated)
Thanks a lot!
Greg
WordPress runs jQuery in safe mode. This means that you need to call it with jQuery instead of $. You can call your initial onload function with jQuery and pass $ into the function to define its use throughout the function.
See this example:
jQuery(function($){
$('.theclass').fadeIn('slow');
});
I have a website that is built off a parent site, and needs to be as identical as possible. My clients have a process through which they grab all the scripts and css files of the parent site and use them to create the child. For one of these websites though, I am getting an error in the main javascript file that is not happening on the parent site.
Here are the two websites:
parent site
child site
The main issue is that the carousel at the top of the page (I believe it's using slickslider) is not getting initialized on the child site. I am not sure if this is because of the Javascript errors, and if you can figure out the reason why it's not working I will be super grateful as that is the main issue at hand. That said, I'm assuming right now that my problem is the javascript error in main.js:
Uncaught TypeError: l.Deferred is not a function
Again, there are no errors on the parent site, but l.Deferred breaks on the child site. Why isn't it working?
I tried wrapping l in jQuery -- $(l).Deferred -- but when I did this it seemed to cause a loop, where the page would spend several minutes trying to load before timing out and crashing.
If you can tell me why the slider on my child site isn't working, or at the very least why l.Deferred is breaking, that would be a huge help.
EDIT: Update to use the correct version of jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>jq11 = jQuery.noConflict(true);</script>
<script src="/sites/all/themes/wma2/js/main.js"></script>
(function($){
window.matchMedia || (window.matchMedia = function(){....
})(jq11);
UPDATE: I checked the console and $.fn.jQuery is using the jquery 1.11.2 at the point when it says l.Deferred is not a function
I also tried wrapping l in the correct jquery:
jq11(l).Deferred
but when I do that the page gets stuck in a loop and crashes after trying to load for several minutes.
I'm not 100% sure what "process through which they grab all the scripts and css files of the parent site and use them to create the child" means, but the client page is at least at some point loading jQuery 1.4.4 (check the first of the last 3 included scripts in the head).
$.Deferred wasn't introduced until jQuery 1.5, https://api.jquery.com/jquery.deferred/ so trying to run anything using 1.4.4 will throw an error because that function, indeed, doesn't exist there.
One of the last scripts on the page loads another entire copy of jQuery, and THAT one, 1.11, does support Deferreds. But it's almost the last thing to run on the page, so almost no code uses it. So you have an old jQuery, then code that tries to use a method in a newer jQuery, and then finally a newer jQuery. That's why jQuery and $ aren't even assigned to the same thing, as you can confirm in the console:
jQuery.fn.jquery: "1.4.4"
$.fn.jquery: "1.11.2"
It's possible that you have code that uses old 1.4.4 syntax, so you may not be able to replace it, but it's probably best, if you do need both versions, to wrap all your code explicitly in an IIFE
(function($){
/* code using $, which maps to whatever is specified at the end*/
})(jQuery);
that specifies which of the two you mean to use.
I had an blog using WordPress. I got an jQuery code to make some div fixed after some scroll, got it here:
http://jqueryfordesigners.com/fixed-floating-elements/
Someday ago, I got an plugin to make and "Recent Post Slider" for WordPress. But when I activate it, the fixed div jQuery stop working. I think that can be an conflict, but really don't have sure yet.
What is the best move to know what's happening?
You can use jQuery.noconflict() for this. For example:
$j = jQuery.noConflict();
$j("your_div").css("position", "fixed");
Here you have the code explanation. jQuery.noConflict
Get a browser with JavaScript debugger console and make it print you the $ variable. jQuery returns : function (a,b){return new e.fn.init(a,b,h)}. The $ variable is sometimes used by other libraries, and if you use it directly in your jQuery it may get overwritten. To avoid this, encapsulate your jQuery code:
(function($) {
your code with $
})(jQuery)
This may break some of your global variables though, it depends on how you wrote your code.
I don't think that jQuery does not work anymore as #nicowernli said. But it is possible that the plugin changed the html of the page.
The best move is to disable the "Recent Post Slider" plugin and check if the fix starts working again. Then you will know what where problem is.
make sure that you've included Jquery once but no more
Hello I am using the jQuery plugin fancybox to display bing maps when somebody enters an address into a textbox and hits the submit button beside it. And a fancybox is loaded and a map for that address is displayed. This is working well with my application, but the problem is, it is only working well on one page and on the other one, when I load it, it is giving me an error saying fancybox is not a function. I get to see this error in the error console and in the firebug console. I am not sure what could the problem. The same code works in another page, but it doesn't on this one?
$("Map").fancybox is not a function
I am pretty sure it is not re-usability issue. But when I test to see if fancybox's original files have been loaded, they are loaded with the dom, so it might not be actual problem. But I am unable to understand what else could the problem be.
This is my code
abbr: is just a text bit. I have different divs based on what the user selects. And each div would have its own controls, which would start with that text and are appended with their own definitions such as mapresults, decValLat, decValLon etc.
ex: abbr>>east
and then the ids would be eastmapresults, eastdecValLat, eastdecValLon etc.
function showMapFancybox(abbr){
var abbr;
$('#'+abbr+'mapresults').hide();
$('Map').fancybox({
overlayShow: true,
onClosed: function() {
$('#'+abbr+'mapresults').show();
map_latdec = $('#decValLat').attr('value');
map_longdec = $('#decValLon').attr('value');
map_latdeg = $('#degValLat').attr('value');
map_longdeg = $('#degValLon').attr('value');
$('#'+abbr+'decValLatsub').val(map_latdec);
$('#'+abbr+'decValLonsub').val(map_longdec);
$('#'+abbr+'degValLatsub').val(map_latdeg+'N');
$('#'+abbr+'degValLonsub').val(map_longdeg+'W');
}
}).click();
};
I already had this type of errors because i was reloading jQuery after the plugin import, check you don't reimport jquery by mistake (sometimes included in a package like jQuery tools).
I just had this issue, it seem some versions of jQuery are not compatible with versions of FancyBox, for example Fancybox 1.3.4 is buggy with jQuery versions below 1.7 and doesn't work on version higher than 1.8.
Possible Solutions:
1) have you already loaded jQuery? If not, then load it before any $ commands start.
2) Check, probably you are loading jquery library (.js) several times during the page. Try to load only one.
3) In the end of file, you can execute this javascript command: $ = jQuery.noConflict(); and it might solve. If not, then anywhere use the word jQuery instead of $, and it will work too.
You need to load the extensions like easing.js and mousewheel.js BEFORE the main fancybox plugin. That solves the problem.
If "fancybox" as a function does not exist, it is likely that either the jQuery source or the plugin source are failing to load into your page. Make sure that the pathing, file names, and extension are all correct.
EDIT: Make sure that you link to jQuery Source before you link to any plugins. If a plugin is loaded into your HTML before jQuery is, the plugin fails.
In my case it was jQuery.noConflict(); row in another jQuery plugin ... when I removed everything started to work.
If you are using a plugin which includes JQuery into your header tag, this trouble can arise.
I recently added 'TheThe Slider' to my blog, all my FancyBoxes stopped working. There are easy fixes for this situation though. basically, go to the plugin directory, search for the call to jquery and make it's usage conditional. If you would like to see my implementation of this I did blog about it with screen-capture.
I got this issue in my WordPress web site and I found the issue was happening due to fancybox.js presenting twice in the code from two plugins which I installed. So check your code and make sure to load from one source.