I'm trying to get a WordPress plugin "FlipBook" to display in a theme, however, in Console, the following URL will have the error listed below it: http://wiredhat.com/proofs/stc/wp/the-essential-guide/
"Uncaught TypeError: s.find(...).addSwipeEvents is not a function" referencing flipbook.min.js?ver=4.5.1:1
When using a default WP theme, the error goes away and it shows the proper output:
http://demo.modded.com/stc/wp/the-guide/
I'm not quite sure what's causing the conflict. It would be helpful if someone would indicate how they came to the correct fix for this so I could answer these things myself in the future.
You're loading two copies of jQuery in your page. First you load this:
<script type="text/javascript" src="http://wiredhat.com/proofs/stc/wp/wp-includes/js/jquery/jquery.js?ver=1.12.3"></script>
and later you load:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
$.fn.addSwipeEvents is defined after the first copy of jQuery is loaded, but it gets called after the second copy is loaded.
If you really need two versions of jQuery, you need to make use of jQuery.noConflict() to ensure that you call things with the save instance that they were loaded into. But if you don't, get rid of the second script tag.
Related
I am using jQuery 3.x and Infinite Scroll 3.x (https://infinite-scroll.com) in my online shop. The online shop software I am using is called Shopify. I like it so far, but I have a big issue with my javascripts I am using. I want to use the Infinite Scroll, but all I got is a
jQuery.Deferred exception: $(...).infiniteScroll is not a function
TypeError: $(...).infiniteScroll is not a function
All I did is this the code scnippet below. When I am trying to paste it in my online shop page, I got the error above, but when I create a local index.html file and try the exact same code snippet, I got no error.
I checked already that both scripts are loaded, I even thought it might be a timeout problem, so I did a timeout just before I run the .infinteScroll method, but still, the error above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script>
$(document).ready(function(){
$('.container').infiniteScroll({
// options
path: '.pagination__next',
append: '.post',
history: false,
});
});
</script>
I can see that you have loaded jQuery more than once in your website. Which may create conflict. Clean it up and load jQuery only once in your theme. Load all jQuery plugins after that.
I'm try to get the Bootstrap drop down functionality to work, but am noticing something very odd.
For some reason, I have to load the bootstrap.min.js BEFORE jquery in order for the drop down to work.
Here is the code when drop-downs don't work:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Then, if I switch them around (bootstrap before jquery), drop-down magically works. I don't understand why this is considering bootstrap needs query to run, otherwise I get an error in Firebug of:
ReferenceError: Can't find variable: jQuery
Any explanation and/or help would be great!
I would imagine it is because your calling the dropdown code outside of a
$(document).ready(function() { })
If you load bootstrap first, it may finish before the call is actually made to the bootstrap code, but before jquery finishes loading, hence the missing reference. tho its hard to now without seeing the code, are you just using the data-api for the dropdown?
I'm currently working on converting an HTML5 template called Rekreato into a wordpress theme. I've managed to set up a bare-bones theme, but whenever I activate any plugins with jQuery scripts, a few of my jQuery effects are broken. Specifically, in Firefox debugger I get --
TypeError: jQuery.easing[jQuery.easing.def] is not a function #
jquery.easing.1.3.js:46
Here is the page in question. You can see about halfway down there is an image slider that is not functional. I have left one plugin active, called WP eMember.
I've tried a number of things like configuring my theme as a child theme, wrapping jquery.easing.1.3 in a document ready function, and moving the script call around in the code, but to no avail. I'm not even sure that the easing script is at fault. The answer is probably staring me in the face, but I can't seem to figure it out. Many thanks in advance.
EDIT: Excellent suggestion from markratledge. I put the scripts in functions.php with wp_register_script() and wp_enqueue_script(). At first I was very confused that even more things were broken. Reading further, I saw that since Wordpress uses a noConflict wrapper around its built-in jQuery library, the $ shortcut is unavailable. So, I went through all of my scripts that were showing errors in the inspector and swapped '$' with 'jQuery'. Voila! Everything jives. Thanks again!
Check out Function Reference/wp enqueue script « WordPress Codex on how to load JS in WordPress themes and avoid jQuery errors, with examples shown.
You're loading a bunch of jQuery by direct link, but then wp_head comes in and loads more jQuery for the plugins, and collisions occur. I.e., the two different main jQuery libraries; check in the Firefox console to get a list of all the JS that is loading.
From that doc:
wp_enqueue_script links a script file to the generated page at the right time according
to the script dependencies, if the script has not been already
included and if all the dependencies have been registered. You could
either link a script with a handle previously registered using the
wp_register_script() function, or provide this function with all the
parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress
generated page.
I have a Boilerplate 2.0-based page and want to add tooltips. Under the call to load jQuery, I add a call to load the jQuery-tools bundle, and then in js/script.js call:
jQuery(".has-tooltip").tooltip();
The result? No tooltips show up; Chrome's JavaScript console gives:
jQuery('.has-tooltip').tooltip();
script.js:30Uncaught TypeError: Object [object Object] has no method 'tooltip'
So far as I can tell, and from the order of things in index.html, the following happens:
I load jQuery.
I load jQuery Tools, without apparent error.
I call jQuery().tooltip(). This errors out, and doesn't display tooltips.
What can I do to ensure that the Tools extension is being registered to jQuery and I can call jQuery().tooltip(...)?
ATdhvaanckse,
--edit--
It's for a portfolio; the URL is:
http://JonathanHayward.com/portfolio
I've tried to pull things in to local loading (i.e. removed the CDN jQuery hit); this has not produced observable differences.
First, You load jQuery twice, also have two body and html closing tags and fix Modernizr issue which is not defined
I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.
You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.
The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)
The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)