SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page realtime update

    I'm quite new to DHTML/DOM programming via javascript.

    I'm having a n issue with realltime updates to DOM manipulated HTML via javascript. The basic issue seems to come down to, when you write an element to a page or change an existing element attribute, for example adding a row to a table via createElement or changing the height on say a div, the changes aren't displayed immediately in the user's browser.

    For example I've written a page that takes a list of users and looks up information about these users in a backend. The javascript I've written will change some status text to "querying user <username>", then do the look up and display the results on the screen while going to the next user in the list. Although I have managed to sort it so that the rows appear in realtime as the results are returned I'm now having a problem where the status text "querying user A" isn't updating until after the results for user A have been displayed!

    To be honest this realtime browser update stuff seems a bit of a minefield would anyone have any tips or links or whatever for thse sorts of issues?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    London, UK
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really seeing a question but I'm guessing you're doing something like this:
    Code:
    // 1. get the data
    startDataUpdate('user A', oncompletion=function() {
    $('title').value='Finished user A';
    });
    // 2. update the title
    $('title').value = 'Querying user A'
    If that's the case, why don't you just reverse the order:
    Code:
    // 1. update the title
    $('title').value = 'Querying user A'
    // 2. get the data
    startDataUpdate('user A', oncompletion=function() {
    $('title').value='Finished user A';
    });

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peterbe
    Not really seeing a question but I'm guessing you're doing something like this:
    Code:
    // 1. get the data
    startDataUpdate('user A', oncompletion=function() {
    $('title').value='Finished user A';
    });
    // 2. update the title
    $('title').value = 'Querying user A'
    If that's the case, why don't you just reverse the order:
    Code:
    // 1. update the title
    $('title').value = 'Querying user A'
    // 2. get the data
    startDataUpdate('user A', oncompletion=function() {
    $('title').value='Finished user A';
    });

    Cheers for the help but no I'm definetely trying to update the status text before doing the work!

    Trouble is this is pages of javascript, with a seperate backend and XML running in between.

    I'll try to code up an example, but I believe that this is a general problem with AJAX type stuff since I keep encountering it in different ways so was hoping people would have seen this sort of issue before.

    This basically seems to come down to when javascript wants to do a load of updates to a page and the data provided is coming from a backend then as the updates are passed through the the page DOM they aren't displayed straight away. So for example 50 rows are added to a table you don't see these rows appearing one by one as the DOM is updated, rather you get a big pause where nothing seems to happen then 30 seconds later all 50 rows appear at once as the browser *renders* all 50 changes at once rather than rendering the incrementally.

    (if anyone follows that!)

  4. #4
    SitePoint Member
    Join Date
    May 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok here's a simplified example of what I mean..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>test</title>
    <script type="text/javascript">
    
    	function onLoad()
    	{
    		// create array
    		var myArray = ["query 1","query 2","query 3","query 4","query 5"];
    
    		// loop through array
    		for(element in myArray)
    		{
    			document.getElementById("status").firstChild.nodeValue=myArray[element];
    			alert("pausing for a second");
    			pauseComp(1000);
    		}
    	}
    
    
    	function pauseComp(millis)
    	{
    		// simple pause function from www.sean.co.uk
    		date = new Date();
    		var curDate = null;
    		do { var curDate = new Date(); }
    		while(curDate-date < millis);
    	} 
    
    </script>
    
    <script type="text/javascript">window.onload=onLoad;</script>
    
    </head>
    <body>
    	<div id="status">empty</div>
    </body>
    </html>
    The code simple updates a bit of text every second show the status, there is a puse in there to simulate a query to a backend.

    Notice the extra line in there 'alert("pausing for a second");' which isn;t really needed but I've added to demonstrate the issue.

    Now run the above and ir all seems to work fine, the page first displays "query 1" in the status box then pauses for a second (while it pretend to get the data from the backend), it also gives an alert the user "pausing for a second".

    Now obviously there's no need for the pop up pausing alert every time so comment it out then run.

    What happens then is that the page loads, pauses for around 5 seconds then displays "query5", the intermediate "query1", "query2" etc.. messages are never seen!

    The point here being although the DOM *has* been updated to say query1 then query2 etc.. the browser hasn't rendered any of these changes to the screen and as a result the user just perceives a big pause where nothing seems to be happening followed by all the updates seeming to happen to the page all at once instead of incrementally, this kinda seems to defeat the point of AJAXing an app.

    So what I'm wondering is, is there a best practice or does anyone have an experience or tips or links on how to work around this sort of issue which I suspect most AJAX programmers will encounter at some point.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •