We Keep Coding

Uncaught ReferenceError: d3 is not defined in WordPress Visual Composer

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.

$(...).popover is not a function

I have looked through quite a few posts on here dealing with this issue, but none of them seem to solve my problem.
I have imported the jQuery and Bootstrap js files in the right order. Things such as bootstrap panels are working perfectly fine for me.
My script imports are like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
However, when I try
$('[data-toggle="popover"]').popover();
I get the following message in the Chrome console:
Uncaught TypeError: $(...).popover is not a function
At first I thought maybe popover was not being included in CDN's copy, so I went ahead and downloaded a local copy with all the plugins included from here:
http://getbootstrap.com/customize/
and got the same error message (re-pointed the script tags towards the local js file).
Doing a search for "popover" the bootstrap.min.js file:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js
Shows that popover is included in the file.

Since you have stated you have included jQuery and the other libraries correctly, 1 possible case is there could be multiple instances of jQuery in the page.
So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).
In case of duplicate jQuery instances the problem is the jQuery version to which the plugin is attached might be different from the one which you are accessing to use the plugin at that point the plugin will not be found.
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

The order of including bootstrap.js and jquery.js matters. Include the jquery.js BEFORE bootstrap.js

For Bootstrap 5 onwards this is how you add popovers
Code for Button:
<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Your Cart(<span id="cart">0</span>)
</button>
Script:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
</script>

Had the same problem and checked jquery version. Moving to v1.12 helped me

What worked for me, was making a call to $.noConflict() which returned control of $.
That was because some other JavaScript libraries use $ as a function or variable name, just like jQuery does. During jQuery initialization, there are some old references of $ saved. noConflict() restores them.
$noConflict();
jQuery(document).ready(function ($) {
$("#id").popover('hide');
});

Assuming you are correctly added popover script in the your site.
To fixed the "$(...).popover is not a function" bug. Sometime just add a timer delay can be fix it.
$('[data-toggle="popover"]').popover();
Modify to
setTimeout((function() {
$('[data-toggle="popover"]').popover();
}),500);
Sometimes (always) the web page doesn't fully render the content and the POPOVER will gives this error. So, We need 500ms delay starting the popover script. Sometimes 500ms is not enough to wait for rendering, so more delays can be modified as needed.
Even in bootstrap 5 has this issue too
Conclusion
POPOVER script starting need waiting whole page completely render.

So based on the server technology used, search for a duplicate version of jQuery and if there is any remove them(if not needed else will have to think about noConflict() use).

This is Happen due to Differ version of bootstrap
In This case use script of same version as your bootstrap
In other case jquery is not recommended. insted use Advance Css Js
This is also happen cause latest bootstrap doesn'

After hours, I found out that I forgot to attach bootstrap.js file to my page ;)

JS FlexSlider doesn't work in Joomla 3

I have a JS FlexSlider module in my joomla page.
It works fine on all positions but not at the Position I want it to be.
And the position works fine with all other modules.
Here is the page: http://www.ehemalige-hoelderlingym.de

If you check your browser console, you will see a JS error. You also have 2 jQuery libraries being imported which simply means that the developer of FlexSlider has not stuck to Joomla coding standards.
In the Module Parameters, you will see the option Enable jQuery 1.8.2? which you need to set to No.
This will prevent duplicate jQuery libraries being imported and thus most likely fix the console error.
They should really remove this option for the Joomla 3.x version of JS FlexSlider as it is simply not required.
Update:
I've checked Firebug and you're now getting an error because the module is importing the script before jQuery.
You have 3 options:
Option 1: Download and install the jQuery Easy plugin. This will ensure jQuery is loaded only once and before any other script on your site.
Option 2: Create a Template Override for the module and once done, in the default.php change this:
<script src="modules/mod_js_flexslider/assets/js/jquery.flexslider-min.js" type="text/javascript"></script>
to this:
<?php JHtml::_('script', JUri::root() . 'modules/mod_js_flexslider/assets/js/jquery.flexslider-min.js'); ?>
Option 3: Use a different slider extension
Personally I would go with option 3 as you shouldn't have to rely on a 3rd party plugin to get a slider working, and option 2 is something the developer should do.

Javascript $(function() Not Working for WordPress

Okay, I am trying to add the following jquery in my header.php file for my wordpress website:
<script type="text/javascript">
$(function() {
$( '#co-slider' ).circleslider()
});
</script>
This is copied directly from the html source file I downloaded, ive spent the past 3 hours trying to come to a conclusion for the problem, however I am a nebie when it comes to wordpress. So far all I have been able to gather is that it is possibly because of no conflict mode. I tried reading up on no conflict here http://api.jquery.com/jQuery.noConflict/ along with following instructions I thought were relevant from another question and here is the link for that jquery not working in wordpress . Also I dont think this is the issue but this is how I referenced my javascript.
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/staff_new/js/jquery.circleslider.js"></script><script type="text/javascript" src="<?php bloginfo('template_url'); ?>/staff_new/js/jquery.circleslider.js"></script>
I say i dont think its the issue because this is how I have it for other things as well and they work just fine, but it is also possible im clueless as to what im talking about. I also read here http://codex.wordpress.org/Function_Reference/wp_enqueue_script for referencing I should be using wp enqueue. But I also read that the way I currently have it works just fine. Any help would be greatly appreciated, as i would really love to get this working for the site.
Cheers

it's because by default, wordpress loads jQuery to the jQuery namespace, not $. so you can change the $ to jQuery instead, or, do what I usually do which is to make a reference to jQuery before your jQuery code:
var $ = jQuery;

You can make everything working as
jQuery(function($) {
$( '#co-slider' ).circleslider()
});
In WordPress, the$() syntax is always used by other scripting library,
and causing the conflict issue and fail to call the jQuery function.
You should use jQuery() instead…
Alternatively, you can use noConflict() …

Zoomy script not working in Joomla K2 site

I have a Joomla K2 site, and when user clicks on the image in K2 it should be opened in a popup with k2. But now that doesn't work anymore and the problem is in the Zoomy script. Here is an item from my site can any body help me fix this problem?

Well I think the problem is that you have 5 versions of jQuery running lol. If you open the source using Firebug or Chrome's extension, you will be able to see. If the extensions you have have a jQuery parameter, turn 4 of them off, else use the following code to ensure that it's only embedded once:
<?php
// load jQuery, if not loaded before
if(!JFactory::getApplication()->get('jquery')){
JFactory::getApplication()->set('jquery',true);
$document =& JFactory::getDocument();
$document->addScript(JURI::root() . "path_to_file/jquery-1.8.2.js");
}
?>
Update:
Here are the jQuery files being embedded:
ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
/plugins/content/plg_zoomin/plg_zoomin/jquery-1.5.min.js
/modules/mod_sj_k2_accordion/assets/js/jquery-1.5.min.js
/plugins/system/onexitpopup/js/jquery.1.7.1.js
Im not sure where the 2 googleapis ones are coming from, but 1 is coming from a module called mod_sj_k2_accordion and the others are coming from 2 plugins. So find the plugins and either remove the jQuery reference or add the code I posted above instead. If you do use the code I posted above, please make sure you change the path your path.