externally loaded javascript won't execute - javascript

I'm having trouble running javascript from an external file. Here's where it's included in the html:
<div id="article-author-list" class="article-author-list">
<#list authorGroups as authorGroupItem>
<#authorGroup item=authorGroupItem/>
</#list>
<script type="text/javascript">alert('Hello??');</script>
<script type="text/javascript" src="/js/article/truncateAuthors.js"> </script>
</div>
Whereas here's truncateAuthors.js:
alert('Found the script!!!');
$(window).load(function () {
alert('Found the script.');
});
$(document).ready(function () {
alert('Document is ready');
});
$(function(){
alert('Running the script');
});
When the html is loaded, the only alert is 'Hello??' from the inline script. How can I get the external file to execute?

Before call your javascript please add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
to your file it will work fine. this is jquery library file that we have to use when we are writting code in jquery

I found it! The project was using requireJS and I needed to add it to the declaration. Thanks for all your answers :)

Related

I was writing simple code in JQuery in brackets but '$' shows undefined

I tried everything mentioned in this forum, Tried newer versions of jQuery Checked every spelling spent two hours to find out the problem but got no result.
Move Jquery to the <head>. If not, you could try
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
This will make sure your Global jQuery variable is bound to the "$".
(function($) {
$(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello World</h1>
You could also load the script externally. I often find this to work better with jQuery.
You need to include jQuery before using it. Move the <script> tags that defined after footer into <head> before script that you try to run.
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
});
});
</script>
</head>
<body>
<h1>Click Me</h1>
</body>
Check if your file is REALLY loaded
Add a new file, and only import jQuery from googleapi. Then, go to your browser's developer tools (F12), abd in console try to execure '$'. If it's not throwing an error, go to 4. If it is throwing an error, go to 3.
Check your internet connection to googleapi: Open the jQuery file in your browser, and check if it is loaded properly.
Try add 'refer' to your script tag like this:
If error still occurs, feel free to comment below.
Insert your script file/code just below the jQuery library file link
<h1>Heading</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('h1').click(function() {
jQuery(this).css('background-color', '#ff0000')
})
})
</script>
It happened because jQuery is not properly installed to be sure before coding run the code below. If it gives you alert message "jQuery is installed correctly" you are good to go.
<head>
<title>JQuery</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(typeof jQuery=="undefined"){
alert("jQuery is not installed ")
}else {
alert("jQuery is installed correctly")
}
</script>
</body>

jQuery not working in html file (JS LINT errors such as '$' was used before it was defined)

I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
This is what is in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
My code editor is throwing errors when I save this js file because of errors like:
-'$' was used before it was defined.
-Expected exactly one space between 'fucntion and '('
Anyone know what the issue might be? Thanks in advance.
This might not be the issue, but you may wish to attempt to load the jquery file by HTTPS (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js), especially if you are running your site on an HTTPS connection.
Otherwise, it seems to work when I test it:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
console.log("done!")
});
</script>
The problem is in your <script> tag, as #B.Fleming said maybe the HTTPS protocol. This tag is working:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
put this in top of your code where you are using jQuery
/* global $ */
alternativ is prefixing it with window
I don't like using the global $ sign cuz other libs are using it as well. what i usably dose is getting the $ from the closure function like this
jQuery(function($){
// document is ready, You may use jquery here and now
$('body')
})
and to get away with jQuery is not defined use window.jQuery instead
ps, always load stuff from https when possible

(jQuery) Uncaught ReferenceError: $ is not defined in Laravel [duplicate]

This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 6 years ago.
This post was edited and submitted for review 9 days ago and failed to reopen the post:
Original close reason(s) were not resolved
Jquery
<script src="http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
my code
<script type="text/javascript">
function readURL(input){
if(input.files && input.files[0]){
var reader = new FileReader();
reader.onload=function(e){
$('#showimages').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputimages").change(function(){
readURL(this);
});
</script>
<img src="" id="showimages">
<input type="file" name="images" id="inputimages">
and i got this error
Uncaught ReferenceError: $ is not defined
at http://localhost/project/public/user/1/edit:308:9
*line 308 -> $("#inputimages").change(function(){
Im new in js and jquery, Help me solve this error please...
I wrote the script out of the section. That was why the error occurred, see my answer.
Thankyou for everyone!
This error is solved, in .blade.php laravel i have to write
#section('script')
<script type="text/javascript">
//my code here
</script>
#endsection
To use Jquery, remember it has to import before using
Your problem is look like your Jquery is not imported. Maybe your path is incorrect or you imported it after your script.
First, check this url http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js with with your web browser. If it exist you will see a lot of javascript code there.
Then to import it from your local server.
<script src="http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
//your script here.
</script>
Another choice using cdn instead:
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
//your script here
</script>
Looks like jQuery wasn't loaded when your script is exectued.
You should load jQuery before scripts that are using it.
You have JavaScript running before the page is fully loaded.
You can load another plugin which may have overwritten the $ variable.
Your JavaScript file is not being properly loaded into your page(Check you script path and try to open link directly on browser).
Make sure all javascript code is being run inside a code block such as:
$(document).ready(function () {
//your code
});
or
(function($){ })(jQuery);
or equivalent pure javascript code.
There may be two potential problem in your code.
You don't have to put your code before scripts that using it. (Check your view source from browser)
You may imported another jQuery library.
If you imported two different jQuery Library, you can solve with noConflict()
e.g
<script type="text/javascript">
j = $.noConflict();
function readURL(input){
if(input.files && input.files[0]){
var reader = new FileReader();
reader.onload=function(e){
j('#showimages').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
j("#inputimages").change(function(){
readURL(this);
});
</script>
Try my updated answer. Assumed you have main layout file.
<head>
<script src="{!! asset('plugins/jQuery/jquery-2.2.3.min.js') !!}"></script>
<script src="{!! asset('bootstrap/js/bootstrap.min.js') !!}"></script>
<script src="{!! asset('plugins/select2/select2.full.min.js') !!}"> </script>
<script src="{!! asset('plugins/slimScroll/jquery.slimscroll.min.js') !!}"></script>
<script src="{!! asset('plugins/fastclick/fastclick.js') !!}"></script>
#yield('script')
<body>
#yield('content')
<script src="{!!asset('plugins/datatables/jquery.dataTables.min.js')!!}"></script>
</body>
</head>

Access a Function From Another File

I have two file:
html2canvas.js
function html2canvas(){
}
myid_print.js
(function ($) {
$(document).ready(function() {
//I want to call html2canvas function here
html2canvas();
});
})(jQuery);
I already included both files in my html but after running the code above, the console shows an error saying:
Uncaught ReferenceError: html2canvas is not defined
How will I call the function from inside my second file?
Try implementing your Client side code as :
<head>
....
<script src="html2canvas.js" type="text/javascript"></script>
<script src="myid_print.js" type="text/javascript"></script>
....
<head>
<body>
...
<script type="text/javascript">
function_from_myid_print();
</script>
...
</body>
Inside which you can call html2canvas();
This will surely help you.
For more details refer links:
https://stackoverflow.com/a/3809896/4763053 and https://stackoverflow.com/a/25963012/4763053
Try put your JS script at the bottom of your HTML page.

Jquery.min.js local copy not calling window load function

I am using jquery for focus of tabs. When i used :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
in my jsp then the window.load function works good, but when i downloaded jquery.min.js and added in js folder.
<script type="text/javascript" src="jquery.min.js"></script> like this.
Now window.load function is not working.
<script type="text/javascript">
$(window).load(function() {
alert('Hello');
if($("#updatetemp").val()=="TRUE"){
$("#update_link").click();}
});
</script>
I found out the way to use JQuery locally..
jQuery(window).bind("load", function($) {
var msgtemp= jQuery("#updatetemp").val();
if(msgtemp=="TRUE"){
jQuery("#update_link").click(function() {
}).click();
}
});
Instead if $ symbol i just used jQuery attribute and it worked.

Categories

Resources