I have placed one javascript (hide.js) in my html Page ... Hide function is not working .My scripts are in right order
My code is as per tutorial
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example </title>
</head>
<body>
<p id="paragraph ">
This is Paragraph</p>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
</body>
</html>
hide.js
$('#paragraph').click(function () {
$('#paragraph').hide();
});
I have test it with Firebug lite on Chrome .. Console doesnt show any error .. in script is also showing external scripts ...Other script are working fine
I have rearranged script Order like this
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
still it is not working ..
i couldnt find any relevant link ..whats wrong ..Please Suggest
Because, you included hide.js before jquery.js. You should include hide.js after jquery.js like so...
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
In case you must include hide.js first before jquery.js. Change your code to
$( document ).ready(function() {
$('#paragraph').click(function () {
$('#paragraph').hide();
});
}
In this way, your script will work after whole page is loaded.
Or, similarly you can use.
$(function() {
// Your Code
});
order should be, include jquery main file all above.
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
core jQuery file must be include before any other plugin as they may use core jquery methods internally.
You have a space in the id of your paragraph tag, which is invalid, so your javascript cannot select that paragraph using that id.
You need to remove the space from your id attribute.
Order of script - hide.js is using jQuery so it has to be included after jquery.js
<script type="text/javascript" src="http://localhost/WebApplication2/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/toggle.js"></script>
<script type="text/javascript" src="http://localhost/WebApplication2/js/hide.js"></script>
Your browser console should show you an error saying something like Uncaught ReferenceError: $ is not defined
your id has space.remove it and try again
<p id="paragraph ">This is Paragraph</p>
it should be like this
<p id="paragraph">This is Paragraph</p>
I have discovered a very strange thing which probably could be the cause. It should certainly help you.
In your code, I see you have only external JS files. After those external files, include an empty tag. It should work.
Cause is not known but external JS does not get included at times if you do not have inline or empty script tag. It will be very interesting to dig in more. Let me update once I figure out.
Environment: Chrome latest Version 44.0.2403.130 m
Related
JSFiddle demo: https://jsfiddle.net/cr33q8v7/
$("#findMyWeather").click(function() {
alert("button clicked");
});
All I'm trying to verify is if the JQuery is working and I'm not getting any pop-up that says button clicked, so it would appear the syntax is wrong, but I've checked it multiple times and it looks right.
So if I include the library on JSFiddle, then why does the below code in the HTML file not run, as it appears the function is identical and these pointers both direct to the library:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$("#findMyWeather").click(function() {
alert("button clicked");
});
</script>
So the // pointers didn't reference (this is what the teacher instructed). When I changed to `https:``, then it functioned correctly:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I need another set of eyes, or else I'm missing something else and just don't see it.
You need to include the jQuery library in JSFiddle.
Click the gear that says Javascript and choose the version of jQuery that suits you.
Your fiddle doesn't actually include jQuery via a script tag.
e.g. add: <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> to your HMTL
you must add below line after last div between body tag :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4
/jquery.min.js"></script>
Here is Demo
Add the cdn link for Jquery. Without jquery it will not work. You can add it to the before end of body tag.
Add:<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
use jquery online by adding <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<button id="check">Click on me to check if jquery is working ....!</button>
</body>
<script type="text/javascript">
$("#check").click(function(){
alert("yep, jquery is working");
});
</script>
</html>
every thing looks fine please select jquery in fiddle then try it
and please add this script code in your file
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
I would be really thankful if anybody could advise on jquery's weird behavior in opera mini 8 (full version is 8.0.1807.91281). When the following code is placed directly in head tags it works,
<head>
<script src="jquery.js"> type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
</script>
</head>
However, trying to keep my head nice and clean and doing the following simply stops this simple function's execution. I created my show.js file, placed it in my head and also referenced jquery like this:
<head>
<script type="text/javascript" src="show.js"> </script>
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
</head>
Then I placed my simple function inside my show.js file like this:
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
It works fine in all the major browsers I tested it in (Opera Classic, IE, Safari, Chrome, FF) but it just fails in opera mini 8. Could anybody advise please, what I am doing wrong here? My vague guess is that opera mini 8 has its rendering stuff off this browser and does it remotely via their servers, that's why the only way for it to work in opera mini is to put the code directly in head. I am not sure I am on the right track here but that's the only workaround I've found so far to force it work in opera mini 8.
Would appreciate any help /comments at all as this thing slowly starts driving me crazy :-) Many thanks in advance!
---------------------------------
P.S. Update.
I upgraded to jquery 1.11.3 and keep the lines in this order now:
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="show.js"> </script>
</head>
But having it this way together with the following in my show.js still does not work in opera mini 8.
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
As soon as I change it to:
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#hasphone').show();
$('#hasmail').show();
});
</script>
</head>
and disable my show.js it starts working everywhere including opera mini 8. I am totally clueless... Any more suggestions, please anyone?
---------------------------------
Update 2. Solved.
The trick was in my other scripts' order. That is I reversed the order I had and it started to work. For example I had script1, script2, and script3 placed like this:
<script src="script1.js"> type="text/javascript"></script>
<script src="script2.js"> type="text/javascript"></script>
<script src="script3.js"> type="text/javascript"></script>
Now I have changed it to:
<script src="script1.js"> type="text/javascript"></script>
<script src="script3.js"> type="text/javascript"></script>
<script src="script2.js"> type="text/javascript"></script>
and it all revived.
Hope it will help someone out there as well. Make sure you check your scripts' places and chances are it will work for your as well. Just remember it all has to go coherently and successively in accordance with your scripts' code.
You should include the jQuery first and then all its dependents.
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
<script type="text/javascript" src="show.js"> </script>
</head>
Reverse the order in which they are loaded.
EDIT
<script src="jquery.js"> type="text/javascript"></script>
<!-- ^ -->
Remove the closing bracket of script.
I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".
I want to write cleaner and readable code, so I wanted to implement my jQuery code in a separate file. I saved the file in the sam folder as the jQuery code I downloaded from jquery.com. In my HTML I put the reference in there, and it does not work, but if I leave the jQuery code in my HTML it works.
My HTML code is this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>focusin demo</title>
</head>
<body>
<input type="text" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
My jQuery code is in a separate file called test.js and follows:
$(':text').focusin(function() {
$(this).css('background-color', 'yellow');
});
But when I run it in my browser it doesn't work. I basically tried everything and decided I need professional help.
You may have a problem with relative links. Try changing this
<script type="text/javascript" src="js/jquery.js"></script>
to this:
<script type="text/javascript" src="/js/jquery.js"></script>
You need put your code in $(function() { ... });
Like this:
$(function() {
$(':text').focusin(function() {
$(this).css('background-color','yellow');
});
});
You need to add a ready handler for jQuery scripts, like
$(function() {
$('input[type=text]').focusin(function() {
$(this).css('background-color','yellow');
});
});
You can first confirm inclusion of a file by putting the alert() function in the test.js file. If included then you can try writing some jQuery code in the test.js file to check whether the jQuery file is included properly or not.
I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>