2

I'm running into a little problem that's driving me crazy, and I'd welcome any thoughts as to the cause. At this point I feel like I'm just going 'round in circles.

I have the following code:

function JSsortTable(phase) {
    dynaLoadingDivShow();
    createSortArray();
    dataArr = do2DArraySort(dataArr, orderList, orderDir);
    sortArrayToRs();
    dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
    dynaLoadingDivHide();
}
function dynaLoadingDivShow() {
    document.getElementById('dynaReportGuiWorking').style.display = 'block';
    document.getElementById('dynaReportGuiWorking').style.visibility = 'visible';
}                   
function dynaLoadingDivHide() {
    document.getElementById('dynaReportGuiWorking').style.display = 'none';
    document.getElementById('dynaReportGuiWorking').style.visibility = 'hidden';
}

<div style="visibility:hidden; display:none; z-index:25;" class="tableControlHeader" id="dynaReportGuiWorking">
    Working...
</div>

I call JSsortTable as an onclick event. When I run the above code as is, I never see the div in question. The JSsortTable function takes some 800-2500 ms to run so it's highly unlikely I just missed it the 10+ times I tried. If I change the style of the div to start out visible, then it will remain visible until after JSsortTable has finished running and then disappear; exactly as expected. So I figured the problem was in dynaLoadingDivShow.

Now, I tried removing dynaLoadingDivHide to see what would happen and found something completely unexpected. The div will not appear when you the JSsortTable function fires. Instead, after all the other code has been run, when JSsortTable finishes, the div becomes visible. It's alomst as though IE (version 8) is saving up all the changes to the DOM and then waiting until the end to paint them. This is, obviously, not the desired behavior.

Anyone have any thoughts on this? I'm only allowed to have IE at work so I haven't tried this on other browsers. I have enough CSS/JS knowledge to be dangerous, but am by no means an expert yet. ;)

Thanks!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Nicholas
  • 1,974
  • 4
  • 20
  • 46
  • Can you call the sort function asynchronously and move the dynaLoadingDivHide method to the end of that function call? http://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation – Jasoon May 20 '11 at 12:39
  • Does the div contain any content at the time dynaLoadingDivShow() is called? Does it get populated by data after the other operations complete? If the div is empty at the time of the first 'show' call, this would fit your description that it becomes visible after the other operations complete. – George Cummins May 20 '11 at 12:35

1 Answers1

1

You'll need to use a timeout:

function JSsortTable() {
  dynaLoadingDivShow();
  setTimeout(JSortTableWork);
}
function JSortTableWork()
  createSortArray();
  dataArr = do2DArraySort(dataArr, orderList, orderDir);
  sortArrayToRs();
  dynaListTable.tableControl.refreshTableViaObjects(rsDynaList, colObjs);
  dynaLoadingDivHide();
}

Note that I took out the parameter phase because it's not used in the function. If you do need the parameter then you'll need to modify the timeout as

setTimeout(function(){JSortTableWork(phase);});

and also add the parameter to JSortTableWork

ic3b3rg
  • 14,629
  • 4
  • 30
  • 53
  • ic3b3rd, this appears to work; thanks. I tried something very similar to this without success. I'll need to do some further research. This seems thoroughly unintuitive to me; could you explain why the browser is acting this way? – Nicholas May 20 '11 at 19:34
  • The screen doesn't repaint until there's a break in the stack. It can be a pita to deal with but it's actually crucial to behaviour... just try to imagine making, say, 100 style changes and the browser repainting after each one - not pretty. – ic3b3rg May 20 '11 at 19:40
  • I see; so my initial guess was right. And yes, that does make sense, I just thought I had seen different behavior in the past. This may be only tangentially related, but do you know of a good resource that lists what constitutes a break in the stack? Google searches weren't coming up with much for me when I was originally looking for the cause of this. Also, I didn't think the second attribute of setTimeOut was optional; what does that default to (I'm guessing zero)? Thanks so much! – Nicholas May 20 '11 at 20:10
  • There's a break between most events, i.e. between mousedown and mouseup. There's never a break in a for/while loop. As you just found out, if you have a function which chugs away for a while, the screen will not repaint until it's done. I don't know of a reference for more info. I believe the default is the min 10ms. – ic3b3rg May 20 '11 at 20:20