Javascript $(function() Not Working for WordPress - javascript

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() …

Related

$(...).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 ;)

Including jQuery to website will affect whole website

I have bought dating site software called eMeeting. I tried to add a custom javascript slider to the header. The slider needs jquery library to work, but when I include the library, other scripts from the webpage stop working. But if I comment the line below (located in sliders js file)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Other javascripts from the page will work again.
I have done an example of my problem to here.
It would be really nice if someone has some time to help me or give me some suggestions. Also the webpage is http://flirt.ee
Best Regards,
Mairo
Probably a conflict with another library.
Add this right after you include jquery:
<script>$.noConflict();</script>

Possible jQuery conflict when using bgStretcher

I have setup a test html page to play with bgStretcher before adding it to a custom Wordpress theme. It works fine when I use the jQuery version:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
on , but it stops working when I use the version included in Wordpress:
<script type="text/javascript" src="http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1"></script>
The only difference I've seen between the two files is that the WP version prevents jQuery conflicts at the end, calling noConflict().
The page (html below) loads the first image, but then the console outputs an error:
Uncaught TypeError: Cannot read property 'fn' of undefined
(anonymous function)
The live version is on: http://pebbl.es/test/test .Any ideas on how to fix this? I can see it is a conflict error, but I can't see where/how to fix it? Many thanks.
<html>
<head><title>Test</title>
<script type='text/javascript' src='http://pebbl.es/test/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
<script type="text/javascript" src="bgstretcher.js"></script>
<link rel="stylesheet" type="text/css" href="bgstretcher.css">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('body').bgStretcher({
images: ['Rochy_Coleccion1.jpg', 'Rochy_Coleccion2.jpg'], imageWidth: 1024, imageHeight: 748
});
});
</script>
</head>
<body>
</body>
</html>
Namespace your jQuery: http://api.jquery.com/jQuery.noConflict/
add this between the two script tags:
var $my_jq = jQuery.noConflict();
after this, you have your 1.6.1 jQuery in no conflict mode.
you will have to call it using your variable name after this, e.g. $my_jq('#content')
UPDATE
this might not work, I see you are not loading 2 different jQuerys, your problem occurs when trying to use bgstretcher with an jQuery that is already in noConflict mode.
I am not a wordpress expert, but you might just change the wordpress jQuery to use your variable name. You can set jQuery in noConflict mode with or without namespacing it to a variable and it looks like your wordpress JQ does it without.
Or you can first load your own jQuery, namespace it and then use this for bgstretch.
The problem is that the noConflict call "frees" the $ variable again for use with different frameworks that also want to make use of it, so your bgstretch gets an error when trying to call $.
Or just try to remove the noConflict completly and see if it has any effect on your wordpress installation (it should not, I guess it is just for the purpose of giving WP users the ability to use different JS frameworks as well).
Hope you work it out.

jQuery noConflict for a dummy

I have a jQuery plugin conflict in Wordpress which I need some help with. On my test page at: http://timbaggaley.co.uk/test/ I have installed the Easy Fancybox plugin for image and video presentation. It worked fine until I installed the jQuery backstretch plugin using code posted into a Javascript adder widget. I'm guessing my problem is the call on multiple libraries and I need to use noConflict. I have amended my code to:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.timbaggaley.co.uk/js-includes/jq_backstretch/jquery.backstretch.js"></script>
<script type="text/javascript">
var $j = $.noConflict();
$j(document).ready(function() {
$j.backstretch("http://timbaggaley.co.uk/backstretch/pic4.jpg", {speed: 150});});
</script>
The backstretch still works but the Fancybox still does not. I am a complete programming novice and I have read as much of the jQery noConflict advice as I can find but cannot figure it out. Can anyone help me with some copy 'n' paste idiot-proof guidance on how to implement the noconflict trick into my website?
Thanks
Tim, London
Well, actually, Easy Fancybox uses jQuery, so this is not an issue of using multiple libraries. Therefore you should not use .noConflict().
First remove "var $j = $.noConflict();" and Try using "jQuery" instead of "$j"
I would normally just called $.noConflict() rather than store it in a variable.
Also, you can avoid conflict all together (normally) by using jQuery(document).ready() instead of $.

Jquery code breaks page Javascript

I required a function to remove URLs from <a> divs found within <div class="rj_insertcode">. Not being familiar with with direction to tackle this, I eventually mustered up the following Jquery code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div.rj_insertcode a').each(function() {
$(this).replaceWith($(this).html());
});
});
</script>
</head>
My site uses Joomla CMS and I was able to add the above script to the bottom of the template index.php. It works quite well and removes the links generated between the defined tags.
My problem:
Pages that also include JavaScript do not operate correctly. JavaScript appears to be disabled or not functioning.
What can I change to ensure JavaScript still operates correctly, or is there another method I could adopt?
Have you tried using jQuery(... rather than $(... ? That would be a first place to start. I'm not too familiar with Joomla, but I know many CMS's will put jQuery into noConflict mode, and try to keep things happy with any other javascript libraries that might be included.
Joomla uses Mootools, which does not work with jQuery and would cause your script to break on pages that use Mootools. You can try:
window.addEvent('domready', function(){
$$('div.rj_insertcode a').set('href','');
});
What is the actual problem? Javascript is not being loaded, not executing or not executing correctly? You could use Firebug to get more info and/or paste some page source as it's shown in the browser where the problem is.
Unlike most other modern CMS's such as Expression Engine, Drupal, or WordPress, Joomla loads MooTools in the Joomla head tag rather than jQuery. Using PHP to remove the MooTools can cause third party modules to break.
By default loading jQuery with MooTools causes the page to break. Use MooTools instead and you should be all set.
Cheers,
Christopher

Categories