Broken DOM in IE and FF after Ajax call

Question

Hi, i get a strange behaviour of IE and FF while perfoming an ajax callM; Chrome works as expected for me ;)

In Grails i use the <g:formRemote/> Tag which results in the following code :

<form onsubmit="jQuery.ajax({type:'POST',
                             data:jQuery(this).serialize(),
                             url:'/url/morUrl',
                             success:function(data,textStatus){},
                             error:function(XMLHttpRequest,textStatus,errorThrown){}
                             complete:function(XMLHttpRequest,textStatus){performAction(XMLHttpRequest)}
                            });return false" 
      method="POST" 
      action="/url/morUrl" 
      name="tmpForm" 
      asynchronous="false" 
      id="tmpForm">`

In ALL tested Browsers the ajac call is done well and reached the complete:function(XMLHttpRequest,textStatus){performAction(XMLHttpRequest)} callback which performs well also. After that only FF and IE doing something weird and skipping the whole DOM Modell with just an simple "false" left as content.

I figured out, that the return false appended to the Ajax Call <form onsubmit="jQuery.ajax({ ... ... });**return false**"is responsible for this behaviour.

The return false appears in all of my ajax calls but only here it leads to this freekin result.. The ajax call returns some JSON with some new HTML inside which is used to replace a div layer inside the performAction(XMLHttpRequest) callback.

Any ideas why IE and FF are doing this strange thing?

Has anyone a comparable problem? and/or a working solution?

Regards,

Alex

Answer 1

It turns out that the link which submitting the form was actually using the href=javascript:tmpForm.onsubmit(); notation.

IE and FF took the string "javascript:tmpForm.onsubmit();" as new document URl and validated it (posting the result as new content) while Chrome just executed the JS....

seems to be my failure ;)