Sunday, February 05, 2006

Firefox and IE, and Rails Pain

I'm doing some Ajax in Rails and I found some more weirdness in the behavioral differences between Firefox and IE. I've abstracted a few snippets of code that should illustrate the issue...

I have a form that contains a table holding a cell with a select that fires some ajax on a change, and the input field that is the target of the ajax change in another cell. I know that I could do this differently, and clean the code up a bit too, but there's no reason this shouldn't work in my little chunk of web. For the sake of this example, I've got a Foo and a Bar. Both have a cost field. When editing a Foo, you can select a Bar by name it's cost is put into the Foo's cost in the edit.

in foo/_form.rhtml I have:

@bars = [["Choose Bar"]]+
Bar.find(:all).map {b [,]}
select(:foo, :bar_id, @bars, {},
{:onchange => "new Ajax.Updater('foo_cost',
<div id=foo_cost><%=
render :partial => 'cost' %></div>

in foo/fooController.rb I have:

def bar_changed
@foo =
@foo.cost = Bar.find(params[:id]).cost
render(:partial => 'cost')

and in views/foo/_cost.rhtml I have:

<%= text_field 'foo', 'cost',
'value' => @foo.cost.to_money %>

Ok now, I have to admit that I got this working over lunch at the day job using <gasp> IE 6. But when I brought it home to dig into in Firefox, instead of the Ajax updating the chunk of stuff in the <div id=foo_cost>, the input field itself was extended - because it too had an id of foo_cost. Firefox can apparently replace inside anything that has an id, where in this case (at least) IE just does a div replacement. This appeared as a field within a field (within a field, etc.) every time I selected a new Bar.

The quick fix, of course, is to rename the id of the div. No biggie. But it did catch me unawares, and made me scratch my head a little. In general, I prefer more choices than less, and Firefox gives me that little extra. But it also means I have to be careful I don't get id space overlaps. Your mileage may vary.

No comments: