Calling external javascript file - javascript

Should the following display "Test" in a message box? If not, what changes should I make?
<html>
<base href="http://www.google.com"></base>
<body>
<script language="JavaScript" type="text/javascript" src="test.js"></script>
</body>
</html>
test.js contains:
alert("Test");

Yes. See here I've inserted this into a jsFiddle example. Next time try to just do it instead of asking a question. You can see the example here
alert("Test");
is the command that does a msg box!

Related

Dynamically reading text file into page

I'm trying to load a .txt file into my simple html page. I'm very noobish and all the code i got is stolen from stackoverflow.
The text file is in the same folder as the html file and contains some text that I'd like to have shown in a div and not just loaded in at the start but dynamically updated (in a 1 sec interval).
The Page that results from the code is just empty.
I am using Chrome 73.
I only use the html file and the txt file. No other files are in the folder.
<html>
<head>
<script type="text/javascript">
setInterval(read,1000);
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I don't know what's wrong with this code. Am I missing libraries? If you came up with a completely new code that would be appreciated as well.
Yes, you are missing the jQuery library. Try it like this and let me know:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
function read(){
jQuery.get('file.txt',function(data){$('#container').html(data);});
setTimeout(function(){read() },1000);
}
read();
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Reference:
https://stackoverflow.com/a/24320973/1447509
See note in italics at very bottom of this article
what about a simple jQuery Load ?
$("#container").load("file.txt");
http://api.jquery.com/load/

$(document).open() not working under these circumstances

I apologize in advance if this has been asked before. So the circumstances I mentioned in the title is this:
I am writing html into a new window.document.open() object. The html I am writing also includes in the head.
This is the script I am not able to run,
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
The interesting thing is that every other jquery code works. For example in my html I have a button with id='but' and this script works
$('#but').click(function(){
alert('you clicked a button')'
});
so why is the $(document).ready() not working? Is this because window.document.open() doesn't count as document for jquery?
Thanks in advance.
edit: I think my question is unclear. I am terribly sorry about that. Here's the situation:
I have a javascript file that essentially has this:
var w=window.open();
var temp=`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Template for converted files</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="file.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
</head>
<body class="body">
<button id='but'>click me!</button>
</body>
</html?
`;
w.document.open();
w.document.write(temp);
the file file.js has the following:
$('#but').click(function(){
alert('you clicked a button')'
});
now when I run the first JS file, I am able to open a new window with the button. when clicked it says "you clicked a new button"
But the alert "This is working!", isn't working.
Hope this makes the situation clear. I am really sorry for not being clear from the start.
Because jQuery has no method open() in it's api.
open() is a window method only.
You can refer to the new window by passing it to a variable:
var win = window.open(url[,options])

JQuery On Button Click Alert Issue

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>

Javascript statement after facebook sdk is never executed

I have this test to load the Facebook JavaScript SDK synchronously:
<html>
<body>
<script>alert('1');</script>
<script src="https://connect.facebook.net/en_US/all.js" />
<script>alert('2');</script>
</body>
</html>
For me, the second alert is never shown, any ideas why?
Correction:
<html>
<body>
<script>alert('1');</script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>alert('2');</script>
</body>
</html>
More information: Why don't self-closing script tags work?

JQUERY won't work on local machine

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>

Categories

Resources