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
Related
This little task is causing a bigger headache than it needs. I just wanna get a simple dropdown like:
Pretty easy, right? It even gives me the code? How hard could it be? I first imported the CDN in my page.
<head>
<!-- stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
</head>
and then after all that, I add:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
According to their documentation, all I need to do is:
$('.ui.dropdown')
.dropdown()
;
on my ui-dropdown class element, but it just gives me problems.
<Uncaught TypeError: $(...).dropdown is not a function
I looked at the following things to help, but didn't have much luck:
Semantic-UI Dropdown Not Working #229
semantic-ui dropdown menu do not work
but didn't have luck
Moving jQUery so it loads first
Adding the simple class
It just looks like no matter what I do... the script isn't getting initialised.
Can you post your code to somewhere (jsfiddle or codesandbox) so we can detect the problem easier? (Sorry I don't have enough reputation to just comment on your question yet)
=======
My answer:
It seems that your code ran before the jQuery library being fully loaded to your browsers. Can you try wrap your execution codeblock into $( document ).ready(function(){} like this?
$( document ).ready(function() {
$('select').dropdown()
});
This was not related to Semantic UI.
It was due to the way the DOM was being rendered. In my case, I had nested snippets (Rails Partials) and in seems like Semantic does not like when you initialize with .dropdown() in the child view.
Hence, I fixed this by initializing in parent and it works like a charm!
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'm trying to have a div appearing in a dialog using the jQuery-UI function. It will be a contact form in my blogspot site. However I keep getting the notorious 'Undefined is not a function' error. I searched a lot without eventually being able to address the issue and I have no idea about what's going on.
Below is a fiddle EXACTLY as in the blogspot code (even same id names). You can see that in the fiddle the code functions perfectly.
HTML:
<a id='emailform' href='#'>Click here!</a>
<div id='contform' style='background-color:red;width:200px; height:200px;display:none;'>Blablabla</div>
JS:
$(document).ready(function () {
$("#emailform").click(
function () {
$("#contform").dialog();
})
});
http://jsfiddle.net/mukL3hq8/2/
Any help will be greatly appreciated.
UPDATE: Changed the line #4 to a simple alert message and it worked. So I think that this narrowed the problem down to the jQuery UI library.
I don't know why but I have found that jQuery sometimes has some trouble working with Blogger, what mostly solved the issue was wrapping it like this:
<script>
//<![CDATA[
jquery here
//]]>
</script>
I find that blogger will sometimes encode some elements within my script and this will prevent blogger from doing so, thus the script is executed properly.
Maybe it'll solve your problem as well.
Ok, issue tracked down. It seems that the problem caused by a duplicate 'include' of the jquery-ui library. The template I've used was making a second reference to a jquery-ui library (which was also an older one from what I've used) and caused a conflict. Removing the second reference just solved the problem.
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).
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.