I have a jsf page having a request scope bean. A slow database query is fired in the constructor of the request scope bean. Then, the results of the query are shown in a jsf data table on the web page.
How do I display a wait message until the database query completes?
I tried calling a javascript function for onLoad of tag. The method is called only after the slow db query executes.
The slow database query is happening on the server, long before the constructed page ever makes it out to the browser. The only way to do what you want is to arrange for the browser to display the "Wait" message before you initiate the HTTP request that results in your JSF page being run.
Probably the best way to spend your time on this, however, is to fix the query.
You must load the "wait page" first and then, in the onLoad of that page, load the one which does the DB query. If the query is fast, the user won't see much flickering because modern browsers (= anything but IE6).
Alternatively, you can load the result in a hidden iframe and show a "please wait" in the page. When the code in the iframe has loaded, you can make it visible by accessing the parent document with parent:
parent.getElementById('frame').styles.display = '';
parent.getElementById('wait').styles.display = 'none';
(put this in the onLoad of the JSP which is inside the iframe).
Related
I am working on a Web Application for which I am currently doing something like this:
Page1.php posts to Page2.php.
Page2.php contains an HTML file with 2 Javascript files. The first Javascript file uses an AJAX call to trigger Page3.php. The second Javascript file listens to Result.json for results.
Page3.php invokes a Python Script, Task.py.
Task.py takes about 15 minutes to run, writes results to Result.json which I need to display on Page2.php.
The problem here is 1st that the since Task.py is such an expensive call, I end up on Page2.php on Chrome and Chrome pops open the window asking me if I would like to kill or wait for the page to load and the Web Page eventually becomes unresponsive (Times Out).
As a result, I become unable to display the results stored in Result.json on the page.
Another problem that I am having is that the Task.py file that I am executing appears to be a blocking call, so when my first Javascript makes the AJAX call, it prevents my 2nd Javascript from listening to Result.json for results (When Javascript makes an AJAX call, it waits there until it gets the response back). So even if there was content already in the Json file, it wouldn't pick up on it until the 1st AJAX call returns.
The Listening Javascript file looks something like this:
while(true){
result = setTimeout(myFunction, 60000);
if(result === true){
console.log("Quitting the loop");
break;
}
}
where myFunction parses the Json file and manipulates the DOM to display the content.
Any Advice?
You can use Server Push/Websocket for it. If your server is ready to serve the data, it can notify the client side to get the data. Just search for socket.io / nodejs.
first Ajax call starts page3 and set event listener to server push message. If it receives the message, simply get content of Result.json.
I have a chatbox, so when user hits post, it calls a php script to update database, and another php script located within itself to refresh the conversation to display the newly added message.
I thought about how to do this and here is how i have come about:
Have ajax call on button click to POST the data needed to the first php form to update the database (No need to return anything except whether succeed or fail)
Have e same ajax call php script located within itself to refresh the conversation (Note that this php script is located within itself as it is a loop and i use it to echo out the reply divs) in this case, page will not refresh and data can still be sent and obtained.
However, I'm not very sure how to do the second point, being call a php loop within itself to refresh the page and update the newest entry, any suggestions or would it be overly hard to do so such that i should just manually refresh the page.
To be more specific, this is the process flow of how adding a reply will work:
User types reply, clicks post.
Ajax is already attached to post button, so detects the post and fires first POST request to addchat.php
addchat.php contains mysqli code to update the database with the data posted from the ajax, returns success or fail
Once Ajax receives back success request, immediately fire off a command(this is what i am not very sure), that runs the php code located within the same document to echo out the newly updated chat reply (i do have timestamps in my database, so there is the ability to compare time, but note that the function is located within the same script)
After the php code is fired again, it updates the html automatically, since its located within the same script.
I am also not possible whether this is achievable with ajax, because many others use long polling instead to keep checking the database, but because my chat system does not need that high level functionality and the replies aren't that request, so what i am doing is just to get ajax to fire off the retrieval php script whenever somebody posts a reply to update the conversation. this should be more than enough.
I have a php script where a query runs to load all the messages from my database.
When I click at one message I can choose delete, then he runs a AJAX call with jQuery.
At page that AJAX called there runs a query to remove the record from my database.
This is works fine. But when the AJAX call is finished, I see still the div with the message. Pass if I refresh the page the div is gone. (because I have delete it from the database).
Is it a good way to refresh the page directly after the AJAX call return true.
The disadvantage is that you run the database query again, and get all the data from the database.
Is there also a way to refresh the page "localy" so already loaded content is no longer be retrieved again by the database?
EDIT :
I have solved the problem now with:
$('#message' + myId).remove();
This works.
It has been a long time since I have worked with PhP or Javascript and I want to build a website that runs on a server with MYSql that can update the page when the data in the MYSQl table changes.
I am not sure how to do this, if anyone has any ideas I'd love a boost.
assuming this data is being gathered using an SQL SELECT statement,
move your statement and the way in which it displays the results into a different file.
then you can load the results from the query into a div using jquery .load
$("#someDiv").load("somefile.php");
If the data is not being updated from the page in which you want it auto refreshed, use setInterval
$(document).ready(function(){
setInterval(function(){
$("#someDiv").load("somefile.php");
}), 2000);
});
with 2000 meaning it will run every 2 seconds.
If you are updating the data and want the updated results shown without the need for a page refresh, use ajax and in its 'success' function call:
$("#someDiv").load("somefile.php");
You want a webpage to be notified of a change in the server. More specifically, you want the data in your page to be refreshed when the data in your database changes.
You have at least two options:
You write some javascript so that you browser periodically asks (polls) the server for changes via ajax (as another user has already explained). You could even consider long polling.
or...
You make use of websockets, which will allow your server to push the data to the client whenever the server wants.
You may want to take a look at the many posts in SO which discuss this matter.
Refresh content automatically if the database changes
Automatically refresh browser in response to file system changes?
How can I refresh a page when a database is updated?
Once I load a webpage, I insert some Javscript via the console. I was wondering if it's possible for me to, using either Javascript or jQuery, reload the page (not from cache) while keeping a setInterval that I have running. I'm familiar with location.reload(), but that terminates it.
When you reload a page, the entire page context including all running JS is completely destroyed. You cannot keep a setInterval() running while its host page is reloaded.
You can create a signal for the new page to start the interval going again itself using a cookie, query parameter or local storage value (query parameter is probably the most appropriate). If you go this way, then you need to code the page to look for a specific query parameter and if it finds it, then the page should start the designated setInterval() itself. You can even pass some data in the query parameter (such as how much more time until the next interval should fire, etc...).
Another option is to not actually reload the page, but instead to refresh the content manually by getting new content via an ajax call and then inserting it into the current page. This allowed the current page context and running interval timers to continue running.
Not possible unless you fetch the page using Ajax request, then replace the body while the setInterval Is working