DataTables destroying forms?

juli84

I am using the dataTable as a part of a big form. The dataTable is holding radio-buttons, which are interacting with radiobuttons outside the dataTable. Sometimes the dataTable is removing the closing "" tag and re-inserting it right before the dataTable starts. Which is not destroying the whole form, but the interaction of the datatables radioButtons and the outside-radiobuttons.

My current solution, which is sometimes, probably due to timing, not working. I am triggering a function on the complete-event of the dataTable and then remove the "" tag, where ever it is and insert it at the end of my form-area. This solution is really dirty. Probably i am just missing something.

Code looks similar to this setup before DataTable Code is executed:
[code]






--Data Tables Init Code



--Table content alreade in here, no ajax-insertion











[/code]

And after the DataTable Code is executed (Just the position of the "" tag changed {of course the whole table looks different, due to DataTabel Code, but i haven't changed that here, cause the table itself is working perfect.}):
[code]






--Data Tables Init Code





--Table content alreade in here, no ajax-insertion










[/code]

allan

Hi juli84,

Sounds very odd indeed! My first guess would be that there is invalid HTML somewhere which is causing the browser to insert the closing form tag prematurely. If you run your page through the validator ( http://validator.w3.org/ ) what does it come back with?

I've just tried my zero configuration example with a form tag surrounding the table, and it does what is expected - and I can't think of any reason why DataTables would mess this up from looking at the code.

Are you able to post a link to a page which shows this behaviour? It will make debugging what is going on much easier!

Regards,
Allan

juli84

The Validator couldn't find anything, but after a lot of searching did find something. The startging form-tag was in a div which was closing before the form was closing. I fixed that and it seems to work, but the error was not very consistent before, so i hope that's it.

Just to get things straight in my head. Is jquery "cleaning" my code before doing changes? I just want to know the reason how the form-closing tag was moving around?

Thanks for your fast reply.

allan

Hi juli84,

So, based on your description, did you have an HTML structure something like this:

[code]



...

[/code]
The validator most certainly shouldn't have pass that as valid! :-). HTML doesn't need to be strictly well formed XML, but it does need to be correctly nested, otherwise things like this happen.

The cause of what you are seeing isn't anything to do with jQuery or DataTables, it's the web-browser itself. What it does is parse through the 'tag soup' as they call it to try and form well formatted HTML, which it can then render. So in the case above, what will happen is that when the browser sees the closing 'div', but the 'form' is still open, it will assume that you forgot to put in the closing form tag, and do it for you. Then when it comes to the proper closing form tag, there are no open forms as far as it is concerned, so it simply removes it.

This is the danger of tag soup - and why writing valid HTML is a good thing to do. It's also one of the reasons why Firebug (and friends) and so very good! We can see what the browser has actually made of a page.

Hope this helps,
Allan

juli84

Thanks a lot for your help.