In the 1.5 version of tasks, I’m using a hidden iframe to go fetch a task’s sub-tasks when the user clicks on the plus (+) image. While implementing this, I ran across some unexpected problems. I hope someone out there has some insight as to why the problems were happening – perhaps workarounds or alternate solutions.

First, I should mention a problem I found in Internet Explorer (IE) 5.2 for Mac. IE has fairly decent DHTML support, but there are some annoying limitations. For some reason IE thinks it needs to repaint the entire screen when I load an iframe that isn’t even visible. This will be annoying to Mac IE users and they may want to stay with version 1.0 or I might build an option to let people keep the old list view on the home screen and load the entire task tree initially on other screens as I did in 1.0. I haven’t had any feedback on this yet from the demo.

My first implementation was using a single iframe to go fetch the sub-tasks for the selected task tree onclick of the plus icon for the task tree. I found that if I was clicking on the plus icon for several tasks quickly in succession, I could interrupt the transfer and only the sub-tasks for the last click would load. I could then go back and click again on the tasks that had not been loaded and they would load, and it was sometimes very hard to even make this happen, but it did happen and I didn’t like it.

My second implementation was using a div that was positioned so it was not visible on the screen and I would document.write() an iframe into this div for each task tree that was expanded. This seemed like a very sound way to accomplish what I wanted and in normal use a user is rarely opening more than 5-10 tasks so the number of frames shouldn’t get too out of hand… but it didn’t work in a really weird way. Actually, loading the first sub-tasks worked ok, but when I’d click to load the sub-tasks of a different task it would successfully load the sub-tasks but collapse both task trees back to the initial closed state they were in when the page was initially shown. Even more surprisingly, this was consistent between IE and Mozilla browsers! Somehow, having multiple iframes write to the same document caused some confusion about the state of various style properties that had been set via javascript after the page had already loaded; namely the display: (block/none) property on a div.

So for my third implementation, I went back to using a single iframe for transferring data but I added an additional variable that I would set when someone clicked to display the sub-tasks of a task. Then on subsequent clicks, I’d check for this variable before I’d ask the iframe to load a new set of sub-tasks. If it was busy, I’d ignore the click until it finished loading and cleared the variable. This seemed sound to me as well, but for some reason I couldn’t get it to work either. The variable was being set properly, and the code that was telling the iframe to go get data was reading the variable properly and not requesting a new set of sub-tasks – but the click was still interrupting the iframe from loading. It would just stop and never return with the initially requested sub-tasks. And since it never returned, it never cleared the variable and the page was effectively dead.

So I’m back to my original implementation with more questions that I have answers… it has been working fine and not annoying me at all, but I still wonder why I hit these problems.

Comments and questions are invited.