I want when page loaded get timeStamp but I can't.
This is my code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id = "x">time</p>
<script src="jquery/jquery1.12.js"></script>
<script>
$(document).ready(function(event){
$("#x").text(event.timeStamp);
})
</script>
</body>
</html>
You can use Date object to do this work. now() method return timestamp in miliseconds. Of course javascript return timestamp with client time.
$(document).ready(function(event){
var timeStamp = Math.floor(Date.now() / 1000);
$("div").text(timeStamp);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
You will not get event object in ready call. As a workaround you can use $.now() for instance:
$(document).ready(function(){
$("#x").text($.now());
});
Related
I'm trying to replace the context of a loaded element with the following code:
$("#menu1").load("./templates/menu.html");
var str = $("#menu1").html();
alert(str);
str.replace("[number]", "1");
$("#menu1").replaceWith(str);
But I always get an empty str, the menu1 gets loaded correctly with the menu.html content so I have no idea what's going on.
You need to test the string after the load - the way you have done it, it can be run whilst the load is still going. Try this:
$("#menu1").load("./templates/menu.html", function() {
var str = $("#menu1").html();
alert(str);
str.replace("[number]", "1");
$("#menu1").replaceWith(str);
});
More information
$("#menu1").load("./templates/menu.html", function(){
//complete
var str = $("#menu1").html();
});
Loading part isn't instant so you are trying to apply var str = $("#menu1").html(); before load() has time to complete
You need to do the task in callback function of load:-
For example :-)
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
Hello this is rachit 1 1 1 1.
<div id="menu1"></div>
<script>
$("#menu1").load("index.html", function() {
var str = $("#menu1").html();
alert(str);
str.replace("[number]", "1");
$("#menu1").replaceWith(str);
});
</script>
</body>
</html>
Plunker
i am working with two js library to get browser timezone id and browser local time
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script src="Scripts/moment-timezone.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
alert(moment.tz(tz.name()).format());
});
</script>
this below code return perfect timezone id
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
but this code is not working alert(moment.tz(tz.name()).format()); not giving user local time.
am i missing something in code? do i need to add any momentjs related other file ?
please guide me. i want to get user local time using moment.js. thanks
UPDATE Working Version
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jstz.min.js"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/moment-timezone-with-data-2010-2020.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
var format = 'YYYY/MM/DD HH:mm:ss ZZ';
alert(moment.tz('Europe/London').format(format));
alert(moment.tz(tz.name()).format(format));
});
</script>
</div>
</form>
</body>
</html>
My solution of this case (this is part of the page code):
function toLocalTime(time) {
if (time <= 0)
return '';
var m = moment.tz(time, 'America/Chicago'); //CDT
var tz = jstz.determine(); // Determines the time zone of the browser client
m.tz(tz.name()); // Convert CDT to local time
return m.format('HH:mm:ss');
}
<script src="js/jstz.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data-2010-2020.js"></script>
...........
<script th:inline="javascript">document.write(toLocalTime(<<TIME IN MILLISECONDS HERE>>));</script>
I'm working with a nice little Jquery that auto loads and refreshes a div every bla bla Seconds.
Works perfectly on all browsers then I load up IE and bang what a surprise no luck! :(
Index.html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').load('reload.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
<body>
<div id="load"> </div>
</body>
</script>
reload.php
<?
echo time(); //just a timestamp example..
?>
Any ideas guys?
Add a random value at the end of the url to avoid caching.. That should solve your problem. ex: $('#load').load('reload.php?_=' +Math.random()).fadeIn("slow");
Try closing your script tag before having your body tag.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load').load('reload.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body>
<div id="load"> </div>
</body>
body {text-align:center; background-image: url('http://cdn3.crunchify.com/wp- content/uploads/2013/03/Crunchify.bg_.300.png')}
$(document).ready(function() {
auto_refresh();
});
function auto_refresh(){
var randomnumber = Math.floor(Math.random() * 100);
$('#show').text('I am getting refreshed every 3 seconds..! Random Number ==> '+ randomnumber);
}
var refreshId = setInterval(auto_refresh, 1000);
I am using angularjs to automatically change time in a simple html file by using an ng-controller but its only showing the initial time but not updating later
here is the index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing</title>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1>{{data()}}</h1>
</div>
<script TYPE="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and the main.js
var app=angular.module('myapp',[]);
app.controller("myctrl",function($scope)
{
$scope.data=function()
{
var d = new Date();
var n = d.getTime();
return n;
}
})
How do I make it update every time...?
data() only gets rand when the template is compiled. You need to use a timer to update the value.
Something like this would work.
html template
<div ng-controller="timer" ng-app>
{{time | date:'h:m:ss'}}
</div>
controller
function timer($scope, $interval){
$scope.time = Date.now();
$interval(function(){
$scope.time = Date.now();
},1000);
}
Also you can use Date.now() instead of (new Date()).getTime()
You never update $scope.data,Angular wont do that for you.
var timeout;
var changeTime=function(){
$scope.data = (new Date()).getTime();
timeout = $timeout(changeTime,1000);
}
timeout= $timeout(changeTime,1000);
You're only calling data once in this example. For it to update in real-time, you'll need the date called continuously like so:
var app=angular.module('myapp',[]);
app.controller("myctrl",function($scope, $timeout)
{
// called every second
var getTime = function(){
$scope.data = (new Date()).getTime();
$timeout(getTime, 1000, true);
}
getTime();
})
And in your view just get rid of the data() invocation and instead reference the model:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Testing</title>
</head>
<body ng-app="myapp">
<div ng-controller="myctrl">
<h1>{{data}}</h1>
</div>
<script TYPE="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
If I introduce the jquery.js into the page twice(unintentional OR intentional), what will happen?
Is there any mechanism in jquery that can handle this situation?
AFAIK, the later one jquery will overwrite the previous one, and if there is some action binding with the previous one, it will be cleared.
What can I do to avoid the later one overwrite the previous one?
===edited===
I couldn't understand WHY this question got a down vote. Could the people who give the down vote give out the answer?
==edited again==
#user568458
u r right, now it's the test code:
<html>
<head>
</head>
<body>
fast<em id="fast"></em><br>
slow<em id="slow"></em><br>
<em id="locker"></em>
</body>
<script type="text/javascript">
function callback(type){
document.getElementById(type).innerHTML=" loaded!";
console.log($.foo);
console.log($);
console.log($.foo);
$("#locker").html(type);
console.log($("#locker").click);
$("#locker").click(function(){console.log(type);});
$.foo = "fast";
console.log($.foo);
}
function ajax(url, type){
var JSONP = document.createElement('script');
JSONP.type = "text/javascript";
JSONP.src = url+"?callback=callback"+type;
JSONP.async = JSONP.async;
JSONP.onload=function(){
callback(type);
}
document.getElementsByTagName('head')[0].appendChild(JSONP);
}
</script>
<script>
ajax("http://foo.com/jquery.fast.js", "fast");
ajax("http://foo.com/jquery.slow.js", "slow");
</script>
</html>
it produced the result:
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16
fast test:19
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16
fast
the token "$" of the previous one(jquery.fast.js) is overwrite by the later(jquery.slow.js) one.
Is there any method to avoid the overwriting?
I did try this code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#try').click(function() {
alert('ok');
});
});
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button id="try">Try me</button>
</body>
</html>
Nothing happend. On click I've got an alert. Same result if the second jquery.js loaded in body tag before or after the button.