This seems like such an oddball topic, I’m not sure it’s really worth blogging about, but that’s never stopped me before, so here we go
I’m working out on a project where I’m pulling some data from a search, packaging it up into an XML message and then that XML is ultimately transformed into HTML via XSLT. There’s a lot of jQuery involved, one bit of which implements some tabbing functionality. When you click on a tab (really, a <div>), jQuery invokes .hide() and .show() on various divs (the initial page load downloads all the content so there are no postbacks in this case).
A bunch of hours ago, the tab switching logic started to behave erratically and it wouldn’t show one of my tabs. I ultimately tracked it down to the fact that internet explorer (at least) thought that the <div> tags nested far, far deeper than intended.The developer toolbar would show:
-<div id=”Tab1Content”>
-<div>
-<div>
-<div id=”Tab2Content”>
-<div>
…………………………
</div> <—finally showing it was closed all the way down here!
So, if I did a $(“#Tab1Content”).hide(), I’d also hide Tab2 and I could never show Tab2 if I didn’t also show Tab1. I copied and pasted the code up into visual studio and it showed all of the div’s lining up nicely, just like they were supposed to be doing, looking like this:
-<div id=”Tab1Content”>
+<div>
+<div>
-<div id=”Tab2Content”>
+<div>
+<div>
I beat my head against the wall for a while and noticed that in the actual HTML code was generating a lot of empty <div> tags, like:
<body>
<div id=”Tab1Content”>
<div id=”row1” />
<div id=”row2” />
</div>
<div id=”Tab2Content”>
<div id=”row1” />
<div id=”row2” />
</div>
</body>
(The above is waaaaaaaaaaaay oversimplified. The empty div tags are totally valid. Some of my <div> tags were full of content, but many more were not. I came to the realization that my <xsl:for-each> directives were emitting the short-form div tags when the xsl:for-each didn’t’ find any data. I forced an HTML comment into the output, as shown:
After I did that, all the div’s lined up nicely and my tab switching started working.
As always, I hope this helps someone in a pinch.
</end>
Subscribe to my blog.
Follow me on Twitter at http://www.twitter.com/pagalvin