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.
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.
so i am just wondering if i could do this:
a basic site, nothing on it but 4 different photos that have different priority levels which indicate the time-span of actually displaying an image ( lvl1=1min, lvl2=3min, lvl3=10min...and so on)
How could i do this with html and php.. I am not sure if answer is really basic but i cant seem to get my head around it.
Is html code running parallel to php code or does an infinite while loop in php stop the whole html code in process?
I was thinking of creating an infinite while loop in but i am worried it would eventualy somehow crash the site?
I guess i dont understand how html code runs..
Thanks to anyone who helps.
As OP mentioned. You have to use JavaScript. PHP is for server side processing, once it send final output to web browser you have to request again from the web server. You can use AJAX for your purpose easily.
In the context of the WWW (and simplifying a bit):
PHP runs
The output of PHP is received by the web server
The web server sends the output to the browser
The browser displays the page
You can look at the current time and use that to decide what <img> tag to send to the browser.
You can't change an image already displaying in the browser using server side code. The code has already run. New code won't run unless the browser makes a new HTTP request.
If you want to change the image displaying in the browser you need client side code. For all practical purposes that means JavaScript.
You can use the timer functions to run code after time has passed and DOM to change the HTML elements already on the page.
Understanding bits from your question this may be what you need
PHP code will send all four images to the browser in img tags. You can add priotity to one of the attributes to each tag for example <img data-priority="1" src...
When this code is fully loaded in browser you start a timer in javascript which then looks at current time and subtract it from time it loaded and get number of miliseconds. You can get all this using date and time functions in javascript.
At each time difference you check if that requires an image to be hidden or shown and then show or hide it. Look at jquery show and hide functions for html nodes.
If you want to show one image just hide them all in beginning and then show the one you want according to whatever rule you have either server side or client side. PHP will help you narrow down rules on server and send only required data to client however you can use simple html to hide and show if its not critical and you will avoid making multiple calls to server for images.
If this is the scenario you are looking for then try it in jsfiddle or code with sample images. You can get 4 sample images from http://lorempixel.com/ and use javascript to play with it.
For you purpose you can use AJAX which is update your code on given time interval.
If you want to set something on a timer, you can use JavaScript's setTimeout or setInterval methods:
setTimeout ( expression, timeout );
setInterval ( expression, interval );
Here expression is a normal function and timeout and interval are integers in milliseconds. setTimeout runs the timer once and runs the expression once whereas setInterval will run the expression every time the interval passes.
So in your case it would work something like this:
setInterval(function() {
//call $.ajax here
}, 5000); //5 seconds
As far as the Ajax goes, see jQuery's ajax() method. If you run an interval, there is nothing stopping you from calling the same ajax() from other places in your code.
Anymore expression need please let me know.
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!
I have one script that loads very quickly, but I have another script that I want to run with that script, but that scripts processes a LOT slower. The second script doesn't need to output anything to the user, it only needs to run. Is there a way I can include it locally, without making the user have to wait for it to load?
EDIT: I'd really like to keep this part pure PHP if possible.
make a call to it through ajax. that way everything can load on the page, and that can run in the background.
you'll have to be careful though that the user refreshing the page won't run the script again and overload your server.
Due to my lack of reputation I cannot yet leave a comment. "learning Ajax" really isn't difficult, and I think it would be your best solution (as contagious said). If you simply load the jQuery library it can be something as simple as:
jQuery(function($) {
$.post( 'http://url.com/' );
});
You can also have the second script output a 1x1 pixel image, and include the script using img tags at the bottom of the page.
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);
:)