[Solved] serializeForm does not work with IE7?

[o.robardet]

Hi,

I discovered Ext some days ago, and it's really a great lib =D>.
I'm using it to improve some of my apps UI with no problem until now.

I'm trying to submit a form using ajax. I'm using Ext.Ajax.serializeForm, which work fine in firefox (it returns the content of the form in a GET type URL), but not with IE7 (returns nothing).

The form is an HTML form, and I applied some Ext.form elements to its field. All field exists in the HTML code :


...
<form name="form_mailing" method="post" action="">
<input type="text" name="form_mailing_subject" id="form_mailing_subject" value="">
<textarea name="form_mailing_message" id="form_mailing_message"></textarea>
...
</form>
...

Appling Ext object on field onDocumentReady :


...
var fieldSubject = new Ext.form.Field({id: 'form_mailing_subject-cmp',allowBlank:false });
fieldSubject.applyTo('form_mailing_subject');

var mailEditor = new Ext.form.HtmlEditor({
id: 'form_mailing_message-edt',
width:640,
height:390,
enableSourceEdit: false
});
mailEditor.applyTo('form_mailing_message');
...

When clicking on my "submit" button (just a link with a jscript handler, not a submit input type in sens of html form):


...
alert(Ext.Ajax.serializeForm('form_mailing'));
...

Since the form exists as a DOM object, I think I can use Ext.Ajax.serializeForm, right?
Did I missed something or is there a bug with serializeForm() and IE7 (I'm using Ext 1.1)?

Does anyone already seen this problem (and maybe have a solution :p)?

Thanks.

[Animal]

What's the problem? Which adapter are you using?

[o.robardet]

I'm using Ext standalone (ext-base.js and ext-all.js).
The problem is that Ext.Ajax.serializeForm('form_mailing') returns a well formated URL (as expected) in FireFox (and Opera), but its returns nothing (empty string) in IE7 (doesn't test with IE6 or safari).

[Animal]

Just add this coode:



handler: function() {
alert(Ext.Ajax.serializeForm(form.el.dom.id));
}


After the line



text: 'Change Photo',


(You will have to add the trailing comma)

in /examples/form/dynamic.js. It's near the end.

Then run dynamic.html and click the "Change Photo" button.

In IE7, I get the serialized form...

[o.robardet]

Yes, it works for me too. But in this example, Forms are Ext object dynamically created.
My form exists in the original HTML source code.

I made some researchs and tests, and it seems that IE7 is not able to access to form elements using document.forms array (the array is not populate with the form elements). The only solution is to access to each field explicitly.
I'll do that for my case, and forget about serializeForm for now.

Thanks for your help :)

[Animal]

Just pass the actual DOM form object then instead of the string name.

[o.robardet]

I tried this, and it does not work either.
In fact, in my case, the DOM form object of my form has an empty elements collection in IE7.

Edit:

Ok, I cleaned up code step by step, and I noticed someting.
My form object is in a BorderLayout. In fact, the form content is split in two panes


<form ...>
<div id="layout_container">
<div id="center_pane">
<some form fields...>
</div>
</div id="east_pane">
<other form fields...>
</div>
</div>
</form>

If I disable the BorderLayout creation, all is working fine: IE have a correct elements collection in the DOM form objet, and serializeForm is working.
But if create the BorderLayout, or to be more precise, if I create a ContentPanel from a div pane and add this ContentPanel to the BorderLayout, the DOM form object no longer contains the form elements that are in the div pane (if I add only one div pane to the BorderLayout, form elements of the second div pane not in the BorderLayout still exists in the DOM form elements, but not the ones of the BorderLayout added div pane).

The code that made form elements to 'disappear':


var layout = new Ext.BorderLayout('mailing_layout_container', {
center: {
autoScroll:true
},
east: {
split:true,
initialSize: 200,
autoScroll:true
}
});
layout.on('regionresized', onPaneResize, null, {delay:50});

layout.beginUpdate();
var centerPane = new Ext.ContentPanel('center_pane', {fitToFrame:true, closable:false});
var eastPane = new Ext.ContentPanel('east_pane', {fitToFrame:true, closable:false});
// problems occurs only with the two next lines
layout.add('center', centerPane);
layout.add('east', eastPane);
layout.endUpdate();


Edit2: Ext.ContentPanel creation works fine. Problem only occurs once I add the ContentPanel into the layout.

Did I miss something during my layout creation, or is it a bug in Ext or IE?

[Animal]

THis ia a longstanding issue.

Layouts actually move elements of the document into the various, created layout containers.

So your form will not contain what it originally contained.

There is a very old and long (but, I think still active) thread about this. I think it's so active that it's on the first Help page!

[o.robardet]

Sorry, I did not see this thread (and I still not).

Here is the solution I'm using:
I create a form on each div panel.
On submition, I run a serializeForm() on each of the forms, and then concat the resulting URL. Works fine.

Hope this will help if someone has the same problem and can see my thread.

Thanks for the help Animal :)

[Animal]

That's a reasonable siolution, although it means that your code has to handle the Ajax mechanics which would ordinarily be handled by an instance of Ext.form.Action.

I think there's a case for Ext to handle this better. There should be a tab-spanning Ext.form.Action.submitMultiple implementation which collects multiple form values, submits them, and handles parsing the response, and running callbacks...

Here's that thread: http://extjs.com/forum/showthread.php?t=4904