Ajax Update of g:select in IE7 issue

Question

I have the following problem which, I think, is browser-related. I have a company profile and I want to be able to add some headquarters' addresses to the company via ajax. So, I do the following:

I have a combobox that holds the addresses:

<tr class="prop">
    <td valign="top" class="name">
        <label for="hasHeadquarters"><g:message code="company.headquarters.label" default="Company Headquarters" /></label>                                
    </td>
    <td valign="top" class="name">
        <g:select id="hasHeadquarters" name="hasHeadquarters" optionKey="id" from="${de.cirquent.basicdata.Headquarter.list()}" multiple="multiple"></g:select>
    </td>                                
</tr>

and a form to fill out new addresses:

<g:formRemote name="addHeadquarter" url="[controller:'company', action:'ajaxAddHeadquarter']" update="hasHeadquarters" onComplete="javascript:Form.reset('addHeadquarter');">

The whole submits to a controller:

def ajaxAddHeadquarter = {
    def p = params

    def hqInstance = new Headquarter(params.headquarter)
    if(hqInstance.save(flush:true)){
        // some messages
        }
    render(template:"/shared/updateHQList", params:params)
    }

which updates the combobox with the template:

<g:select id="hasHeadquarters" 
    name="hasHeadquarters" 
    optionKey="id" 
    from="${de.cirquent.basicdata.Headquarter.list()}" 
    multiple="multiple"></g:select>

As you can see, simple scenario which works on Chrome, Firefox (both 4.0 and 5.0), but it doesn't work in IE7 (haven't tried IE8 yet). By "doesn't work" I mean: The new headquarter/address is saved successfully to the db and the list of headquarters is being returned as well including the new one. What happens is that the comobox is updated with an empty combobox (no values at all, not even the old ones). After Ctrl+R on the whole page, I can see that the new hq is added to the list.

The version of grails I'm using is 1.3.7. and prototype.js version is 1.6.1. Is this issue fixable for IE7 and if so I would like to know how. It's pretty nerve-wracking, because no error is returned - apparently prototype.js partly suppreses exceptions so I'm not able to see what happens.

Thanks for the help!

I also have a remoteFunction in an onmouseover event. This, however, doesn't update a form element, but a div. Works perfectly in IE and Firefox/Chrome. Perhaps, it has something to do with updating form elements. I tried to use remoteLink instead of submit button, but that didn't updated the combo either. — al., Aug 18 '11 at 10:07

user852518 · Accepted Answer · 2011-08-17T19:29:15.127

1

Whenever I used formRemote, I updated the content of an element but not the element itself. You could try to give an id to the table cell

   <td id="updateMe" valign="top" class="name">
        <g:select id="hasHeadquarters" name="hasHeadquarters" optionKey="id"  from...

and then update this cell with your select

<g:formRemote ... update="updateMe" ...>

Christian

edited Aug 17 '11 at 19:29

answered Aug 17 '11 at 19:07

user852518

501
1
5
6

Unfortunately, same thing. All other browsers are OK, and IE 7 updates with an empty table cell. :-/ – al. Aug 18 '11 at 08:12
Yes maybe [this helps](http://stackoverflow.com/questions/5997857/grails-best-way-to-send-cache-headers-with-every-ajax-call) - Sorry, Comment at the wrong place. Should be a comment about the cache. – user852518 Aug 18 '11 at 09:31

score 0 · Answer 2 · answered Aug 22 '11 at 13:49

0

At last!!! Putting the form in a div and updating the div instead of the form, does the trick for IE7. Also, tested it without the ajax filter and it still works.

answered Aug 22 '11 at 13:49

al.

484
11
30

Ajax Update of g:select in IE7 issue

2 Answers2