Can you insert a form onto a page using jQuery's $.load() function?

Question

I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.

A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.

You can do that with jQuery like this:

$('#element-around-table').load(document.location.href + ' #table-id');

However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).

When I inspect the page using Firebug, I see the form, but it and its elements grayed out.

Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.

I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?

Answer 1

That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.

Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.

Answer 2

I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.