Fixing a JavaScript conflict in Wordpress, help using wp_enqueue_script - javascript

I think (not 100% sure) that I am suffering from a javascript conflict. I am using a pluggin to generate a countdown clock on my WordPress page, and I am using some simple custom made javascript with jQuery to make a div appear and dissapear on the page at certain points of scrolling.
To make the appearing / dissapearing div work correctly I added two javascript calls into my header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/test1.js"></script>
The first being the jquery library and the second being my custom script. After adding these lines of code to the header, the countdown clock stopped working on my website. Through a little debugging I have realized that it is the Google hosted script that is causing the clock not too work.
When I have the code for the Google hosted jquery library in my header I receive the following error: Error = Object [object Object] has no method 'jCountdown'
I believe the solution to this is using the wp_enqueue_script and wp_register_script in the functions.php file to add the two .js files I need, and removing the code from the header. However, I am un familiar with how these bits of code work and can not seem to figure it out. Below is the code I believe needs to be used in the functions.php file, but I have been unsuccessful in making it work.
function notSureWhatGoesHere() {
wp_register_script(notSureWhatGoesHere);
wp_enqueue_script(notSureWhatGoesHere);
}
add_action(notSureWhatGoesHere);
And here is a link to my test webpage: http://jltest.biz/test-1
Thank you so much for your help and time.

You have a Error = Object [object Object] has no method 'jCountdown'
Maybe your plugin hasn't loaded properly...
Remove the jQuery you added jQuery.1.10.2 so i am not supprised that it doesn't work..
PLUS - WordPress has already added a version of jQuery.1.8.3
Now, in your test file you have this
var startY = 840;
var stopY = 1900;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
{
console.log("Show");
$('.fixedDiv').fadeIn("slow");
}
else
{
console.log("Hide");
$('.fixedDiv').fadeOut();
}
}
checkY();
Wordpress uses jQuery.noConflict(); by default so you need to make sure you wrap your code in something like the following
(function( $ ) {
// Code Here....
}( jQuery ));

Related

ERROR: Execution of script failed! $ is not defined

I've used my script on Tampermonkey (Firefox) for 6 month.
At now I have this error, script work partially, not all time.
I don't know why.
I have tries various suggestions about jQuery, doesn't work
Top of my script:
(function() {
'use strict';
function RPP(){
RedeemRPProduct('fp_bonus_100');
}
var body = $('body'); //I think error is here..
var points = {};
At now script works some times. When it doesn't works appear in console this error:
ERROR: Execution of script 'script-name' failed! $ is not defined
What's happened?
Thanks
I think the cause is that the website administrators removed jQuery from their code. With modern JS, it's mostly obsolete for things like selectors. I recommend simply removing jQuery references from your script and use normal DOM API:
To access body:
document.body
To find an element using selector:
document.querySelector("div#my_div")
Alternatively you could include jQuery in your script using #require.
I see your problem is solved, but leaving this here for others with the same error...
I'm also using Firefox, and my Tampermonkey was 1 year old (I forgot that I disabled the addon's auto updating). It worked fine, I never had the problem you described. Till a couple of days ago when I updated to the new version, and my userscripts stopped loading 10% of the times (got the mentioned error message in console).
Newer Tampermonkey-s are much faster than older versions, loading the userscripts earlier, sometimes before the jQuery library script of the original site is loaded, even if you are using // #run-at document-end.
How I fixed: wrapped my whole userscript content into 1 function, which is called only when the jQuery script is 100% loaded, using a checker function.
Add the next line to the top of your script, right after the Header:
function runScript() {
Add the next lines to the bottom of your script (to the end):
};
var waitForJQuery = setInterval(function () {
if (typeof $ != 'undefined') {
$(runScript);
clearInterval(waitForJQuery);
}
}, 100);
You're referencing jQuery (via the $) before it has loaded into the page.
It is working sometimes as I'm guessing on some occasions jQuery manages to load before you make your call...but sometimes it doesn't and you see the error.
Try this:
<script src="...your jquery reference..."/> <!-- at the top of your page -->
<!-- at the bottom of the page -->
<script>
var body;
var points = {};
document.addEventListener("DOMContentLoaded", function() {
body = $(body); //it won't try and use jQuery until the doc is ready
//...other script stuff...
});
</script>

Calling nested div class in Javascript. Revised code not working in WordPress

Need help.
I am creating a div inside body>div>div .
Reference: Creating div in a nested class using javascript
Here's a link to my jsfiddle https://jsfiddle.net/41w8gjec/6/
Here's a link to the site https://bastioul.com/index.php/category/portfolio/ so you can see how the div is nested
Here's the wordpress classes.
class="archive category category-portfolio category-3 custom-background custom-header-image layout-two-column-default no-max-width"
>
class="hfeed"
>
class="site-content"
Here's my actual javascript code
function bastioul() {
var dirty = document.querySelector('.category-portfolio>.hfeed>.site-content');
var grime = dirty.appendChild(document.createElement('div'));
grime.id = "portfolionav";
}
if (window.addEventListener) {
window.addEventListener('load', bastioul, false);
} else {
window.attachEvent('onload', bastioul);
}
No error messages in jsfiddle. I don't know enough about coding as far as php/javascript/jQuery is concerned to go through wordpress js files to see if something is negating my code. Not exactly sure of the root cause of my problem because it works in jsfiddle, and there is no console errors when i inspect page. I tried to research about the problem, but it is a pretty specific problem.
Not exactly sure what else to try.
Okay I solved the issue by editing the functions.php for the wordpress theme I was using.
This is my php code.
wp_register_script( 'portfolionav', get_template_directory_uri() . '/portfolionav.js', array(), true );
wp_enqueue_script('portfolionav');
wp_footer();
note
I had a issue with this code because it automatically selects a library.
I used browsers inspect console error to show me what library was being called, and it was /themes/primer.
I uploaded my javascript to this library.
And now my script is running correctly on my Wordpress site.
I was not aware I had to add script by calling it in my php file when using Wordpress.

jQuery code not working from internal stylesheet

I am trying to add a small script made by me in Wordpress. While entering it in Google Chrome console everything seems fine, the code is working, but when I call it via <script src="filepath.js"> it doesn't work at all.
I already tried to insert the script using wp_enqueue_script, but I'm not good at PHP. The script and the code are the following:
if ($('body.single-product').length || $('body.product-template-default').length) {
jQuery(document).ready(function ($) {
$('.trx-stretch-width-wrap').prepend('<section class="vc_cta3-container alert-acquisto"><div class="vc_general vc_cta3 vc_cta3-style-classic vc_cta3-shape-rounded vc_cta3-align-left vc_cta3-color-classic vc_cta3-icon-size-md"><div class="vc_cta3_content-container"><div class="vc_cta3-content"><p>Per acquistare i prodotti, contattare attraverso la pagina Contatti o telefonare lo 333333333</p></div></div></div></section>');
})
};
<script type='text/javascript' src='https://mywebsite.com/wp-content/themes/child-theme/prova.js'></script>
Between the || there are the classes of the pages I want it to display, then with jQuery I'm trying to put it before the trx-stretch-etc class.
Actually, analyzing the waterfall it calls the script, but it seems that the script does nothing at all, don't know if I wrote something wrong, any syntax error, or somewhat. Hope anyone can help me.

Javascript File Not Functioning in Wordpress w/ Proper Enqueueing in Functions.php

My JS file is being properly called in my functions.php file because there is no error in the console when I inspect element. Why is this js code not running? Do I need to wrap the function? Everything I tired did not work. I am no js expert, but I think this code should work... It worked in my codepen.
Note: I am calling the script in the footer. Should I be calling it in my header since it is for my mobile header menu?
// Mobile Menu
$('.hamburger').on('click', function () {
$('.main-navigation').toggleClass('open');
});
It should work fine via the footer. You could try wrapping it in a
$( document ).ready(function() {
$('.hamburger').on('click', function () {
$('.main-navigation').toggleClass('open');
});
});
How are you calling the jQuery? Are you placing it in a shortcode to a function in your functions.php, or directly in a tag inside the footer?
Last question (sorry, i'm new - and thorough): Have you checked your console? Any other Java errors?
sorry this is a mess, I am trying to figure out the formatting for answers/comments

Prevent inline scripts loading until Jquery has been loaded

Ok, I have a Jquery script, its function is to determine the width of the window, onload. If the width is greater than 642px it calls .load() to load an image slider. The reason for this is mobile devices will neither be served the images or js required for the slider.
This worked fine when jquery was loaded in the head. Upon moving to the footer its breaking. The code is included from the index.php. Could this be whats causing it? I would have thought once php built the page jquery parsed the content?
It appears the code is parsed before the jquery is loaded. Can anyone suggest a way to get round this please?
I have thought of creating the code as pure JS or using a delayed load, but I cant seem to figure out how to get it working.
There must be much better solutions? I feel like I’m missing something very obvious..
contents of the included script:
<script type="text/javascript">
$(window).bind("load", function() {
// code here
$(window).width(); // returns width of browser viewport
var width = $(window).width();
if (width >= 642) {
$('.slider-content').load("templates/include/slider.php", function () {
$('.slider-content').show(200);
});
}
else {
//alert('small')
}
});
</script>
Thanks,
Adam
In some environments, you must use jQuery() instead of $(). See this question.
Other than that, your problem might have to do with the document not being complete yet or binding to an event that has already passed. Try this instead:
jQuery(document).ready( function($) {
// Your code goes here. (You can safely use the $() function inside here.)
});

Categories

Resources