divs created (javascript/mootools) from ajax response not showing until entire response processed

Question

Chrome 18.0.1025.162m Struts 1.x

Here's the basic structure of the divs I'm creating using js/mootools:

<div class="track">
 <table>
  <tr>
   <td style="white-space:nowrap; width:1%;">
   <td style="white-space:nowrap; width:1%;">
   <td>
  </tr>
 </table>
 <div>
  <table>
   <tr>
    <td style="width:50%;">
     <fieldset style="height: 244px; ">
      <legend></legend>
       <table>
        <tr>
         <td>
          <img>
         </td>
         <td>
          <table>
           <tr>
            <td class="label"></td>
            <td class="comparable"></td>
           </tr>
           <tr>
            <td class="label"></td>
            <td class="comparable"></td>
           </tr>
           ... 8 more of same
          </table>
         </td>
        </tr>
       </table>
       <table>
        <tr>
         <td style="text-align: center; ">
          <button type="button"></button>
         </td>
        </tr>
       </table>
      </fieldset>
     </td>
     <td>
     ...essentially same as prior td
     </td>
    </tr>
   </table>
 </div>
</div>

relevant css:

div.track {
 outline:solid thin;
 margin-bottom:10px;
 background-color:#DCEDEA;    
}

td.label {
 text-align:right; 
 white-space:nowrap;
}

'comparable' is just a flag so I can find and possible restyle them later.

These structures are created in the onreadystatechange function from a single JSON response. 100+ of these are being created but I don't see anything until they're all ready and then they all appear at once. I would expect (and prefer so the user sees progress) each div to display as soon as it's ready and added (using mootools Element.inject) to the DOM. If I step through using Chrome's dev tools I see the expected behavior of the div displaying immediately after the inject.

I'm fairly new to web development, so if you feel the need to critique my methods I'm open to hearing your thoughts, but I'd really like an explanation for the behavior I'm seeing.

Thanks.

edit

Basic idea of page html:

<body>
 <div id='foo'></ div>
</body>

Basic idea of js (within onreadystatechange):

var jsonObj = JSON.decode(req.responseText);
for (var i = 0; i < jsonObj.objects.length; ++i) {
   getStructure(jsonObj.objects[i]).inject('foo'); //getStructure builds the div above and returns the div element
}

(*vomits*) Urgh... tables... What is this page supposed to be displaying? Because you probably shouldn't be using tables for it. As for your question, I'm not sure I (or anyone) can answer until you post your JS code. — Jack M, May 01 '12 at 22:17
@JackM It's data to be compared at a quick glance. Simplified JS code posted. — jgreen, May 02 '12 at 00:15

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

I suspect that the DIVs are being displayed one at a time, but they're all being displayed so quickly that it looks like it's happening all at once. Add console.log(i); into that for loop and watch your console while the DIVs are loading. You can bring up the console with Ctrl+Shift+J using Google Chrome, or by installing the Firebug extension under Firefox.

EDIT:

In that case, I'd guess it has something to do with the display loop in your browser. Probably something like (in very rough pseudocode):

while (1) {
    executeJavascript(); // blocks until all javascript is executed, including your loop
    displayPage();
}

You may therefore find this discussion useful: How can I force the browser to redraw while my script is doing some heavy processing?

edited May 23 '17 at 11:49

Community

1
1

answered May 02 '12 at 00:32

Jack M

4,769
6
43
67

As these logging statements show, it spends 16 seconds going through the loop (1000 items). I don't see anything until the loop is done. `Request returned @ Wed May 02 2012 16:50:00 GMT-0700 (Pacific Daylight Time) Request decoded @ Wed May 02 2012 16:50:00 GMT-0700 (Pacific Daylight Time) loop done @ Wed May 02 2012 16:50:16 GMT-0700 (Pacific Daylight Time)` – jgreen May 02 '12 at 23:51
Thanks for that link. As mentioned in that thread the browser is single threaded so it probably just isn't able to modify the page while the loop is still going. If I'm ever able to absolutely confirm or find a way to get the behavior I want I'll post as an answer. – jgreen May 24 '12 at 00:54

divs created (javascript/mootools) from ajax response not showing until entire response processed

1 Answers1