I have created a shortcode via a plugin which adds a bunch of javascript and html out to a page via the PHP for the plugin.
This works just great on the twentyfourteen theme - and my plugin works as expected.
When I try installing my plugin and using my shortcode in a OptimizePress theme it does not work.
When I attempt it there is a console error stating :
Uncaught ReferenceError: jQuery is not defined
This is on this line:
jQuery(document).ready(function() { --this line
jQuery('#calendar').fullCalendar({
header: {
left: 'prev,next today',
This is part of the javascript I add to the page as part of the shortcode.
Interestingly when I look at the source for the page there is certainly jQuery loaded. However, for some reason when I use this shortcode in this theme it has positioned my javascript I echo out as part of the plugin into the as seen in my picture below (my code is inside the highlighted script tag)- whereas the jQuery doesnt load until the end of the page - which is probably why we hit this error with jQuery not being defined.
When the shortcode is used in the twentyfourteen theme my javascript output as part of the plugin is contained inline within the body as seen in this pic (the script tag) of the page - meaning it can find jQuery as it will have loaded:
Can anybody suggest why this is happening and how I can make my javascript sit inline rather than in the of my document when using shortcodes in OptimizePress to help resolve this error or any other solutions to resolving this problem.
The answer was to use add_script within my plugin php and add the script to the wp_footer! Many thanks to alex alex for the support. I had to use global keywords within my php plugin to access variables defined outside of the scope of the newly created php function for the add_script call.
Related
I want to edit some images which can only be done in WPBakery Page Builder. So, when I try to edit the page with it, the frontend editor (page builder) doesn't loads. Console shows the following error:
Although, the library script tag is added before the tag which is using this library:
I don't know if any of this makes sense, but, yeah, I have tried these solutions because they were mentioned on different forums:
Adding charset="utf-8" to external script tag.
Moving the script tag inside Raw HTML element.
Using $(document).ready(function(){}) to enclose the whole of second
script. So, that it loads after everything is loaded.
Unfortunately, none of these worked for me.
The page builder works fine on pages where I don't use the d3.js library. And, the visualization works fine WHEN NOT IN PAGE BUILDER - the library loads up and the visualization is displayed. You can check it out here:
https://conductscience.com/age-when-charles-darwin/
Also, please note that I don't have access to any of the theme files. So, I can't make any changes to functions.php or any other file.
Your question is related to the WPBakery, not Visual Composer plugin. You need to have the latest version 5.7 in order to fix this issue. More information, contact support.wpbakery.com if you have a valid license.
I found that solution, to expand all accordion sections:
http://www.bootply.com/peFUdnwOpZ
I copied the code in Joomla.
Via Gantry I loaded Javascript file. I tried even, to load the javascript within the article.
But It is not working. Can Anybody help?
Background information:
I had to add bootstrap min.js, otherwise, the function "accordion" was not working properly. Template is working with Bootstrap 3.3.6.
I tried even to add the exact same files, loaded in http://www.bootply.com/peFUdnwOpZ.
//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
Next Try. I loaded script via Joomla plugin. I loaded the script in header and body, before and after head/body tag.
Nothing worked.
I traced it down: On another template, I worked with, I figured out, that the order of loading the 3 javascripts is very important. So, loading manually before end of header is much important! first jquery.min.js than bootstrap.min.js and than custom javascript (see in the example link) worked. But on my own site, it seems, there are some errors in loading jquery and bootstrap javascript properly. Because console says:
null is not an object (evaluating '$('.closeall').click')
So, it misses the link to the other javascript files. Maybe some can help?
I believe you may have forgot to add the following piece of code in your custom js file -
$('.closeall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
$('.openall').click(function(){
$('.panel-collapse:not(".in")')
.collapse('show');
});
Hope this may work for you :-)
I recently started learning Javascript. I am trying to add a small script to the footer of a page on my Wordpress site. I am using the "insert headers and footers" plugin. However, the script does not seem to load. I do not believe it is a syntax issue, since a similar script works on a different site. However, I cannot figure out what is different here. When looking at the inserted script in chrome inspector, inside of the script seems to be just plain text (not colored javascript code). Is there something I can do to fix this and make the script run?
Link to the page: http://memories.uvaphotography.com/home/services/
Javascript code I am trying to insert:
<script>
$("#reply-title").hide();
</script>
jQuery in WordPress runs in noConflict mode which means the global $ shortcut for jQuery isn't available. Replace your code with the following:
<script>
jQuery(document).ready(function($) {
$("#reply-title").hide();
});
</script>
Inside the document ready wrapper the $ can be used as an alias for jQuery.
The reason that you're not seeing your script execute is because jQuery isn't assigned to the $ variable.
When viewing the element inspector console on your page there's a javascript error
Uncaught TypeError: undefined is not a function
When I run the same script via console replacing $ with jQuery the #reply-title is hidden successfully.
I'm using wordpress and trying to include various JavaScript files in my theme's templates. The file which causes the error is the very last js file which is included but I still get this error. Could I get some help?
$(document).ready(function() {
$("#image-cycle").cycle();
});
the error is thrown at the very first line - but the script is loaded well after jQuery.
Wordpress uses jQuery's noconflict mode by default. This means you always have to wrap your code in a DOM ready handler that will map jQuery to the dollarsign, otherwise the dollarsign will be undefined, like this :
jQuery(document).ready(function($) {
$("#image-cycle").cycle();
});
The codex
You probably forgot to include Jquery.
Check if u have put put the script tags properly and closed them.
You might have put the src of jquery but the tags might be wrong.
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.