Using a progress bar to load a time-consuming script asynchronously - javascript

I'm loading a dynamic application (which takes 20-30 seconds), and I'm trying to create a dynamic progress bar that shows the user how much of the task has been completed dynamically as the page loads.
I'm accomplishing this by setting buffer to false and having my script output a line of JavaScript as it progresses that calls a function to increment the scrollbar:
function progress(percent)
{
$("#progressbar").progressbar({value: Math.round((percent*100))});
}
This is called by a simple function call like progress(15) generated by my page and sent realtime to the browser. Someone suggested on another thread that I could optimize this by
attaching the progressbar to a .load() AJAX call, but as far as I know this ONLY returns once the whole page is loaded. Is there any way for me to use some type of asynchronous call to execute the time-consuming code and still be able to display realtime progress as it executes?

You'll need something like a ticketing system. When the client requests this time consuming operation, they are given a ticket-id.
Now they can poll the server for updates; and this can be served by a process/script different from the one actually handling the request. I'll update this answer if you add more details to the question.

Related

How do I measure the progress of an ajax call? In Php with jquery/ajax

I have an AJAX call that is running a long PHP script where it has 20 different results, I would like to show when each step in the script is done.
Like so 1/20 done, 2/20 done, 3/20 done.
Latest 29-12-2015 03:17.
I tried to create the JSON file as so (jsonFileName_uniqueTimeStampHere.json) by PHP, but the time taken to create the file with PHP, result in a 404 file not found error!
Because when the AJAX call is running it comes to the progress call before the file has been created, I know I can't create the file with JavaScript but is there anyway to create.
The file before the success callback from jQuery AJAX?
What would be the best way to show progress information while AJAX call is running.
The way I have it now, I have a JSON file saved on the server that gets updated with the latest state that has completed, but if multiple users is running the same script the JSON file with the state gets overwritten.
Should I save the state of each progress in DB and then receive it with multiple calls to a PHP method that get state that has been completed?
Should I keep using the current method I use and add a userID to the JSON file so it is unique on each call to the file?
How should I go about doing it the same way as Seositecheckup?
What is the best way to make a progress with AJAX and PHP?
Please tell me if you need any more information.
I have looked around and don't feel like the info or half of info, there is to find online has been enough to do this myself.
I would like to use jQuery AJAX and not XMLHttpRequest, I'm looking for something similar to seositecheckup.com, when you scan a page you can see the state update on each completed function in the console and is done with different AJAX calls. How is that possible?
Should I forget about using jQuery and keep focus on plain JavaScript instead?
Right now I have a setup with jQuery that works the problem is, that I use a JSON file to get the result from and it gets overwritten when multiple users request the same script, is it possible to store the state in db instead and receive it from there with some unique identifier?
In the future I would like to make it possible to put the script into a queue that could be run and when the script ends it should send an e-mail to the user.
The HTTP way of handling requests that may take a long time is for requests to return a 202 and the body of the response should contain the URL where the user can query for the result.
#Request
POST /some/entitities
...
#Response
HTTP/1.0 202 Accepted
/jobs/{jobId}
The user can then poll /jobs/{jobId} which can return a number to represent progress. Do you have to use this? No, but if you do, others developers can immediately recognize what is going on.
Even if you don't use the approach I recommend, you will also have to keep track of job progress in your database and have a separate AJAX call to find out the current progress.

Is it Possible to Perform a background PHP server task from an AJAX call that will not lockup your site?

I have a server function like this
function very_long_task($data) {}
This function is called using $.ajax() function clients-side.
The problem is that when my server-side function very_long_task() is executed the site is locked down. Meaning that if I tried to view another page of the website from a different tab or window, the website will not load until the very_long_task() function has completed.
Is there anyway to get around this either server-side or client-side?
UPDATED: 2015-11-3
The AJAX call is actually called many times because it is looping through all the elements in a list and performing an action on each of them. The very_long_task() function is then being called on each element.
For example, if there were a list of 20 elements then the very_long_task() function would be called 20 times. This does help a little bit in the overall responsiveness on that page but not on other pages.
UPDATED: 2015-11-3
Also this is built with WordPress so I can leverage some of their functions, but I have had no luck with wp_schedule_single_event since I need a return value.
https://codex.wordpress.org/Function_Reference/wp_schedule_single_event
UPDATED: 2015-11-3
Here is an updated view of my
function very_long_task($data) {
session_write_close();
// Very long task...
return $data;
}
You'll want to call session_write_close() as soon as possible.
This is because while one page has called session_start(), the session file will be locked until the page finishes execution, or until the session is closed.
If this is not done, any page calling session_start() will wait for the lock to be lifted.
UPDATE
I think I know what's going on:
your browser limits the number of simultaneous connections to a server, typically somewhere between 2 and 10.
If you're making 20 asynchronous AJAX calls, and you open the Developer Console (F12 / control-shift-I), you'll probably find that not all of them are executing simultaneously. This would certainly leave no room for additional connections.
Note, that the session_write_close() is still necessary, otherwise the ajax calls will execute serially.
SUGGESTION
So, it is best to only make one AJAX call.
If you want parallelism, you can fork child processes server-side.
You probably won't be able to use jQuery for this, because you'll want to send data from the server and flush()-ing it as it becomes available (HTTP streaming).
One solution I used in a WP importer plugin is not to use AJAX at all, but perform the long running operation, pushing out HTML and a <script> tag to update the UI.
I'm not entirely sure what you mean by "locked down" but below are some things to try:
Make sure that your AJAX is asynchronous
$.ajax({
url: '/start_very_long_task.php',
async: true
});
Make sure your PHP accommodates the expected behavior
// start_very_long_task.php
function start_very_long_task()
{
ini_set('ignore_user_abort','on');
ini_set('max_execution_time', 0)
session_write_close();
do_very_long_task();
}
function do_very_long_task()
{
// Very long task stuff
// This can recursively call itself without making
// making multiple calls to session_write_close(), etc...
}
start_very_long_task();

Get dynamically changed data from web page using javascript / jquery

I'll be as direct and as specific as possible.
I'm trying to create Greasemonkey addon that would create graph of winnings/loses on: dead link
As you can see, site has front page which dinamicly shows results of wins / loses and how much did which user win/loose. What I'm trying to do is catch every new entry so I can draw some grapsh and or statistics for user / users.
When I access div/span that should have data, it turns out to be empty. I know that reason behind this is that all divs with data relevant to me are empty on load and that they get populated later on.
What I don't know is how to access that data. I can see (using firebug console) that there are GET requests executed all the time and that in those get requests is data that I need.
Can someone tell me or at least point me into right direction, how to access that data every time it gets refreshed / inserted?
You can try using the $.ajaxSuccess function to specify a function in your script to be called everytime an ajax request completes in the main page. This'll be fired for every successful ajax request, whether it pertains to the data you're talking about or not, but should allow you to re-scrape that section of the document to grab any and all data in it after every successful request. You may want to wrap your callback function in a setTimeout of some kind to make sure their own callbacks have a chance to fire and inject/modify the content before you scrape it. It should still seem instantaneous to the user if you set a timeout of, say, 1-10ms.
http://api.jquery.com/ajaxSuccess/

progress bar while waiting for server

Some operations are time costly and it takes long time while waiting them to finish.
Sometimes timeout occurs.
I want to use a real time progress bar, so I want to show the status to the user and also I want to prevent timeout. Which technologies must I use? JS, Ajax, multithread or both? and how can I iplement this?
Please advice.
I'd recommend using a library like jquery.
Here are some links:
jquery progress bar link 1
jquery progress bar link 2
Enjoy.
The easiest thing I can think of would be to implement a progress variable linked to the session (or a unique id) which is updated every so often by the slow-loading script. You can then have a 2nd page which returns the current contents of this variable. Query the status variable via ajax every few seconds to update your progress bar.
Alternatively, you can use this method without ajax. Basically you flush a script that displays a progress bar to the browser from the slow page. As the page continues loading, it flushes javascript update() calls every so often to update the bar.
http://devirtu.com/2008/10/16/making-progress-bar-of-page-loading/
If you are using an javascript and ajax, you can call / initiate the process(in server) from java script using an ajax call.You can show the user a loading image till you get a response back from the server. www.ajaxload.info allows you to generate your own loading images. have a look # it.
if you use jquery ,things would be much easier.
Check these links
http://docs.jquery.com/Ajax/load
http://www.shawngo.com/gafyd/index.html
Cheers

Is it possible to gracefully handle a Google Maps AJAX request timeout?

My site uses the Google Maps API. In situations where the connection to Google is slow and the map can't be rendered in a reasonable time, I'd like a Javascript callback method to be called such that I can display a useful message to the user rather than have a 'loading...' message constantly displayed.
Is this achievable?
Maybe you could have a sleep function that would check if the page has loaded yet, and after a certain time you take some sort of action.
See this posting for a situation similar to yours
setTimeout might be useful too.
so, you would have:
setTimeout((function()
{ /* test if the page is loaded,
if so, call another function
or set a flag to get out*/
}),2000); //set for 2 seconds

Categories