Design & Dev
Have you ever developed a web Project that needed an auto refreshing data all the time?
If not you will probably have to soon.
By Luiz Eduardo – Nowadays many companies are going web. I particularly work at a company developing a big web-based system which needs this kind of data all the time. It’s really important to give the right information at the right time.
I will show you now how the basic code works, and then we will create an simple auto refreshing news system with built-in HTML search. This is just an example to you understand how it works then use your imagination and see the endless possibilities with this script.
I will show you now how the basic code works, and then we will create an simple auto refreshing news system with built-in HTML search. This is just an example to you understand how it works then use your imagination and see the endless possibilities with this script.
The following image illustrates how this script works:
HTML Code – All you have to create in your HTML is a simple div to receive the data.
JavaScript Code – We will create a function that’s called repeatedly in a 20000ms (20 sec) interval right after his execution.
PHP Code – The PHP code really doesn’t matter. It actually may be almost anything: another HTML, a Class, function or any script you may want to run.
Still quite simple, isn’t it? One more time I’m showing you just one example that came to my mind but don’t forget to just allow your imagination to do the job!
COMMENTS
Spotlight
Repressione e Regime
Iran: l’esecuzione del programmatore Saeed Malekpour potrebbe essere imminente
- 13
- February 18, 2012
Saeed Malekpour
Subscribe
Flash News
Mark Zuckerberg earned a base salary of $500.000 last year, more than triple the salary of Google founders when Google filed for its IPO.
— Huffington Post
Video
EXCLUSIVE
Exclusive Interview with Brian Solis: Social Influence, Content Curation and Future of Social Media
- 2
- February 20, 2012
POPULAR
As always, amazing!
Great post by Luiz!
Thank you guys! =)
Great tip, Luiz! Thank you!
One more thing, but on the RSS of this post. When I got it on Google Reader, it was all distorted and impossible to read/understand. I had to come over here to view it properly.
It’s a beautiful template for tutorials but doesn’t work very well when it’s viewed in RSS readers.
Kind regards,
Tiago.
Hi Tiago, I know this problem. I hope to solve it in some way.
thanks alot for share ;)
Very nice..
Thank you!
What a cool script, Luis.
I tried to install it on my site using this feed url – http://news.google.com/news?q=xbox&output=rss and a combination of others but apparently, the feed doesn’t show anything….
Am I missing something?
Jamie
Hello Jamie,
I tried this url and it works fine! The problem doens’t seems to be in the RSS link.
Aren’t you missing anything else?
Do you use any javascript debugger? I suggest “firebug”, it will probally help to solve your problem, ok?
Thank you so much!
Son of a gun, this is so hlefupl!
Hi ,Will there be any issue for the statement “newsTimeOut=setTimeOut(update(),20000)” executed everytime when update function is called
No, there’s no problem. But it’s important to do not use “()” inside the setTimeout function, or even write “setTimeOut”. It’s setTimeout.
You’ve to write exactly like this: newsTimeOut = setTimeout(update,20000);
Thank you!
As usual woorkup rocks!
Is it possible to have all the feeds together in the search results, rather than just one?
Yes, it’s possible, for sure.
In the example I used array_rand to choose just one feed, but you may use foreach for all feeds in the array, so all will be loaded.
Could you give an example? Still learning php but don’t got it working yet :)
Sure!
First, remove this line: $randFeed = array_rand($feeds);
Then:
$arr):?>
$v):?>
channel->item as $item):?>
// here you place the div items.
I didn’t test this.. but I think it works! thanks!
Let’s try the comment one more time..
<?php foreach($feeds as $category=>$arr):?>
<?php foreach($arr as $v):?>
<?php $rss = simplexml_load_file($feeds[$randFeed]['url']);?>
<?php foreach($rss->channel->item as $item):?>
<div class="item">
<div class="title"><a href="<?php echo $item->link;?>"><?php echo $item->title;?></a></div>
<div class="description"><?php echo $item->description;?></div>
<div class="category"><?php echo $item->category;?></div>
</div>
<?php endforeach;?>
<?php endforeach;?>
<?php endforeach;?>
And I forgot.. replace
for
<?php $rss = simplexml_load_file($feeds[$randFeed]['url']);?>
for
<?php $rss = simplexml_load_file($v['url']);?>
Wow cool, gonna have to try that out. Thanks a lot :)
awesome !
Can you help me please? I made a Twitter Instant page and I want to make the page auto-refreshing after X seconds. My function is like this:
function appendData(val) {
var url = “http://search.twitter.com/search.json?q=”+encodeURI(val)+”&callback=?”;
$.getJSON(url, function(data) {
$(“#update”).empty();
$.map(data.results, function(elt) {});
setTimeout(appendData, 30000);
}
}
val is the value of the search input field.
When I executed the code, after X seconds, the val becomes a number instead of the value of the input field.