Illegally placed <form> makes table rows invisible ONLY when served via AJAX

OK, I'm asking for it, I know. Please bear with me.

I have a <form> that is embedded in between some table row tags, something like this:

<table>
  <tr>
    <td>foo</td>
  </tr>
  <form>
  <tr>
    <td>bar</td>
  </tr>
  </form>
</table>

I know that is illegal placement of the form tag, but all the browsers I've tried will allow it anyhow. I don't have control over the design of this code, so please bear with me.

When I load this page with JQuery and the JQuery UI.Layout plugin (s开发者_Python百科ee http://layout.jquery-dev.net/index.cfm ), the table row(s) that are enclosed by the form tag are no longer rendered. I assume because forms don't have any display properties themselves that either JQuery or the UI.Layout plugin are forcing those rows to inherit that lack of display.

Firebug shows those rows grayed out and indented one level below the form tag, which corresponds to their (lack of) display I think. Interestingly, when I don't use any of the JQuery stuff, Firebug shows those rows as NOT indented, but instead at the SAME level as the form tag that encloses them (and of course they are not grayed out) -- OH I also just noticed Firebug doesn't even show a closing form tag at all in this case.

I'm unsure if it's JQuery, the UI.Layout plugin, or something I've done with JavaScript that has caused this, and I'm still digging around, but there's a lot of code in those libraries, so I'd really appreciate pointers if anyone has any.

Is there a way to prevent this, or possibly force those table rows to have some display? Maybe the form tag needs some display property placed on it so those rows inherit it?

I'm a big advocate of standards-compliant code, but sometimes the boss just won't listen. So please spare the "fix your code" comments if that's all you've got. I appreciate it, but that's not what I'm asking here.

It looks like this issue is caused by the fact that the page is being loaded via a XMLHttpRequest ("AJAX") instead of being rendered statically (and this may or may not be a Firefox issue only). It seems to be the same as this:

http://forums.mozillazine.org/viewtopic.php?f=25&t=645220&start=0&st=0&sk=t&sd=a

That thread also didn't have any resolution beside resolving the malformed HTML. It's quite annoying that the browser will render it if it is passed via a "normal" browser page request, but not when requested asynchronously and fed into the DOM via script.

Ah well, buggy code begets buggy behavior, eh?

For lack of anything else (well, there are a few JavaScript-based ideas floating around out there (such as http://federmanscripts.com/2010/01/12/form-and-table-row-nesting-workaround/ ), but these don't suit my context), I'm going with the solution proposed as a comment above by the user "mu is too short".