Jquery library not loaded - javascript

I'm using XSLT as my view layer and i want to include Jquery in my page so i did the following but with no mean the library still not working:
<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
alert("_______");
$(document).ready() {
alert("Jquery is working");
});
</script>
Note: the jquery-1.4.2.min.js file is in the same folder where my XSL file exist,
the strange thing i note is that the alert at the first line in the script is not working which means that the javascript at all is not working!! i tried that at chrome,firefox and IE with the same result.

try it like this
$(document).ready(function(){
alert("Jquery is working");
});

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
alert("_______");
$(document).ready(function () {
alert("Jquery is working");
});
</script>
WORKING DEMO

Try This:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> //  remove this content
<script type="text/javascript">
alert("_______");
$(document).ready(function() {
alert("Jquery is working");
});
</script>

I found a solution here: https://raygun.com/blog/jquery-is-undefined/. I added this code <script>window.jQuery || document.write('<script src="path/to/your/jquery_file.js"><\/script>')</script> below before the </body> tag and succeeded in removing the "jQuery is not loaded / found" warning

Related

jQuery not working with HTML or CSS

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 'function and '('
This is what's in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
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>
I am using the brackets editor, where the error is being thrown
Anyone know what the issue might be? Thanks in advance.
Below works fine for me.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
window.alert("Hello Jquery is Working....."); //put whatever you want to do here
});
</script>
</head>
<body>
</body>
</html>

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>

Load my Javascript after jQuery

I'm new to this, but I did a lot of searching and couldn't find an answer about why my script wasn't loading after jQuery. I was receiving an error:
$ is not defined
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).show();
}, function() {
$('ul', this).hide();
});
});
</script>
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hello"); //your script here
});
</script>
Loading JavaScript is Synchronous by default unless you tell the browser to handle it in a different way.
Based on that, placing your script after including jQuery will ensure your script executed after jQuery is available
So for your code to work, do something like:
console.log('$ is ', typeof $)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

externally loaded javascript won't execute

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 :)

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