I don't know what it's call. Example
http://search.twitter.com/search?q=%23idontbelieveyou
When you click link above wait a few seconds. Then you will see a notify like this
102 more results since you started searching. Refresh to see them.
There any tutorial for this? Let me know how to make something like that
It's really simple, logically:
A piece of Javascript checks back with the server every n seconds with a timestamp of the latest result it has.
The server checks if any results are available newer than this timestamp and reports back how many there are.
The Javascript displays this notification in the browser.
It would just sent an XHR to the server to see if any more tweets match the query.
If there are new matches, it will return the count and JavaScript updates the DOM to suit.
It is simply polling a script via jquery or Ajax (same thing really)
// Untested, written here without syntax.
var timeSinceUpdate = <?php echo(time()); ?>;
$(document).ready(function(){
setInterval(function(){
$.get('queriesSince.php?searched=idontbelieveyou×inceupdate=' + timeSinceUpdate , function(data){
alert(data);
if(confirm('Add new Data to screen?'))
{
//Add Stuff to DOM and update the timeSinceUpdate from the data recieved.
}
});
}, 3000);
});
Related
I want to notify a person a count of the jobs available in a table in my database. In a table I have a list of 8 jobs and they have their avilability. I've done the count with a PHP query with SELECT COUNT(*) AS jobs... and created this ajax script which shows the count with an interval.
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#divToRefresh').load('notification.php'); //this contains the query
}, 30000);
});
However, I am not sure how I can make it so when the user sees the notifcation alert, they will close it and it doesn't appear again until there's a new available job.
I can't find anything on the good ol google either.
Your jQuery function is running in 30 seconds intervals polling data from server. notification.php returns pre-rendered HTML containing (I assume among other things) the number of jobs available.
Check the number of available jobs and show notification based on that:
setInterval(function() {
var oldNumberOfJobs = newNumberOfJobs = 0;
$('#divToRefresh').load('notification.php'); //this contains the query
newNumberOfJobs = $('#divWithJobsCount').text;
if (newNumberOfJobs > oldNumberOfJobs) {
// show notification to the user
}
oldNumberOfJobs = newNumberOfJobs;
}, 30000);
To be more specific (showing/hiding notifications), I need to see your HTML.
This solution feels bulky. The whole pre-rendered HTML is being reloaded again and again. A nicer approach would be to only return the number of jobs available and only update that number using jQuery.
Also, it might be a good idea to return the latest job_id as well as the total number of jobs available. This way, you could check if the latest job_id that is already stored in the front end matches the newly received job_id. And only if they don't match you would update the counter and show new notification.
update
Here is a jsfiddle.js which covers your case. Jobs counter is simulated with current number of minutes. The function checks every 15 seconds if the number of minutes has changed. Once it happens, an alert notification is shown (but only if the old one was closed).
setInterval in jsfiddle is written using a mock object so that it is testable in the browser without AJAX requests. In your code use the following form:
setInterval(function() {
$.get('notification.php', checkJobsCounter); // returns jobs count in plain text
}, 30000);
Well you need to make an AJAX call and the response of it should be the number of new notifications. Now check if num>0 then just do $("#notification").fadeIn(); which is a by default hidden div having text You have new notification (or whatever) and a close button.
$(doument).ready(function(){
setInterval(function(){
$.get("notification.php", function(data){
if(data>0)
{
$("#div").fadeIn();
}
});
},1000);
});
Once user closes this you can create a cookie in the browser of the user and then check if cookie is set dont make ajax request, This was you dont have to update the db and every user will be able to see the notification.
I am not a developer so this is new to me, but I am a long time sys admin so please forgive me if I am asking stupid questions!
Basically, I have a PHP script that parses some XML and echo's a single number formatted to 1 dp.
I am using some Javascript Wijmo widgets, in particular a dial that takes it input from a javascript variable. Lets say "resultvalue".
I want to populate "result value" every 5 seconds with the results of my php script that exists as /xmlparse.php. The wijmo widget apparently responds dynamically to a changing variable so this will produce a dial with a moving needle without having to refresh the whole page.
All I need to achieve is getting this javascript variable to update every 5 secs.
I am already doing something similar with AJAX on a html page by just populating a DIV with the results of /xmlparse.php and it works great using the set interval command.
But how can I get my javascript variable updating every 5 secs with the result of that script?
An example would be a great help!
Code Here
Regards
Tom
window.setInterval(function(){
jQuery.ajax({
url:'/xmlparse.php'
}).done(function(response) {
resultvalue=response;
});
},5000);
You'll probably need to parse the result. Perhaps xmlparse should format it with json_encode so your ajax request could grab it as an object.
Edit:
Looking at your source, I see that the radial gauge doesn't actually monitor the resultvalue variable to detect when it's changed. You'll have to update it yourself. In this case:
window.setInterval(function(){
jQuery.ajax({
url:'/xmlparse.php'
}).done(function(response) {
resultvalue=response;
$("#gauge").wijradialgauge({value:resultvalue});
});
},5000);
You can set a global variable and set it as value returned from xmlparse.php;
var resultValue;
// load at page load first
$(document).ready(function() {
updatevalue();
});
setInterval("updatevalue()", 5000);
function updatevalue(){
$.get("xmlparse.php", function(response) {
resultValue = response;
})
}
This is for test
setInterval("test()", 4000);
function test() {
console.log("Result is: " + resultValue);
}
I am looking to display the total number of files in a database. To clarify, say I had a website where people could upload pictures of their cars, and I wanted to display a live number of how many pictures there are, what would be the best way to do this? Javascript, php? A mix? I envision a div with a number saying "Total Pictures: x" and where x would be whatever the live total is. I plan on using MySQL to store all the data on the website. Is this even recommended to have something communicate with the server this much? Is there a name for displaying a live number? Thanks!
If you are thinking to use the AngularJS way, you could create a Poller service which polls every second (assuming your /counter.php returns json):
app.factory('Poller', function($http, $timeout) {
var data = { response: {}};
var poller = function() {
$http.get('/counter.php').then(function(r) {
data.response = r.data;
$timeout(poller, 1000);
});
};
poller();
return {
data: data
};
});
Then your controller:
app.controller('CounterCtrl', function(Poller, $scope){
$scope.counter = Poller.data;
});
And finally in your view:
{{counter.response}}
You can read more about $http
Set up a PHP script that queries the database and returns the total file upload count. After that, you can use JavaScript on the page to periodically call the server in a specified interval of time and fetch the count data from your PHP script. Using jQuery and GET, you can do something like this:
jQuery(function($){
setInterval(function(){
$.get( '/counter.php', function(fileUploadCount){
$('#counter').html( fileUploadCount );
});
},20000); // 20 seconds
});
In your HTML:
<p><span id='counter'>xx</span> files have been uploaded so far!</p>
Hope this helps!
How live do you want it to be? Just whenever someone updates the site it's going to have the new value or do you actually want it to update in near real-time?
If it's the latter you have to use Javascript against some kind of API that returns the amount of files in the database. I can't help you with that bit since you are using PHP, but it shouldn't be too hard. Just return some JSON looking something like
{ fileCount: 45020 }
Client-side you have a few options. You have the different javascript frameworks like AngularJS and EmberJS (and many more), as well as just 'plain old' javascript and frameworks like jQuery
The keyword is really AJAX, even if that is just a sort of buzzword for using javascript to make websites dynamic.
I am a fan of using AngularJS because it's easy, but I'll try to give you some pointers for using jQuery first. Note that I have not used jQuery in years now.
The jQuery way
jQuery has a function called jQuery.getJSON(), and according to the documentation you can use that function something like this:
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "http://example.com/api/fileCount.json")
.done(function(data) { console.log(data) })
.fail(function() { console.log( "error" ); })
.always(function() { console.log( "complete" ); });
So this means we can call an endpoint and fetch some data using jQuery.
Here is a link to a tutorial about the basics of jQuery by the way.
jQuery makes us able to do things like this:
<div id="divTest1"></div>
<script type="text/javascript">
$("#divTest1").text("Hello, world!");
</script>
When that is executed the div with id "divTest1" will contain the text 'Hello, world!'.
That sounds like something we could use here!
Javascript also has this really nice function called setTimeout(), which allows us to make it call a function later.
This describes how to use jQuery with setTimeout()
As you can see it also shows us jQuery.documentReady(), which is an event that fires when the website is finished loading, so it is a good place to put code we want executed.
The example below shows how to use jQuery to hide a div with id=div after 3 seconds.
jQuery(document).ready(function () {
setTimeout( "jQuery('#div').hide();",3000 ); //hide a div after 3 seconds
});
Combining these things you should be able to make a repeating call that fetches data from your server and then updates a div or another element with the data you have fetched.
Just create a function which uses jQuery.getJSON() to fetch data, and then at the bottom of that add a setTimeout call to run itself in X seconds (however often you want it to update).
In jQuery.documentReady() you call that function the first time the document loads.
And in the .done() bit of the getJSON() call you add the data you got from the server to your div with whatever html you want. I showed you how to use $("#divTest1").text(), but there is also a .html() which acts the same but you should use it to add html to a element.
The angular way would be to use AngularJS's $http to do the same thing, but I wouldn't recommend learning AngularJS until you have a bit of a better grasp on Javascript.
When you do though, I highly recommend it. It's a much better approach than using jQuery.
You can read about AngularJS here
I hope this helps!
I found a website that has a counter and it just keeps counting and shows the same number for everyone. Some how the number is being stored. can someone help me recreate this count up timer in php or html. Thanks. Heres the site i was referring to "http://addmefast.com"
The website you reference uses the flipCounter Jquery Plugin:
http://bloggingsquared.com/jquery/flipcounter/
Perhaps you can take a look at it and come back with more specific questions.
I visited addmefast.com with two browser windows open and the counters were different. So the number actually isn't the same for two people...at least it probably isn't safe to assume so.
If you examine the source code at
http://addmefast.com/flipCounter/counter.php
You will see the javascript used for refreshing the count. You will also see that they make an ajax call every 60 seconds to sync the counter.
var refreshId = setInterval(function(){
var jqxhr = $.get("getstats.php", function(result) {
showcountercount(result,50000);
});
}, 60000);
The are using the flipCounter jquery plugin to manage all of this.
The php back-end is trivial: simply store a date somewhere in the system and pass that date to your counter.
This code may help you:
I think the following code will help you.
1) Set the variable name ID
2) Then set the interval for it as shown in the function
var refreshId = setInterval(function(){
var jqxhr = $.get("getstats.php", function(result) {
showcountercount(result,50000);
});
}, 60000);
// set the counter value
I'm using noty to display notifications using the 'top right' alerts setting. I'm really new to jquery but know php and mysql enough to get most things i want done.
What i want to do is use mySQL to get the data to see if a user needs to be shown any notifications (done). Then show that notification on page load, which I've also done, although I'm sure there's a more elegant way to show multiple notifications other than repeating the code?
Then i want to put a delay of say 1 second for each notification to appear so they don't all pop up at once, and disappear at the same time. I've looked into .delay() but without knowing jQuery a little better it's pretty useless to me.
My code:
$(document).ready(function() {
var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});
var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});
});
You could just use the setTimeout() native Javascript function. This will queue up an action after a given timeout period (milliseconds).
$(document).ready(function() {
var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});
setTimeout(function() { var noty_id = noty({"text":"a message","layout":"topRight","type":"inormation","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":1000,"timeout":5000,"closeButton":false,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false}); }, 5000)
});
You may find jQuery Pines a better notification system for queuing up multiple notifications.