Idea for using AJAX to improving useability of one of our websites

Post Reply
barry.marcus
Posts: 288
Joined: Thu Nov 16, 2006 1:05 pm

Idea for using AJAX to improving useability of one of our websites

Post by barry.marcus »

We have a web page that, once invoked, initiates a fairly lengthy process repeatedly for many data points. That is, when the page is loaded, the code iterates the data points, calling the lengthy process for each one. Each call to the lengthy process can take several seconds, and there can realistically be several hundred data points for which it must be called. As the process returns from each call, the results are gathered and ultimately displayed once everything is completed. The problem is that the results are displayed in a table, and the browser won't render that table until all of the results are returned. So as it stands now, when there are many data points the page appears to hang. Eventually the processes all complete and the page renders, but it's not particularly user friendly this way.

My idea is to repeatedly update a section at the top of the page with the progress, ("now working on item 8 of 100", "now working on item 9 of 100", etc.) with each return from the called process, and then display the table when everything is done. I thought I would use AJAX do this since I've got some other ideas for using AJAX, and thought that this would be a good way to "get my feet wet." I more or less understand the concept of triggering the asynchronous call via some event (such as a button click) but I'm stuck as to how to trigger that call via a vortex loop, either at the start of each call in the loop or in response to the return of the results.

Any suggestions pointing me in a good direction would be appreciated.

Thanks.
User avatar
mark
Site Admin
Posts: 5513
Joined: Tue Apr 25, 2000 6:56 pm

Idea for using AJAX to improving useability of one of our websites

Post by mark »

You may not want to loop as such. Assuming you don't want all 100 kicking off at once you might just have the first one on the page. The completion of each one would add the next to the page. The ajax call would just process one and send back the code to start the next.

Ajax is ultimately the best solution probably, but you might sneek by using a <flush> after each item. Browsers will usually try to render as much as they can as it comes down.
User avatar
mark
Site Admin
Posts: 5513
Joined: Tue Apr 25, 2000 6:56 pm

Idea for using AJAX to improving useability of one of our websites

Post by mark »

Also, never used it myself, but you might look at "long polling".
barry.marcus
Posts: 288
Joined: Thu Nov 16, 2006 1:05 pm

Idea for using AJAX to improving useability of one of our websites

Post by barry.marcus »

Not quite sure I understand... I DID try using <flush> at the end of the <loop> that iterates the data points. That didn't seem to do the trick; the code still appears to hang (though it doesn't really.) Perhaps a bit more information... The "lengthy" process/function is actually called within a loop that does a lot more stuff, although none of the other stuff takes a significant amount of time. Moreover, the lengthy process stores the results of each call to it to the database. That way, if nothing else changes, subsequent calls to the page simply query the stored results and displays those. That process is very fast. When the information re: a data point is changed, that data point's stored results are deleted from the stored results table and it has to be regenerated when the page is loaded the next time. The worst case is when the project is new, or all the data has been reset, and none of the data points have stored results.

Currently the code for the page is structured such that the calls to the slow function is within the main loop of the page (i.e., the one that builds the table). My idea was to pull that call out into a pre-loop BEFORE the main loop, and iterate the data points, calling ONLY the lengthy function sequentially for each one (which is how it works now within the larger main loop.) Each call to the lengthy function will store the results as I described. Then, when that initial loop is completed the code can drop into the existing loop and, since the results are now stored, the loop will run quickly (i.e., the results will already be calculated and the code will simply select them from the db table) and html table will build quickly, too.

But for this idea to correct the issue of the code appearing to hang *AND* to show the updating status on a single line of the page using AJAX, each iteration of this new pre-loop has to update a portion of the page, say a <div>, with something like:

<loop $myDataPoints>

... somehow update the <div> whose id is "myDiv" with the value of $loop giving the user peace of mind that the page isn't hung ...

<MyLongFunction data=$myDataPoints>
</loop>

I know that that is something that AJAX can do, but I don't know how to reference a specific <div> (or whatever) on the page other than with Javascript. So really it boils down to looking for a way to get the code to do that specific screen update before each iteration of the loop. Actually, it may not even have to be a call back in this case... I just need a way to "trigger" a call to a Javascript function on the page with each loop iteration, as if with, for instance, a click of button (with an onclick=function() specified in it's definition.)

Also, I get that even though AJAX's strength is asynchronous calling of Javascript, if it turns out that something AJAX-like is even the way to go here, it probably makes more sense in this context to make the call synchronous so that the first loop is guaranteed to be finished before the big loop that renders the html table even begins.

I hope I didn't confuse the issue!

I will look into "long polling"
User avatar
John
Site Admin
Posts: 2597
Joined: Mon Apr 24, 2000 3:18 pm
Location: Cleveland, OH
Contact:

Idea for using AJAX to improving useability of one of our websites

Post by John »

I think the basics of the code will look like the following (assuming jQuery for simplicity):

<div id="Status"></div>
<script type="text/javascript">
<loop $myDataPoints>
$$("#Status").html("Processing point $next");
<flush>
<MyLongFunction data=$myDataPoints>
</loop>
</script>

That will send the javascript to update the div after every iteration of the loop. It's possible you might need to move the <script> and </script> inside the loop if the javascript isn't executed until the </script>
John Turnbull
Thunderstone Software
User avatar
jason112
Site Admin
Posts: 347
Joined: Tue Oct 26, 2004 5:35 pm

Idea for using AJAX to improving useability of one of our websites

Post by jason112 »

It looks like there's largely two different ways to go about it:

* You can use John's method, where the long-running page continually outputs javascript that updates the contents of a div on the page. This isn't using AJAX, it's a long page loading over time.


* Alternatively, you could have the long processing done by an exec'd background task (like we do our crawls). The web page returns immediately, with some javascript code that runs every couple seconds to update the status via AJAX. You'd define a small vortex function that just reports "now working on item 8 of 100", and the AJAX would invoke that function and populate a div with its contents.
barry.marcus
Posts: 288
Joined: Thu Nov 16, 2006 1:05 pm

Idea for using AJAX to improving useability of one of our websites

Post by barry.marcus »

Thank you! Jeez! I guess because of tunnel vision I was making this considerably more difficult than it really was. John, thanks for the jolt of reality. That is exactly what I did, and it works just fine. Jason, you're right... Either way would work. In this case it's almost moot because the page doesn't have to do ANYTHING other than what the long process does. So whether it returns immediately and updates status intermittently, or the long running process continues while each iteration updates the screen, really doesn't matter in this case. As I said, each iteration only takes a few seconds, and other than seeing that tell-tale "Done" at the bottom of the page there really is no difference to the user experience whichever way I go. I went with John's because it's quick. But as I mentioned before, I'm looking into using AJAX for other applications where it really is appropriate.

Thanks again. I appreciate it!
Post Reply