Friday, September 05, 2008

Dojo - x-browser problem with xhrPost().

I ran into a problem the other day with IE7 not behaving the same as FireFox with dojo.xhrPost(). Below is a simple example of the page I was working on that gives you a view into how I was using xhrPost(). This code works perfectly with FireFox but on IE7 not a single form parameter was making it to the server as part of the request.

<form id="myForm" name="myForm" dojotype="dijit.form.Form">
<label>UserName :</label>
<div id="userName" name="userName" dojotype="dijit.form.TextBox"/>

<div id="saveButton" dojotype="dijit.form.Button">Save
<script type="dojo/method" event="onClick">
dojo.xhrPost( {
handleAs: 'json-commented-filtered',
form: 'myForm',
url: 'saveUser.json',
load: function(data) {
// display a message to user here.
}
});
</script>
</div>
</form>

I hacked around a bit and finally found that xhrPost() doesn't seem to play well with the dijit.form.Form widget. I could replace the use of the widget with a standard <form> block without the dojoType and everything seemed to work. However I was using the Form widget in the first place because it has a nice getDescendants() method which i was using for form validation and testing if the form is in a dirty state.

So i decided to try a few more things and finally found that the issue was the use of the "form" attribute of the xhrPost(). For some reason IE7 wasn't properly picking up the form elements when using this attribute. I took a different tact and ended up replacing the "form" attribute with the "content" attribute. Here is what the xhrPost() looks like after the change.

dojo.xhrPost( {
handleAs: 'json-commented-filtered',
content: dojo.formToObject(dojo.byId("myForm")),
url: 'saveUser.json',
load: function(data) {
// display a message to user here.
}
});

0 Comments:

Post a Comment

<< Home