progress bar while waiting for server - javascript

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

Related

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/

AJAX Page Loading and Progress

I want to make a jQuery AJAX page load with a progress bar at the top. I have found an example of what I am trying to achieve here.
I could use a pointer on where to start.
I intend on using it in a WordPress site.
Take a look at this reference page. Specify a callback for onreadystatechange. A simple loading bar would just increment the bar a little bit as the readyState changes. This might be what the linked site does, and this is what modern browsers do (they switch the loading icon once the headers are received or once a connection is made). A more complex loading bar would read the headers received from the request when HEADERS_RECEIVED, then compare the content-length header (when LOADING) to the number of bytes received so far:
Downloading; responseText holds partial data.
This technique might be too much trouble to for the value added. AJAX is typically designed to return light-weight data so loading time shouldn't be long enough to really need a fine-grained loading bar.
You might have to implement this differently if using jQuery, but the algorithm is the same.

jQuery get page with use of #/page

Hello I have a question recently I seen more and more sites using #/pagename instead of going to /pagename which is useful because it does not reload the page.
How can I do the same thing with jQuery? http://mysite.com/id#/1 <-- would load user with id 1 if you would change that 1 to say 4564 http://mysite.com/id#/4564 the page would load user data fro 4564 with out refreshing the page it self.
Thanks in advance
You are actually seeing two things:
The request for content is be done asynchronously (AJAX). To accomplish this look at jQuery.Ajax. http://api.jquery.com/jQuery.ajax/
There is also a 'hash trick' to enable back button support. Typically, a standard Ajax call does not play well with the back button. For this look into the BBQ jQuery library. http://benalman.com/projects/jquery-bbq-plugin/
Hope this helps.
Bob
YOU are looking for the jQuery history plugin. I've had great success with it, and there are triggers for when the hash changes so you can do whatever you want: load content with AJAX, or load a different slide, etc.
I would recommend you look at sammy.
It's a very light javascript framework intended to implement a thin-server model like this where the rendering occurs on the client's computer in javascript instead of served pages from a remote server. This is what allows many sites to avoid doing full reloads of a page every time a user performs an action.

Load a new page after another finishes loading

In my company we have a web-based tool that you enter an account, press a button, and the page takes a little bit to load, then loads account information. There are several different pages that do the same thing but load different information. I have already been able to make the sites load with direct URL execution (with an intermediate page and some JavaScript) so I only have to enter their account number once. My problem is, I want them to pull up all at the same time to speed things up, but there is some kind of lock that does not let you run the lookup in two pages at once. I want to make my site load the first page, then wait til it loads and immediately begin loading the next page in another tab on my page. Is that even possible in HTML and JavaScript? If so how, if not, what other language do I need to learn today?
check out the jquery's $(document).ready();
simply use
$(document).ready(function () {
//execute script that calls another page, you could use ajax
});
other method is using iframes, which i personally don't recommend
Do you mean something like Pageflakes?
If so, you will need to utilise AJAX (and/or webservices). A good tutorial/source code on building something like this is at DropThings (which is from the same author as PageFlakes).
This is using ASP.NET C# and AJAX Control Toolkit.
If the two URLs are loaded into separate <iframe> elements then you just need to create a load event handler for the first frame to set the src attribute of the second frame.

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

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.

Categories