Can I use javascript to force the browser to “flush” any pending layout changes?

Question

I have a library that build UI using Javascript, and because of the dynamic content involved I sometimes want to put content out to the browser, examine how the layout was c

Answer 1

I have no idea that this will actually work for your implementation, but:

var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "".concat(myDiv.innerHTML);

I believe that setting innerHTML forces a DOM reload for a child element. I have no idea what would happen if you scoped this to the whole site. It sounds like you're pretty well hooked into the DOM all over the place though, and this method might force any node references you've already made to become undefined. In other words:

var mySelect = document.getElementById("mySelect");// suppose this lives in myDiv.
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "".concat(myDiv.innerHTML);

In the above instance, I believe you'll lose your reference to mySelect. If you've got lots of this going on and you're using fields not getters (i.e., not getting each element you care about using $() or $get or document.getElementById(..) every time you access it) then there's a strong chance this type of flushing could hose you.

You'd also most certainly lose any page state data you're not manually tracking/setting - textboxes with new text from the user, checkboxes newly checked by the user, etc, would reinitialize to their default state using this approach to flushing.

Good luck - happy coding!

B