I am using Magento 1.7 version. On my checkout page I have added Autocomplete code with jquery-1.10.2.js and jquery-ui.js. If I use jQuery.noConflict(); below the jquery-1.10.2.js, the Autocomplete works perfectly however I am not able to see the Menubar. And if I use jQuery.noConflict(true); it is showing menu however, I am not able to select the Autocomplete City Value by keybord (I am able to select the City Value by Mouse).
What could be the issue?
What is missing?
Where am I going wrong?
What/Where should I place jQuery.noConflict(true)/jQuery.noConflict()?
your help is appreciated.
noConflict(true) will set $ as the jQuery variable, and you can no longer use jQuery to call functions like jQuery('#someelement).focus() because jQuery will be undefined.
If you code
<script type="text/javascript">
$ = jQuery.noConflict(true)
</script>
as the first line of the html, and then replace every jQuery with $ (which is good practice anyways) then you shouldn't have a problem.
Related
I have the following page https://german-academic-institute.eu/faqs/ with the WPBakery plugin that has the Accordion menu for FAQs in the middle of the page. All those menus are made to be closed, but for some reason, they are not, and the option to close/open them doesn't work when I click on them. I tested also other collapsable menus and the same thing happens. SO I assume it has to do something with Jquery but can't figure it out.
I could use any help
Thanks.
Dev Tools and browser Console is your friend. You can reach it by right-clicking on the page and from the menu shown chosing Inspect/Inspect Element (the actual text varies accross browsers). In the Dev Tools if you click on the Console tab, you will see the errors in the browser and can experiment with scripts. Kindly look at this image:
You have rightly guessed that the problem is with jQuery, as your page attempts to reach jQuery with that variable name, however, in your case jQuery is called $.
A quick fix is to create the variable before it is being attempted to be used:
var jQuery = $;
or replacing jQuery with $ in all its occurrence. Kindly note the thought process of the solution:
I looked at the error and figured out that the variable is missing
I checked whether the variable is called $ instead of jQuery
Based on the acquired knowledge I have made a plan and written an answer to you
The datepicker appears to be blocking the accordion functionality from being available.
This is the datepicker "script" in the <head> of the page markup. Searching the page, this is the only instance of datepicker in the markup and as the console shows, blocks other code - such as the accordion - from running
Console showing the error. Since the datepicker is basically at the top of the page, it will prevent JavaScript that is below it from executing
I was unable to even find anything related to the accordion functionality (in terms of the actual script that would have the accordion functionality in it), but after a bit of time in the console, I came up with this ugly jQuery - jQuery(".vc_tta-panel-heading a").click(function(e){e.preventDefault; jQuery(e.target).parents('.vc_tta-panel').children('.vc_tta-panel-body').toggle()}). Which is what the plugin should do. Not exactly an answer, but you might have better luck contacting the plugin author for advisement.
Go ahead.
<!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> -->
you can update!
<script type="text/javacript">
//replace
jQuery( function() {
jQuery( "#datepicker" ).datepicker();
});
$(document).ready(function(){
//include you datepicker function.
})
</script>
<!-- Nice once -->
> note : is good practice include in section
> styles
> html sections
> tags lines javascript and includes
ok so I am trying to get a custom alert box working. I am using jquery 2.1.0 and have found out that the jAlert fucntion is not fully functional in jquery 2.1.0. Well the jAlert function I am using is not anyway.
I am now trying to sort out a no conflict script so I can use jquery 1.2.6 for only this function and the normal 2.1.0 for my other functions.
I have never used this no conflict before so my code may be completely wrong as I misunderstood the description about no conflict.
The below code is my jquery includes
<script type="text/javascript" src="jquery/jquery-1.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1 = $.noConflict(true);
</script>
<script type="text/javascript" src="jquery/jquery-2.1.0.js"></script>
if the above code is incorrect then I do apologize as this is where I misunderstood the no conflict part if i did misread it. The reason why I haven't made jquery-2.1.0.js also a no conflict is because I didn't/don't think I need to make that version no conflict as that is the default jquery I wish to run and earlier jquery versions can't conflict with that. I also thought that if I make this a no conflict then I need to go through all of my functions using the newer version of jquery and pass them through the no conflict function code.
The no conflict function code is what I am having troubles with, that is if the above code is correct of course.
below is the original code i got from a google search and this is also from the page where I read about the no conflict jquery
jQuery_1_1_3('<button>Use jQuery 1.1.3</button>')
.click(function() {
alert('Top: ' + jQuery_1_1_3(this).offset().top + '\n' +
'jQuery: ' + jQuery_1_1_3.fn.jquery);
})
.appendTo('body');
Below is my edited version of the code that isn't working of course and is probably totally wrong as I am bad a js and really need to learn it more.
<script type="text/javascript">
jQuery_1()
(function() {
jAlert("Player details updated successfully","Success"); })
</script>
I am more then willing to use a more up to date version of the alert box jquery function but i just can't seem to find one using Google for some reason.
The script it self will run after someone has submitted a from and has been headed back to a page and that is where the alert box appears to let them know everything went fine.
This is the link to the noConflict description I got my code and also read
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/
Here is the page url http://meracd.com/design/disc_designer.php?disc=cd
I've used jqueryUI for the slider. But it isn't working. I've loaded jquery and jquery UI before the custom.js script.
You have multiple instances of jQuery on your page.
Your jQuery UI Slider Plugin is attaching to window.jQuery (which is version 1.6.2), but your custom.js code is trying to run against window.$ (which is version 1.6.4).
You need to either:
Get rid of one of them (there's no need to have both)
Alias the jQuery used in custom.js
Use noConflict() to resolve which jQuery gets access to the $ variable.
You saved my day, in my case, adding noConflict() solved my problem
sample of my code
#
MVC 4
<script src="/Scripts/jquery-1.8.3.js"></script>
<script src="/Scripts/jquery-ui-1.9.2.js"></script>
jQuery.noConflict();
$(function(){
// var $searchBox = $("input#SearchString");
$("input#SearchString").autocomplete({
source: []
});
});
I just want to say that I had a similar issue and solved it by upgrading my version of JQuery. I had a really old version on the site and by updating to the latest one the issue was resolved.
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.