I have to pages, where one is screen.php witch shows a table with data pulled from data.php with 2 seconds interval.
In screen.php data is being pulled like this:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.container').load('data.php');
}, 2000);
});
After this i have made a AngularJS Timer app :
angular.module('MyApp', ['timer'])
.controller('MyAppController', ['$scope', function ($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, args) {
console.log('timer-stopped args = ', args);
});
}]);
The data returned bu the first script (from data.php) is in this format:
XXX XXXXXXXXXX XXXXXXXXX XXXXXXXX {{minutes}} : {{seconds}}
Witch should convert the {{minutes}} : {{seconds}} , in 00:00 , since in the datatest.php the filed is :
<timer start-time="<?php echo $dt; ?>">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
I know this might be a real noob question but better ask .
I have included the AngularJS in the screen.php page, and makred the boday with :
body ng-app="MyApp"
Any kind of help would be appreciated
P.S. To whoever is down voting the question, pls live a comment on why, so I dont make the same mistakes again.
For whoever might be interested , i ditched AngularJS Timer at all, and just pulled back the already calculated time in min and sec with php, so it refreshes every 2 secs, and its the same
$ms=(strtotime($timeNow) * 1000)-(strtotime($row[6]) * 1000);
$time=floor($ms/60000).':'.floor(($ms%60000)/1000);
Related
I want to make a div appear 10s after the page has loaded. I would like to use angular.
<div class="appearingitem" ng-show="timeduration"></div>
Any ideas how i might accomplish this? Is there any way to trigger, say a function after a set time? I feel like this should be easy, and i've tried googleing but since i'm new to programming I don't know exactly what I'm looking for
Thank you
$timeout would help you in this case, by executing desired code in callback with specified timeout in milliseconds.
Code
$scope.timeduration = true; //showing some element
$timeout(function(){
$scope.timeduration = false; //hiding after 10 secs
}, 10000);
Make sure you should inject $timeout dependency on your controller factory function before using it.
angular.module('app', []).
factory('timeduration',function($timeout,$q){
var timeduration = false;
$timeout(function(){//Simulate a request
timeduration = true;
},2000);
return timeduration;
}).
controller('root',function($scope,timeduration){
$scope.timeduration = timeduration;
});
<div class="appearingitem" ng-show="timeduration">
// which you want to show here after delay
</div>
div show after 2 sec you can change your time instead of 2000 which you want.
Hope its help to you.
try this
$scope.display = function(){
$scope.timeduration=false;
$timeout(function () {
$scope.timeduration= true;
}, 10000);
}
Use the $timeout Service:
https://docs.angularjs.org/api/ng/service/$timeout
$scope.showItem = false
$timeout(function(){
$scope.showItem = true;
}, 10000); // Time in ms
I have write factory where i am fetching the data from json. and plotting to html table .
my question is how to refresh the data after certain amount of time ?
my code is as follow
.factory('getManagementData', function ($http) {
return {
list: function (callback) {
$http.get('../static/data/management.json').success(callback);
}
};
})
.controller('getdata',function($scope,getManagementData){
getManagementData.list(function(data){
//binding data to html page
})
});
Thanx in advance
You can use $timeout or $interval. For example, this code refreshes the data every 5 seconds:
.controller('getdata',function($scope, $interval, getManagementData){
function refreshData() {
getManagementData.list(function(data){
//binding data to html page
});
}
$interval(refreshData, 5000);
});
I've got a script that looks to see how many records are "unread" for notifications. When I use the following code the page will load then number when the page loads:
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
But I'm trying to make it update every 5 secs so I searched around and found this but it's not working. I'm trying to figure out how to get it operational. Here is the Javascript code:
//TRYING TO GET TO UPDATE EVERY 5 SECONDS
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
//THIS IS WHAT HAPPENS WHEN A PARTICULAR BUTTON IS PRESSED
function toggleDiv(divId) {
$("#"+divId).show();
//GET THE NOTIFICATIONS
$(document).ready(function(){
$("#myContent").load("getnotes.php?page=<? echo $page; ?>");
});
//RESET THE NUMBER OF NOTIFICATIONS UNREAD
$(document).ready(function(){
$("#notes_number").load("getnumber.php");
});
}
I was putting the code to do inside 2 functions. The code should be:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
You've got an extra function declaration in here - it won't ever execute:
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
IMO, you shouldn't use setInterval like that. The response order isn't guaranteed, you should use setTimeout inside the callback to guarantee you get a response before sending the next request off:
function getNotes() {
$("#notes_number").load("getnumber.php", function() {
setTimeout(getNotes, 5000);
});
}
getNotes();
Replace following chunk of code
window.setInterval(function(){
function(){
$("#notes_number").load("getnumber.php");
}
}, 5000);
with
window.setInterval(function(){
$("#notes_number").load("getnumber.php");
}, 5000);
Hey all I have a quick javascript question! Frustrated trying to get it sorted.... right now my modal div shows after 10 seconds which is right, but I want to only show it ONCE per session. Here's my current code:
<script type="text/javascript">
$(function() { // wait for the DOM
setTimeout(function () {
var $modal = $('#free-awesome'); // your selector; cache it; only query the DOM once!
$modal.modal('show'); // show modal; this happens after 10 seconds
setTimeout(function () {
$modal.modal('hide'); // hide modal;
}, 50000);
}, 10000);
});
</script>
Any ideas how I can adapt that javascript to show once per visit/session?
I'm quite new to javascript so if you could let me know exactly what to swap the above out for that'd be great!
Thanks in advance
You can use the session storage:
if(!sessionStorage.hidemodal) {
// your code ...
sessionStorage.hidemodal = true;
}
O, so i have a 'live search' ajax search, which currently runs an sql search (via ajax) on each key up.
What i would prefer is to:
run an sql search after a key has not been pressed for say 800 milliseconds
.
So i want to have a timer that is started on key up,
if the timer reaches 800ms then the ajax is called,
if a new keyup event occurs the timer is restarted
how would i do this?
(function () {
var theTimeout;
function doSearch() {
// Do Search
};
$('#theField').bind('keyup', function () {
clearTimeout(theTimeout);
theTimeout = setTimeout(doSearch, 800);
});
}())
There's an excellent plugin TypeWatch you may take a look at (IIRC StackOverflow uses this for the Users page). Here's a sample usage:
$("#textId").typeWatch({
highlight: true,
wait: 800,
captureLength: -1,
callback: function() {
// changed text
}
});
I had that problem my solution was this:
var doAjax = 0
$("input#name").keyup(function(){
doAjax++;
setTimeout(function(){
doAjax--;
if(doAjax>=1){
return;
}
$.post("do_ajax", { ...
dunno if it is the best solution, but it works :)