I'm looking for a way to call out the user's city within the alert script, I have tried document.write but I'm no coder and spent several hours to no avail. I can use
<span id="city">{cityname}</span>
on the page itself, but cannot get it to work in the alert script.
<head>
<script type="text/javascript" src="http://www.jsgeoip.com/geoip.js"> </script>
</head>
<body>
<script>
$(document).ready(function() {
$('#city').html(geoip_city());
});
</script>
<script>alert('Welcome CITY HERE User');</script>
</body>
Just move the alert call to after you get the geoip. No use having that second script block, do it all in the one ready function:
$(document).ready(function() {
var geoip = geoip_city();
$('#city').html(geoip);
alert('Welcome ' + geoip + ' User');
});
Related
I am using an html document in my firefox web browser and is a file on my machine and Ive tried looking at web requests but it is showing none. I know for sure I have internet here is a reproduceable code below
<!DOCTYPE html>
<h1>StackOverFlow</h1>
<script src="js/jquery.min.js" language="javascript">
$.getJSON('https://jsonip.com/', function(data) {
document.writeln("<p> " + JSON.stringify(data, null, 2) + "</p>");
});
</script>
You need to have two <script> tags - one for jQuery and one for your code:
<script src="js/jquery.min.js"></script>
<script>
// Your code here
</script>
from the html below I would like to execute a script by calling his id. So that when the script id is called the display fonction execute. Any other suggestion will be appreciate as long that the script only execute when the id is called. Thank you
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
//Here is where I would like to execute the script by calling his id.
//Any other suggestion to make it work will be appreciate
});
</script>
<script type="text/javascript" id="execute">
$(document).ready(function(){
display();
});
</script>
<!--------------------- Footer -------------------------------->
<script>
function display(){
$("#show").css("display", "block");
}
</script>
<p id="show" style="display:none">This is a paragraph with little content.</p>
</body>
</html>
That's not how JavaScript works.
Once you include a <script> in DOM, it's executed. However, the script itself can define functions, which could be named and called at a later point (by their name), by any other script or element in the page, as long as they have access to the context in which you defined your function.
Example:
<script>
function myFunction() {
window.alert('I got called!');
}
</script>
<button onclick="myFunction()">Execute myFunction()</button>
So instead of using the id of the script, I'm using the name of the function.
To fully answer your question: running a script by id is not possible because all scripts are executed as soon as they are parsed by the browser (which happens in their chronological order in DOM) and there is no way of re-running them after they have already been executed.
Obviously, one could argue that you could remove the <script> tag altogether, create a new one with the same contents, which is going to be rerun when added to DOM. But, at least in theory, it's not rerunning the same <script>, it's running a different one. Another instance/<script> tag.
Needless to say, nobody does that as it's much more convoluted than to simply define a function and call that function at a later time.
Thank you for your explanation on the DOM. It help me figure out another alternative
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var result = window.prompt("Would you like the footer to be display?");
if(result == "yes"){
bodyPage1();
}
});
</script>
<script>
function bodyPage1(){
display();
}
</script>
<!--------------------- Footer -------------------------------->
<script>
function display(){
$("#show").css("display", "block");
}
</script>
<p id="show" style="display:none">This is a paragraph with little content.</p>
</body>
</html>
I am stuck with this one for quiet a bit already. I know that the "building a weather app" question has been asked a few times already but that's not mainly what I am struggling with.
I am trying to write a script that get's the location of the user / computer and takes those to an external website (openweathermap.org) to get the JSON of the specific location. It works perfectly to this point:
<html>
<head>
<meta charset="utf-8">
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Arimo:400,700">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#click").click(function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#message").text("lat: " + position.coords.latitude + " and long: " + position.coords.longitude);
});
}
});
});
</script>
</head>
<body>
<div>
<button id="click" ">Get Location</button>
</div>
<div id = "message">
Message goes here
</div>
</body>
</html>
I get the longitude and latitude displayed on my website. But if I change the script to:
<script>
$(document).ready(function() {
$("#click").click(function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude, function(json) {
$("#message").html(JSON.stringify(json));
});
});
}
});
});
</script>
nothing works anymore. I am still insecure with that kind of JS / jQuery usage so here are my questions:
1. What is more common: the notation I used ( click handler, $-sign) or the getElementBy, x.innerHTML coding (I have obviously no clue how those two things are called but I hope what you mean)?
2. I tried to define the variables var lat = position.coords.latitude and var long = position.coords.longitude within the navigator function (in an earlier version) but it seems I can just use them within that function even tough it's defined outside that function - why?
3. When I try to insert the link where I want to get the JSON from - there seems to be something terribly wrong. I tried it with api, http://api, https://, https://api, http://www. but nothing seems to work. In case I don't get the lat and long right I even tried it with some specific values for that - no success. Why? How to you set up the link properly? Also is there my appid in the end missing because if I click the demo link it looks more like: http://samples.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=b1b15e88fa7024532541123439c1c50c122a1
I think that's it for the moment. Any help is much appreciated. Thanks, guys!
Hello as state I am trying to use jquery to run some php without refreshing the page, however I am new to jquery and am having trouble getting it to work, can some one please take a look.
<div id="GameBox">
<a onclick="setscore(1);">Start</a>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
function setscore(id) {
$('#GameBox').load('PHPsavemove.php?questionsCor=' + id);
}
</script>
Right now I am getting the error that it does not see my function set score.
I quote "ReferenceError: Can't find variable: setscore"
Please help
This should fix it
(Place the code into a separate script tag)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function setscore(id) {
$('#GameBox').load('PHPsavemove.php?questionsCor=' + id);
}
</script>
<div id="GameBox">
<a onclick="setscore(1);">Start</a>
</div>
i'm using HTML code and i wan't to show un Alert Message or alert box, i don't know what it is called, but a message with a "OK" button.
i want to show this alert when the page is loaded.
How do i do this?
And how to do this with a title in the Alert box?
Do I need JavaScript? if no, How to do this without javascript?
Jonathan
Yes you need javascript. The simplest way is to just put this at the bottom of your HTML page:
<script type="text/javascript">
alert("Hello world");
</script>
There are more preferred methods, like using jQuery's ready function, but this method will work.
You can use a variety of methods, one uses Javascript window.onload function in a simple function call from a script or from the body as in the solutions above, you can also use jQuery to do this but its just a modification of Javascript...Just add Jquery to your header by pasting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to your head section and open another script tag where you display the alert when the DOM is ready i.e. `
<script>
$("document").ready( function () {
alert("Hello, world");
});
</script>
`
This uses Jquery to run the function but since jQuery is a Javascript framework it contains Javascript code hence the Javascript alert function..hope this helps...
you need a tiny bit of Javascript.
<script type="text/javascript">
window.onload = function(){
alert("Hi there");
}
</script>
This is only slightly different from Adam's answer. The effective difference is that this one alerts when the browser considers the page fully loaded, while Adam's alerts when the browser scans part the <script> tag in the text. The difference is with, for example, images, which may continue loading in parallel for a while.
If you use jqueryui (or another toolset) this is the way you do it
http://codepen.io/anon/pen/jeLhJ
html
<div id="hw" title="Empty the recycle bin?">The new way</div>
javascript
$('#hw').dialog({
close:function(){
alert('the old way')
}
})
UPDATE : how to include jqueryui by pointing to cdn
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
For making alert just put below javascript code in footer.
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You need to also load jquery min file.
Please insert this script in header.
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'></script>
<script type="text/javascript">
window.alert("My name is George. Welcome!")
</script>
<script>
$(document).ready(function(){
alert('Hi');
});
</script>
You can try this.
$(document).ready(function(){
alert();
$('#reportVariablesTable tbody').append( '<tr><td>lll</td><td>lll</td></tr>');
});