Im a little bit confused now. Because I read all other answers but none is like my case.
I manage to always get working my preloading gif using simple jquery load function.
But now even though all my code is the same Im getting this error...
Like if load was not a funcion....
And my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="assets/js/plugins/owl.carousel.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
</head>
<body id="body" data-spy="scroll" data-target=".one-page-header" class="demo-lightbox-gallery">
<div class="loader"></div>
What can it be?
This might solve your problem:
Don't use jQuery 3 yet -- go back to 1.11.3 or such. Especially when using a plugin like owl carousel.
Related
Hello my problem with this library that does not load me on the first page, instead if I "refresh" if it loads, and the internet explorer does not work for me. someone has happened something similar. I don't know what I'm doing wrong, I put a link and a capture of the error. THANK YOU https://ccc.es/empresa/ https://ibb.co/3fXLPyH
<script type='text/javascript' src='https://ccc.es/wp-content/themes/norebro/assets/js/libs/owl.carousel.min.js?ver=5.4.2'></script>
I have found a possible solution from another colleague who passed by here I copy it, I don't know if this solution can be improved, but it works for me for now
`<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!--DO NOT ENTER ANY EXTERNAL LINK IN BETWEEN-->
<script type="text/javascript">
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
});
});
</script>`
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Jquery '$' is undefined
(5 answers)
Closed 3 years ago.
SOLVED:
I am the biggest dumb. I was so focused on where I intended to load my scripts (at the end of the body tag) that I wasn't paying attention to the head anymore.
Lo and behold I was loading my main.js twice, once in the head and once after jQuery loaded.
Thank you to everyone who tried to help, but ya can't cure my tunnel vision :/
ORIGINAL POST:
I am importing jQuery from Google's CDN, and I am loading it before my own js script, but on line 1 I'm getting a "$ is undefined" error with my $(document).ready() function.
This error occurs whether I use $ or jQuery as the prefix.
I've been searching through forums for the past hour and all the solutions that people seem to have is to ensure that jQuery is loading before my other scripts and that it's not being interfered with by other libraries that might be using $, but I'm not using any other libraries, and I've taken the path straight from Google's site
I've also tried using Microsoft's CDN and jQuery's CDN.
I've checked in Chrome, Firefox, and Edge, all the same.
The network tab in dev tools shows jQuery loading first.
<body>
<aside>
<div id="nav">
<h2>ABOUT US</h2>
<h2 id="donate-button">DONATE NOW</h2>
<h2>CONTACT US</h2>
<h2>PHOTO GALLERY</h2>
</div>
</aside>
<!--SCRIPTS-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="Resources/JS/main.js"></script>
</body>
// Resources/JS/main.js
$(document).ready(function() {
console.log("READY");
$("#nav h2").css("background-color", "red")
});
All I'm trying to do is get this error to go away so I can actually start writing my script :/
I'm fairly new to JS and jQuery in particular, and I feel like the solution is so simple and I'm just looking in the wrong spots. But I've done a decent amount of searching and I can't find anyone who's solution works for me too.
EDIT:
Here are some screenshots from Chrome Dev Tools that were requested:
When I come across this issue I make sure to wrap all jQuery code inside the following
(function($){
// add your code here
})(jQuery);
Or add this before any jQuery
$ = jQuery.noConflict();
EG.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function($){
$(document).ready(function() {
console.log("READY");
$("#nav h2").css("background-color", "red")
});
})(jQuery);
</script>
The general structure of your scripts should look something like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
main.js
$(document).ready(function()
{
console.log("READY");
$('body').append("It's working.");
});
I'm trying to use jSignature in my website, but it keeps showing me this error:
Uncaught TypeError: $(...).jSignature is not a function
My code is:
<div id="signature"></div>
$("#signature").jSignature();
I have Jquery 1.11.1:
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
The Jquery is called before the JS of the function.
I have also tried to call Jquery Mobile, calls like $('#signature').jSignature({'UndoButton':false,color:"#000000",lineWidth:5});, etc but it never works.
Can anyone help ?
Well, i fixed the problem.
The problem was: I had the Jquery 1.12.4 in my plugins file. It would work normal in any page, but with the jSignature it made the JS throw an error.
I removed the Jquery from the Plugins ( but keeped the CDN one ) and now it works fine.
I already found many questions about this but never an answer.
Hope this helps anyone out there.
Many Thanks
i use jQuery 3.4, had the same issue. Im not quite sure where the problem came from but it was the phantom.
First i added all recommended libs to my project and accessed the element as used to:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
...
$(`#id`).jSignature();
I received the same jSignature is not a function
Afterwards i assumed the problem might be in jQuery version compatability, so added few lines:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
var jq_1_12 = $.noConflict(true)
</script>
...
jq_1_12(`#id`).jSignature();
it was keeping throw the same error jSignature is not a function.
Finally
I removed the last changes and jquery 1.12 import. The problem solved it-self, have no idea what have happened. But the plugin works now without any explicable reason
I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.
you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.
I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.