Monday, August 10, 2009

g:form, g:actionSubmit and Internet Explorer 8

While working on my latest grails powered web site things to do with kids I have noticed that one form performs ok in Firefox and Chrome but not in Internet Explorer. If this would be case with grails tutorials I wouldn't care too much because majority of visitors have Firefox or Chrome. But my statistics for things to do with kids are showing that there is more visitors using IE than other browsers.

The problem was following. E.g. on the home page of things to do with kids you enter the city name and then press enter on your keyboard. In Firefox and Chrome you get the list of places to visit but in IE8 nothing happened.

But if you used tab to move focus on the Show Me button then everything worked also in IE.

The initial code looked like this:

<g:form controller="home" method="GET">
<input name="locationName" class="span-10 last" />
<g:actionSubmit value="Show me" action="placesAroundLocation" />
</g:form>

After some investigation I noticed that closure called from IE was actually index in the HomeController. So this means that in IE8 when enter is pressed while focus is in the input box default action of the controller is called while in Firefox and Chrome action of the button was called.

So to fix the problem with the IE I have slightly change the code. I added form default action so now it looks like this:

<g:form controller="home" action="placesAroundLocation" method="GET">
<input name="locationName" class="span-10 last" />
<g:actionSubmit value="Show me" action="placesAroundLocation" />
</g:form>

I didn't check behavior in other versions of IE but if you have similar problem this may help you.

3 comments:

Oliver said...

Thanks for the tip. I also happens in IE6.

jos said...

Thanks for the help, now enter works in IE8.

Anonymous said...

Thanks buddy, very helpful!