my javascript code works withing a my html file but when I move it to a javascript file of its own, it doesn't work. I checked and it is not an issue with the file location. And it doesn't work in any browser. Please help. Thank you.
My HTML calling the file:
<script type="text/javascript" src="js/click-dropdown.js"></script>
Here is my javascript code:
$(document).ready(function() {
$('.prospectus-click').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
//$('.prospectus-form > div').parent().removeClass('on');
$('.prospectus-arrow').removeClass('prospectus-arrow-up');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.table-wrap').slideUp('fast');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.prospectus-click').next().is(':hidden') == true) {
//ADD THE IMGON CLASS TO THE IMAGE
//$(this).find('.accimge').addClass('imgon');
//ADD THE ON CLASS TO THE BUTTON
$('.prospectus-arrow').addClass('prospectus-arrow-up');
//OPEN THE SLIDE
$('.prospectus-click').next().slideDown('medium');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
$('.prospectus-click').mouseover(function() {
$(this).parent().addClass('over');
}).mouseout(function() {
$(this).parent().removeClass('over');
});
$('.table-wrap').hide();
$('.live-consult').click(function() {
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.live-consult-div').slideUp('fast');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($('.live-consult').next().is(':hidden') == true) {
$('.live-consult').next().slideDown('medium');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
$('.live-consult').mouseover(function() {
$(this).parent().addClass('over');
}).mouseout(function() {
$(this).parent().removeClass('over');
});
$('.live-consult-div').hide();
});
The Javascript file you have written is using the jQuery library. In order for this to work you must load the jQuery library prior to your script.
You can download jQuery from here http://jquery.com/
I would also suggest for performance that you use the minified file and make your scripts load at the bottom of your html page before the closing body tag.
<script type="text/javascript" src="js/jquery-min-1.11.0.js"></script>
<script type="text/javascript" src="js/click-dropdown.js"></script>
As Nevett and David mentioned suspected that you might be including/loading your 'click-dropdown.js' file prior to inclusion of jquery library. But if you are not sure in which order you have the included your script, then simple way to detect is either check you dev console for error "ReferenceError: $ is not defined" or just simply write
alert('my $ is '+typeof $);
as the very first line of your script. If alert says undefined then include your script after jquery. If alert says function then please describe what is the exact problem you are facing; any error, warnings.
Related
I added a custom jquery function to my wordpress site. The code was to open a popup window on every alternative clicks. This doesn't work if I add to my wordpress theme header.php
This is what I added <script src="/alternateclicks.js"></script>
The js file was added to the wordpress root location public_html. I don't see any popup whatsoever.
jQuery(document).ready(function( $ ){
var canClick = 2;
$("body").click(function () {
if (canClick%2==0) {
window.open("https://example.com/").blur();
window.focus();
canClick = canClick+1;
}
else {
canClick=canClick+1;}
});
});
The solutions I tried, I tried adding the code to footer.php. Didn't work. I added them using wp_enqueue. Didn't work.
UPDATE
In console am seeing that jquery is not defined. But I added the code only in footer.
Seems like, a Plugin interfered with my loading. The plugin disabled jquery.
Found that the code worked in some pages and didn't work in some pages.
Found out using the console.
Then later when disabling the plugin perfmatters, jquery worked fine.
Problem:
I need to add the javascript between script tags to seperate .js files.
I also don't know how to link src='https://code.jquery.com/jquery-3.3.1.js' in the .js file.
What I've tried:
Whenever I try to put the content between the tags into a seperate .js file i get errors.
The error messages: https://i.postimg.cc/L8b2X0c4/errormsg.png
The code:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
</script>
What I want to happen:
I want the script written in HTML file between script tags to work in seperate .js file. So i can link multiple other scripts to my html.
Thanks in advance!
You're correct that you can't link one Javascript file from another. Also when you link an external Javascript file there should not be any tags.
Include all the required Javascript files in your html and make sure they're in the order they need to be loaded (jQuery first, in this instance)...
HTML
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="yourfile.js"></script>
</head>
</html>
Javascript (yourfile.js)
$(window).on('scroll', function(){
if ($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
});
As I said, note that there are no script tags in the Javascript file itself.
Your errors seem to be ESLint errors: https://eslint.org/docs/rules/no-undef
Try to add for example at the top of your JS file:
/* global window */
Did you try this,
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
})
});
Edit: I seem to have put your names in wrong order of when in time you replied. Oh well :)
Hi guys sorry for the delay. I tried all of the replies. And thank you all for them!
Archers solution worked!
Banujan Balendrakumar: I did, unfortunately same errors.
Armel: When adding /* global window */ 2 out of 9 error messages are fixed.
The Error msg that got fixed is: ERROR: 'window' is not defined. [no-undef]
[These are all the error msgs i got before making any changes:https://i.postimg.cc/xdNN5ZMq/whativetried.png]
Archer: I tried it. And i now have two scripts that were in my HTML file in two seperate .js files. So that works. Thanks :)
However im experiencing a problem.
*I have two scripts loading in my HTML file/site.
*Whenever I only have one script (out of the two) running (in other words i remove one) the one that is left alone works perfect.
BUT when I run them both it's like the first script is blocking the other from doing it's thing untill it's done. I noticed it works but not all it's features. I will have to look more into that.
That is another problem for another thread I suppose.
Cheers.
Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js
I have Wordpress 2 instances: local and remote (remote should be very similar, it was mainly uploaded from local except from a few plugins). Code is using jQuery.noConflict method, because without it it was not working locally after adding a lot of plugins. Now when it's uploaded to remote Wordpress, it's still not starting there, but it works locally :). JS method is just not started. For sure file is attached with proper path in HEAD section of HTML file. No errors displayed in console.
Expected behaviour is: JS alert should appear but it not.
JS code is here:
var jQueryAlias = jQuery.noConflict();
function customizeWebUIForEmailSubscriberPlugin() {
alert("customizeWebUIForEmailSubscriberPlugin");
//format input button
jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format input button
jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format message text
//jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
jQueryAlias('#elp_msg').addClass('message-format');
//hide submit button
jQueryAlias('#elp_txt_button').addClass('hide');
//hide email label
jQueryAlias('.elp_lablebox').addClass('hide');
}
jQueryAlias(customizeWebUIForEmailSubscriberPlugin);
Try the following. The function should fire on document.ready, but you can also call it whenever you like.
jQuery(function ($) {
function customizeWebUIForEmailSubscriberPlugin() {
alert("customizeWebUIForEmailSubscriberPlugin");
//format input button
$('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format input button
$('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format message text
//jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
$('#elp_msg').addClass('message-format');
//hide submit button
$('#elp_txt_button').addClass('hide');
//hide email label
$('.elp_lablebox').addClass('hide');
}
$(document).ready(function() {
customizeWebUIForEmailSubscriberPlugin();
});
});
Edit:
In order to add jquery in WP, add this code to the bottom of your theme's functions.php file, before the closing php tag tat looks like this: ?>:
function pk_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('pk_enqueue_scripts', 'wp_enqueue_scripts');
The problem is that on both servers (local and remote) jQuery lib is attached in HEAD tag in different sequence. On my local machine: jQuery was attached after script.js and that worked. For remote: jQuery was attached after my script.js. I am not sure why it works in such way on my remote machine.
Solution:
After adding code
<?php wp_enqueue_script("jquery"); ?>
right after HEAD tag, it works:).
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});