I have a webpage that is auto-refreshed every 240 seconds with the generic HTML Meta tag. During the refresh it pulls data from a database which takes the site about 15 to 20 seconds to build before it's shown to the user. During this time I wish to show a small DIV with a loading message telling the user that it's loading data.
The more complicated thing about this is that the user has a few menu options to filter out specific data from the database. When clicking such an option the page is reloaded again and takes 15 to 20 seconds to build.
Users that aren't familiar with this loading time might feel the need to click the same menu option over and over again within a few seconds hoping that the page will load faster. But instead it will most likely cause the database server to get overloaded with requests.
So, to tackle this I wish to use jQuery to show a loading message, then have it load the data from the database (with a PHP script) and finally dump the data on the page.
I've done something similar but that was limited to users clicking a link which caused a jQuery script to load the data while showing the waiting DIV (using CSS rules).
I can't figure out how to implement this solution for an auto-refresh.
Some help would be nice.
You can use the same solution with auto-refresh as well, with the mention that the initial page load doesn't container the data that requires the DB call, but instead shows a loading message and starts an AJAX call to a server side script that returns the data.
Your page load:
Request
Server query DB
DB Response
Page loads (with data)
Ideal page load:
Request
Page loads (without data) <- loading message here
AJAX call
Server query DB
DB Response
Page updates (with data)
I'd second megawac's comment. Don't use a meta refresh. Also, 15-20 seconds is a very long time for generating a database report that is going to be generated every 4 minutes; odds are that you're bogging down your server pretty badly. Very few queries should really take that long, especially queries that need to be run nearly continually. I would strongly recommend refactoring your queries or doing some caching to speed things up. If you post some code, I'm sure people would be happy to look at it.
Related
I'm building a web app using Yii2 (php, mysql). Users can click on others' game results to see what item the user used for this result. There can be from 100 to 1000 results displayed on a single page. I don't know which option is the best in terms of speed for the page and the server :
1- On page load, a modal is loaded for every result and displayed when users click on a result. This way, there can be from 100 to 1000 modal loaded on the page. Is this too heavy considering that only a few of them will be used? Or even none of them sometimes.
2 - Load only one modal that is brought up when users click on any results and dynamically adjust his content using an ajax request to the server depending on which results was clicked. This way, less code loaded on the page but more requests to the server.
First option is easier to code but I think the second one might be better for page load. I'm far from expert in terms of page size and server requests handling, so I'd like to get some opinions.
I think you've answered the question yourself.
The second option is right. Only one modal (per type of action -- edit, view, etc) should exist. Then use ajax to load data only when requested.
Your users will thank you. The page size and load times will be significantly better.
I have a pretty lengthy form with about 10 select fields that all load data from other tables (mysql). My question is should I load the data using php/mysql as the page loads or should I let the page load first and then grab the select options for each field using ajax? If I load the select fields using php/mysql I would have 10 trips to the server before the page completely loaded (if my thinking is correct).
My initial thought is to first load the page and then load the select fields using ajax. Would this give me a faster load time or should I just load all the select fields using php/mysql on page load?
Any thoughts, theories or strategies would be helpful. I want my pages to load as fast as possible. Thank you.
I would say do it on the server-side (in php) because if you do it in ajax you're doing a client side request to the server to do the same thing. If i'm not mistaken from what you're saying ------- its 10 separate selects done in php that happens before the page loads... as opposed to an ajax request to do 10 separate selects as the page loads in javascript (meaning its a second request to do the same thing).. server side would be the best option in this case
If I understand you right, it would be faster to do it on the server-side before any headers are sent to the browser. Then your data is send along with the rest of the page to load. One trip. With AJAX you're sending the page first, then the javascript you just sent has to do a separate request for the data. Two trips instead of one. AJAX is best used when you can avoid requesting new http headers, but if you're doing that anyway, I'd skip it.
I have a webpage that run a query on a db and reports the results. Currently the page auto refreshes itself every 10 seconds in order to display (almost) real-time data.
This is probably a very inefficient way of accomplishing this but as of right now I'm not really sure what alternatives there are.
What options do I have to present real-time data on a php webpage?
you can use node.js and socket.io. This is great example to get you started:
http://book.mixu.net/ch13.html
or you can use ejabberd and strophe js library.
I used both of that solution for real time stuff and I found node.js and socket.io much easier to implement.
Depending on what your data is for and how you are using it, ive recently started putting data display functions into seperate pages and then using jquery to load those pages into dives on my main page at page load and then reloading the divs on a timer and on a reload function if the refresh is needed sooner, that way your whole page does not refresh making it flash and go blank but instead the data just gets nicely updated.
var paused = false,
auto_refresh = setInterval(
function()
{
if (paused) return false;
$('#mot').fadeOut('slow').load('motview.php?view1=$dayd&viewdate=1').fadeIn('slow');
$('#work').fadeOut('slow').load('workview.php?view1=$dayd&viewdate=1').fadeIn('slow');
$('#motday').fadeOut('slow').load('motdaylist.php? view1=$dayd&viewdate=1').fadeIn('slow');
$('#notelist').fadeOut('slow').load('notelist.php?dayd=$dayd').fadeIn('slow');
}, 60000);
$(document).ready(function(){
$('#mot').load('motview.php?view1=$dayd&viewdate=1');
$('#work').load('workview.php?view1=$dayd&viewdate=1');
$('#motday').load('motdaylist.php?view1=$dayd&viewdate=1');
$('#notelist').load('notelist.php?dayd=$dayd');
});
function reloaddivs()
{
$('#mot').load('motview.php?view1=$dayd&viewdate=1');
$('#work').load('workview.php?view1=$dayd&viewdate=1');
$('#motday').load('motdaylist.php?view1=$dayd&viewdate=1');
$('#notelist').load('notelist.php?dayd=$dayd');
};
the above im using to display 4 lots of data on one page that all updates nicely on a timer or after ive interacted with a page by calling reloaddivs
Inspect your page carefully to identify exactly what is the data which is to be updated every 10 seconds - chances are it will not be the whole page (menus, navigation, headers, footers).
Cache all that data say, every 10 minutes, or every hour - especially if data driving any of those elements are being dragged from databases.
Then include the panel containing the dynamic data.
Better yet might be to load the dynamic data using Ajax to refresh every n seconds.
I'm writing a module for Joomla. It's going to be displaying data that it gets through a SOAP request. The problem with the SOAP request is that it can take up to 5 seconds to retrieve the data. This Joomla module will be on a page with many other Joomla modules and other content. I'm concerned that if this one Joomla module doing the SOAP request takes up to 5 seconds that it will delay loading the rest of the page. We have all been to websites which delay loading because of one part of the page and I don't want that to happen.
I am wondering if the solution is to have the Joomla module use AJAX (which I have no experience with yet) to do the SOAP request (currently it's being done with PHP) and somehow allow the rest of the page to load while it might take up to 5 seconds for the SOAP request to return data so it can be displayed.
What is a good workable solution for this problem? Caching the data isn't really an option because, it's timely. Thanks!
I would go with Ajax for this one.
Use window.onload() to trigger your ajax to fetch the data. The only problem is that the whole page will load before you fetch your data, resulting in potential delays displaying final data.
The code will vary a lot depending on preference but the principle of ajax is:
Create a placeholder or with placeholder content (or nothing)
On an event (in this case page ready) request data.
When the data is ready, replace the placeholder content with your data.
This has an added advantage that you can use a 'refresh' button to trigger the change too, so users can request updated data without reloading the original page.
Ajax is well worth learning as it is a doddle either using jquery or simple js. W3schools.com have an excellent tutorial.
I am currently working on a website that is coded primarily with PHP/MySQL and HTML5 as a means to learn the code and become better. I used to work for a forum that used AJAX to reload the latest posts as if the user had just refreshed the webpage, except it just changed the content dynamically without a full reload.
My webpage: http://vgrnews.com
My specific situation is as follows: The homepage loads the four latest announcements and (soon to be) comments from the MySQL DB and displays them soonest -> latest. It is inside of a div called maincontent.
What I want to do: Have the announcements show up dynamically with AJAX regardless of the user refreshing or not. It would probably poll the server roughly every 5-10 seconds.
I don't plan to keep the homepage refreshing like that, but once I add more content it would be good to know how to refresh a div at regular intervals. I have read up on AJAX, but I don't quite understand all of the logistics, they just give you the code and expect you to pick it up. It is hard to morph the code to be applicable for my website if I don't understand it.
Sorry for the long read and thanks for all the replies!
function reload_content() {
$('#latest_post').load('ajax/get_latest.php');
}
window.setInterval(reload_content, 10000);
I will clarify on Alexander's answer for you. What the load() function is doing is performing an AJAX request to the given URL, and then setting the HTML of the selected div(s) to be the returned content. This means that your server should return proper HTML (and only the HTML you want in that div).
You can see http://api.jquery.com/load/ for more information on load().
If you plan on having your server return an JSON (or XML) representation of the information, you will have to use a jQuery get() (http://api.jquery.com/get/), and then process the returned data with a callback.
Note that both get() and load() are simply implicit applications of the jQuery ajax() method (http://api.jquery.com/jQuery.ajax/)
EDIT:
The setTimeout is just making the browser call the function ever x milliseconds. This is what will have it check every x seconds.