Firefox form elements not being updated properly by Ajax.Updater

[Marc]

Visually, Prototype's Ajax.Updater is working as advertised.

I call a server action that creates a new div that contains a few form
elements.
The page reflects the updated form elements...or at least it appears
correct.
But when I finally submit the form (form.submit - not ajax) , all form
elements
updated by the Updater, are missing from the submit.

I have used firebug to verify this, and the post only has form
elements that were untouched during the Ajax updates.

I have reproduced this in both Firefox 3 and 2. IE does not seem to
exhibit this problem.

I am able to pick the values off of each element
using document.getElementId and then I can manually append them onto
the form's action:
e.g.
-------------
myForm.action="myurl"+"&var1="+var1;
myForm.submit();
-------------

... but this is obviously not best. Is this a bug?

Thanks,
-Marc

[T.J. Crowder]

Hi,

> Is this a bug?

It *sounds* like a bug, the question is: Whose? Some subtle bug in
your code? A Prototype bug? A Mozilla bug? Can you create a very
small, trimmed-down test case that demonstrates the problem and post
it to http://pastie.org?

In the meantime, re your workaround of grabbing the values
programmatically, Form.serialize() might help there... (Of course, it
will grab all of the form field's values, not just the ones that are
being missed out.)
--
T.J. Crowder
tj / crowder software / com

[Frederick Polgardy]

This sounds eerily like a bug a colleague and I were experiencing a few weeks back, when we were dynamically inserting an input element into a form.  We tracked it down to the fact that the markup we inserted made the DOM subtly incorrect (mismatched tags somewhere).  The thing that makes it hard is that Firebug deliberately corrects what it sees so that it can render the DOM tree control, so it might help to get something like the FF web developer toolbar and use the View Generated Source feature.  But I suspect this is what your problem is.  The symptom was exactly the same - any input elements we added dynamically were not being submitted (also non-Ajax).

Hope this helps.

-Fred

--
Science answers questions; philosophy questions answers.

[Frederick Polgardy]

Actually, I believe the initial document was already subtly incorrect, but the browser is more lenient about the initial HTML than it is about elements being inserted into in a bad document.  Try throwing your page into a W3C validator or something.

http://validator.w3.org/

On Sun, Jul 13, 2008 at 7:18 AM, Marc Calello <marc.c...@gmail.com> wrote:

Fred,
 
This makes sense.  I have been trying to reproduce my problem without jsps and java, so that I could have a simple
test-case. So far, I am getting appropriate behavior...so it must be something like what you experienced.
 
I'll see if I can nail it down, and post back.
 
Thanks,

[Diodeus]

<FORM> tags must be inserted at a DOM-level, not through innerHTML
(which Ajax.Updater uses).

You can either:

1) Have the FORM tag in your original HTML, then just update its
action property in your callback

- or -

2) Use "new Element" (or appendChild) to add the FORM tag to the
document at a DOM-level..

[Frederick Polgardy]

Interesting, I didn't realize that.  In our case, we had a form in the original HTML, just inserting input elements into it.

-Fred

On Mon, Jul 14, 2008 at 8:46 AM, Diodeus <dio...@gmail.com> wrote:

<FORM> tags must be inserted at a DOM-level, not through innerHTML
(which Ajax.Updater uses).

You can either:

1) Have the FORM tag in your original HTML, then just update its
action property in your callback

 - or -

2) Use "new Element" (or appendChild) to add the FORM tag to the
document at a DOM-level..

[Marc Calello]

I found the problem, and Fred was right. 

It was an unclosed table prior to my form tag, that caused issues with the DOM in Firefox.  IE was apparently more lenient with this invalid HTML.

Once I found this, I was able to post the form -- without ajax -- and all of the form elements that had been updated via ajax were properly posted to the server.

Example of issue:

<table>
... some table
<table> <!-- missing closing table tag >
<form>
... my form
  <table>...other tables inside the form</table>
</form>

Thanks for all the help!  Hopefully others will now benefit from my typo.....

-Marc

[Richard Quadling]

2008/7/14 Marc Calello <marc.c...@gmail.com>:

I found the problem, and Fred was right. 

It was an unclosed table prior to my form tag, that caused issues with the DOM in Firefox.  IE was apparently more lenient with this invalid HTML.

Once I found this, I was able to post the form -- without ajax -- and all of the form elements that had been updated via ajax were properly posted to the server.

Example of issue:

<table>
... some table
<table> <!-- missing closing table tag >

Shouldn't that be </table> ?
 

<form>
... my form
  <table>...other tables inside the form</table>
</form>

Thanks for all the help!  Hopefully others will now benefit from my typo.....

-Marc

On Mon, Jul 14, 2008 at 9:57 AM, Frederick Polgardy <fr...@polgardy.com> wrote:

Interesting, I didn't realize that.  In our case, we had a form in the original HTML, just inserting input elements into it.

-Fred

On Mon, Jul 14, 2008 at 8:46 AM, Diodeus <dio...@gmail.com> wrote:

<FORM> tags must be inserted at a DOM-level, not through innerHTML
(which Ajax.Updater uses).

You can either:

1) Have the FORM tag in your original HTML, then just update its
action property in your callback

 - or -

2) Use "new Element" (or appendChild) to add the FORM tag to the
document at a DOM-level..

--
Science answers questions; philosophy questions answers.

--
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"

[Marc Calello]

Yes, that was the problem, it should have been a closing table tag.