New to HTML and javascript. I'm trying to update a number that changes in another program without having to refresh the entire webpage using javascript. My home html page is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script type="text/javascript" src="Scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
Counter
<div id="counter"><h2>0</h2></div>
<button>Update</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#counter").load("value.html #count");
})
});
</script>
</html>
When I press the button, nothing changes. value.html contains:
<div id="count">:="DB1".counter:</div>
which is just an int value that counts up every second. If I load up this page, it shows the correct int value. But for some reason, the id="counter" never updates on the main html page. I've tried on chrome and internet explorer with no luck. Any help would be greatly appreciated.
Related
I'm trying to run two Jquery scripts, one called balancedgallery and the other museum. When I run each script by themselfs they run fine but together the balancedgallery script doesn't allow the Museum script to link the viewer and instead links directly to the image.
This could be because they are old scripts from 2014 and 2017 and some standards have changed? I had to update the ".load" to ".on('load')" for the balanced gallery reference. Though both the scripts are running fine (with no console errors). If I put "#msm-gallery-2" at the end of the url (2 being the image number) the viewer (Museum) displays.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="content">
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped1.jpg"/>
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped2.jpg"/>
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped3.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/enzzzooo/balanced-gallery/jquery.balanced-gallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/enzzzooo/museum/jquery.museum.js"></script>
<script>
$(document).ready(function() {
$.museum($('#content img'));
});
</script>
<script>
$(window).on('load', function () {
$("#content").BalancedGallery({});
} )
</script>
</body>
</html>
Not sure if this is affecting your scripts at all, but you have an unclosed tag on line 1 - set this to <!DOCTYPE html> <html lang="en-US">
and your last "img" tag is unclosed, which could be merging the div holding the scripts inside your last image.
This is my first post and I am really new to computer programming so I apologize ahead of my time if my question is super simplistic. So I am trying to start an angular application and I currently have this:
<!DOCTYPE html>
<html>
<head ng-app>
<title>Hello World</title>
<body>
</head>
<h1>{{2+2}}</h1>
</body>
<script type="<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"> </script>
</head>
What is supposed to happen is that when I click the html page there should be the number 4 pop up but instead this pops up: {{2+2}}. I am assuming that my angular code is not correctly linked but I am not sure. Do you have any ideas?
Please find below the corrected html:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body ng-app>
<h1>{{2+2}}</h1>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</body>
</html>
Place the <body> tag in correct place. Moved the ng-app to body tag. Place the corrected script tag within <body>
Working sample: http://plnkr.co/edit/T15fetn913Fwn2uJ5pcj?p=preview
Explanation:
The body of an html page is where the components that display on a page will be declared.
- Overlying declaration of html
-where you put meta data, scrip imports, css imports, and title. Basically things the page will use
- all other tags from anchors to spans, things the user sees
Note*** nothing can go in between these tags
Visit w3schools for a great tutorial on this...
http://www.w3schools.com/html/default.asp
I have small requirement that I am passing query string from demo1.html to demo2.html.
in demo2.html, there is back button(history.back()) so when user click back button it will redirect to demo1.html. in this demo1.html, I want to get querystring value or previous page url using javascript or jquery.
please find the demo html script below for your reference.
I need the query string value of demo2 page in demo1
demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
function display()
{
var wind = document.referrer;
var preUrl = window.location.protocol;
alert(wind);alert(preUrl);
}
</script>
<body>
Search Content of the document......
Search
Display
</body>
</html>
demo2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
function goBack() {
window.history.back();
return false;
}
</script>
<body>
demo 2 Content of the document......
Back
</body>
</html>
Reards
siva
Save the query string in the href that acts as the back button, then use location.replace()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
demo 2 Content of the document......
Back
</body>
</html>
a) Use the solution offered ny user3036342. This won't make the actual browser Back button work as you want though.
b) Leave the query string alone and use cookies instead. Set the cookie in demo2 and make sure demo1 reloads (I found this but there might be a better way)
c) If the pages are on the same domain, you could use History API and AJAX to switch between demo1 and demo2. Then you have full control about what happens when user presses Back/Forward, but it will require some reading to understand.
I had recently posted a question regarding my problem here.
When i click on a SUBMIT BUTTON or a LINK, I do not want the history of the page where the user clicked the BUTTON or LINK to get recorded in browser.
I received a suggestion to use history.pushState(). But I am not familiar with the function and I urgently need the solution to work.
I still not sure as to what to do. But can anyone suggest me whether I can use this to solve my problem.
<input type="submit" onclick="location.replace(this.href); return false;"/>
Continue
Example : I have a page bar.html which has a link Foo. When the user clicks on the link, he should be redirected to foo.html and browser history of bar.html should not get recorded so that the user cannot use BACK button to get back on this page.
Edit: Also how can I force the browser not to store a certain page in cache, so the next time user visits, the browser requests the server for the page.
For chnage page with JS, use code like this:
Continue
But i don't sure about it history work.
Here is an working example:
File: a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<h1>A</h1>
B
</body>
</html>
File: b.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
<script>
window.location.replace('c.html');
</script>
</head>
<body>
<h1>B</h1>
C
</body>
</html>
File: c.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
</head>
<body>
<h1>C</h1>
</body>
</html>
Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).