I have a dashboard set up to automatically refresh the page and data. I want to move away from that and only refresh divs. The only issue is that the data i am calling is from the back end and not a separate file. I have the following code:
<script> var auto_refresh =setInterval(function({$('#test_refresh').fadeOut('slow').fadeIn("slow");}, 10000);
Year to Date Sales<span id="test_refresh"> $<?=$this->YTDsales?></span>
Obviously the data is not refreshing, it's more or less of an effect. Is there a way to just refresh single php data? Thanks for any help.
I wouldn't recomend to do a refresh via javascript, I would rather go through a simpler and cleaner solution try to do a polling or use websockets and update/get the information almost in real time.
look at this answer and you may get a clearer concept of what I'm suggesting and this is a practical example of a long polling in php
I hope that helps,
cheers!
Related
Anyone can give me a hint why this getJSON not really calling the PHP page. I am trying to understand some existing code which uses getJSON.
"getfolders.php" page would write a message to a log first as the first step.
My javascript is as below:
$.getJSON('api/getfolders.php', {});
//window.location="api/getfolders.php";
If I use getJSON, it is only working sort of first time entering this javascript, if I click CTRL+F5, it doesn't trigger the "getfolders.php" multiple times.
However if comment out getJSON and use window.location instead, every CTRL+F5 will trigger the "getfolders.php" for every time.
Is it some behavior in ajax causing this issue?
Thanks
GET requests are cached by the browser.
To check it change a request for following
'api/getfolders.php' + Date.now()
but it is not good way.
Look at discussion of this subject
Perhaps you should use $ .post () function.
Goal: Get javascript to work concurrently with Ajax.Updater (prototype.js)
Purpose: I am creating a website that displays a list of servers, and updates server status's every 10 seconds (without refreshing the page). So I use the Ajax.Updater to call a function every 10 seconds to update every server's status.
(Please refer to my other post)
Get every UL element's ID for a specific class
Problem: It seems to be that the Ajax.Updater interferes with any javascript I am using on that same page (ex. drop down menu will not drop down anymore, fancy pop up windows wont pop up either, etc). When I comment out the Ajax.Updater script, my javascript works great without any problem. The following is my ajax.updater code:
<script type="text/javascript">
function startUpdateTimer(item) {
setInterval(function () { new Ajax.Updater(item.id, 'update.php?url=' + item.id); }, 10000);
}
$$('ul.SBUpdater').each(startUpdateTimer);
</script>
Would anyone know why this is happening or how to fix this? Also, if you would suggest doing this a different way, I am open to ideas!
Also, I would suggest using the Ajax.PeriodicalUpdater instead of Ajax.Updater. It will handle the timing for you and can be done with less code.
Sounds like you already have a Javascript library(probably jQuery) running on your site already. If that's true you should remove PrototypeJS and use whatever library that's already on there for you ajax updater. Using multiple js libraries isn't the best solution.
I have a simple php code which prints data from a SQLite database.
Basically $query ="Select A from B".
This all works fine. & when the sqlite db updates, i can refresh the page & the new data displays.
Want i am aiming to achieve is to refresh this data automatically every 5-10 seconds without having to reload the entire page.
I am also trying to avoid using iframes as there is about 20 of these on the page all displaying different data.
This has been driving me mad the last few days, Does anyone know of a way to do so?
My thought have been javascript, jquery or AJAX?
Other than that can you get sqlite data with javascript alone, without php?
& then implement something like the below on the element only? without the page reloading??
setTimeout("location.reload();",5000);
Thank you in advance.
You can do it using setInterval(), passing a jQuery ajax command and the time.
Or take a look at this jQuery plugin http://plugins.jquery.com/project/ekko
I'd recommend using jQuery as it's easy to do this sort of thing with the built in ajax function. Download jQuery and embed in your page or embed via a CDN.
1.) create a PHP file that outputs the content you want to "update" every few minutes. No headers/footers, etc.
2.) Put the content you want to refresh in a div with some specific id.
3.) Check out the simple example for using setInterval and ajax/load on this page.
Ajax is what you need.
Two options that I use quite a bit, both with plusses and minuses:
Jquery, easy to learn, quick to deploy, and very configurable
XAJAX -- AJAX for PHP. It's not the best thing out there, but if you're scared of Javascript, this allows you to do AJAX from PHP Functions, which can be easier for PHP guys to understand.
In essence, output your code to a specific DIV, then use AJAX to update that div with data it queries from the DB.
I need to have a button that calls a php function to resort displayed data from the db. How the heck do I do this? I just found out that because php is server side this sucks. So any help please?
You can't directly call a PHP function pressing a button for the reason you stated yourself. In order to execute PHP code you need to make a new request to the server. The request could be made to another script or to the same that produced your page by calling it again with some parameter to control its behavior.
Alternatively, you can call a PHP script via Javascript (AJAX) so that you can handle its output and update the page without a full reload.
The second option is neater but more complex, the first one might look less pleasing to the eye, but works regardless of the user's browser having Javascript enabled or not.
It should probably sit inside a form field, something like this:
<form action="YOUR_PHP_SCRIPT.php">
<input type="submit" />
</form>
When the submit button is pressed, the action for the form is triggered.
There may be a swathe of other things you'll need to take into consideration from this point onward, but this is a start.
Yeah because PHP is server-side, you have two options. One is to make a button that calls the PHP script and renders a completely new page. The other is to use AJAX (asynchronous javascript and XML) on the page, see jquery.com for a good way to do that, and only re-render the table that is displaying data.
This is a job for ajax, as others mentioned. If I may elaborate, if you're starting out, I HIGHLY recommend using a javascript library to make your life easier. With prototype, here's what your button might look like:
<input type="button" id="button_foo">Button</input>
Here's what your javascript might look like:
$('button_foo').observe('mousedown',function(e){
new Ajax.Request('handler.php',{
method:'post',
onSuccess:function(t){
$('table_bar').update(t.responseText);
}
});
});
This may seem a little daunting at first, but I think basic js has a pretty manageable learning curve when using a library. The above code would take whatever handler.php outputs, and replace the contents of an element with and id of "table_bar" with the returned html.
if you do decide to use prototype, the docs are really helpful and easy to understand, and there is a really excellent book by pragmatic press on the subject that'll have you understanding it very quickly.
Hope that helps!
what Yacoby said, you'll need to use AJAX to make the call to the server, or something like this: http://www.ajaxdaddy.com/demo-sorted-table.html
I would like to load/refresh a particular page for every 10 secs to view updated data's fetched from Database.
I used META for doing it
<META HTTP-EQUIV=Refresh CONTENT='10; URL=livedata.php'>
But still i agree we also do this by
using :
Javascript to load a div by settimeout
Ajax dynamic refresh
Would be great if you share the performance issues using META , AJAX dynamic refreshing , Javascript settimeout .. Also share the best way of doing it.
Note : Need to refresh whole page rather than specific frame or div.
Using AJAX is the least intruisive to the user, because the user doesn't notice that something is being refreshed/reloaded until it is complete.
Please note that AJAX can perform better or worse than META depending on the situation:
If the data to be updated is small with respect to the full HTML page size, AJAX is better than META, because with AJAX you can send only the data difference, and/or you can send data in more compact format than HTML.
Running JavaScript puts a burden to the user's browser. If the user has 20 tabs open (which is not uncommon), and each of them runs some setTimeout in the background, it can make a huge difference in browser respoinsiveness to convert all of them to JavaScript-free refresh.
If you plan on refreshing the entire page, using <META> tags is the cleanest way. It just seems awkward to have a JS timer refreshing your page when you have a fully-supported HTML-only way of doing this.
However, if you just need a specific part of the page refreshed, use AJAX. It's better in terms of user experience, as well as performance.
using javascript to fetch dynamic content has one more benefit: if the content doesn't load for one time, it can still keep trying. if you reload the whole page and it doesn't load, then it would stop there.
also if you use Ajax, then the display is nicer because you don't see the whole page blanking out and re-rendering again and again.
For the client, there's really no difference between all the methods you mentioned. The only difference I can find is that using doesn't require javascript, like other solutions do, but nowadays everybody has javascript anyway.
The big difference, to me, is in the server usage. If you have 100 users refreshing every 10 seconds, that's already about 10 reqs/sec. Depending on the logic you have to generate the page (which is likely dinamic), this may cause the server usage to skyrocket. Make sure you're careful about that.
note that you can also use header() in PHP to accomplish what the meta tag is doing too. Just make sure you make the header() call before other output.
With jQuery you can do it):
var seconds = 10;
var id = setInterval(function()
{
$('#container').load('whatever.php');
}, 1000*seconds);
:)