IE6 DHTML fun

I had a wierd one this week.

We had a form which we were loading dynamically on a key press and the form had buttons of the form:

<a href="#" onclick="if ($('myform').onsubmit()){$('myform').submit();};"><span>go</span></a>

None of the buttons were functioning correctly, and were not producing error messages.

To make things even more interesting, the form was being created from a partial in a helper (Rails).

The code basically looked like this:

toggle = link_to_function "---HTML---", do |page|
page << "--some javascript--"
page.insert_html :top, 'main', :partial => 'friendships/new', :locals => {:friend => friend}
page << "--some javascript--"
end

The form was contained in the 'friendships/new' partial.

Needless to say, the raw html produced was very ugly and full of various amounts of escapes and quotes. I was pretty sure that this was the source of the problem. I was wrong.

It was pointed out by karma that the problem was really a permissions issue. The page.insert bit in the helper uses prototype.js to create the html and insert it into the page at the top of the div with id='main'. The problem is that the order it does this in is:

1. Instantiate the html.
2. Insert into postion.

As karma points out, that leaves all javascript operating at the security level of about:blank.

The solution was to add a funny little bit of javascript to the page:

  page << "var x = $('myformcontainer').innerHTML;$('myformcontainer').innerHTML = x;"

This had the effect of re-inserting the code in place on the page, rather than instantiating it first.