Problem with AJAX calls in IE through accordion tabs

[samikrc]

Hello,
I have an accordion (using the Rico framework at www.openrico.or g) and each tab of the accordion is basically some sort of wizard (having a description and a 'Start' button in each tab). When the Start button is pressed, I get the contents of only that tab updated. I am using the innerHTML property of the div placeholder to update the contents, and the HTML is provided from a perl script on the server side. The page layout looks something like this:

table
   row for holding the whole page HTML
   table
      row for holding the accordian
      table
         row for holding the specific content tab
            div(WizBody)
            end div
         end row
      end table
      end row
   end table
   end row
end table
 

The contents returned by the perl code is another HTML table which get inserted in the 'WizBody'.

This works perfectly as expected in FF (2.0). In IE (7.0) however, the first time I press any 'Start' button, the first table (which has a form inside it) shows up. Any subsequent pressing of 'Next' buttons do not work. Also, none of the 'Start' button in other tabs works either after the first display. Using MS Script debugger, I have noticed that the send method does get called for each of the AJAX request, and even the database activity in perl also takes place in the back-end. But the associated handler function in JS never gets called the second and subsequent times in IE.

Any ideas about what can be the problem?

Thanks.
-Samik

[acoder]

Can you give an example of a response returned by the Perl script?

IE has been known to have problems with tables that do not have tbodies (a tbody tag before the table rows begin and after they end).

[samikrc]

Thanks for the response.
Following is the code returned to the IE when the 'Start' button is pressed the first time. I actually did not have the tbody tags around the table elements, so I put them in after you mentioned it. But unfortunately that made no difference.
Note that, as I mentioned in my OP, when I press the 'Next' button in the form below (line 28), the perl routine in the backend does get called, it executes the routine and generates similar HTML code. Only, the JS stateChangeHand ler method for the XMLHTTP object, which should handle things when readyState changes to 4 and status changes to 200 etc. never gets fired. So, the backend processing looks good, but somehow the XML below gets lost and does not reach the browser.
Regards.

Content-type: text/xml
 
 
        <table width='95%' align='center'>
            <tbody>
            <tr><td>
            <form name='TeamEdit'>
            <center>[Click on the <img src="images/edit.gif" /> image to edit corresponding field]</center><br />
            <font size='-4'><br /></font>
            <table class='border' cellspacing='10' align='center'>
                <tbody>
                <tr><td>Team Name</td><td><input type='text' class='textread' name='TeamName' value="Team1" readonly='readonly' size='10' onChange="javascript:showSave('TeamEdit');" /><img src="images/edit.gif" alt='Edit' onClick="javascript:letEdit('TeamEdit','TeamName');" /></td></tr>
                <tr><td>Team Login</td><td><input type='text' class='textread' name='TeamLogin' value="Team1" readOnly='readonly' size='10' /></td></tr>
                <tr><td>Password</td><td><input type='text' class='textread' name='Pass' value="test1" readOnly='readonly' size='10' onChange="javascript:showSave('TeamEdit');" /><img src="images/edit.gif" alt='Edit' onClick="javascript:letEdit('TeamEdit','Pass');" /></td></tr>
                <tr><td>Level Name</td><td><input type='text' class='textread' name='LevelName' value="Ipsin" readOnly='readonly' size='10' /></td></tr>
                <tr><td colspan='2'>Comment: <br />
 
                <textarea class='textinput' name='Comment' cols='40' rows='5' wrap='virtual'></textarea>
                </td></tr>
                </tbody>
            </table>
            </form>
            <form>
            <table width='30%' border='0' align='right' cellspacing='30'>
                <tbody>
                <tr>
 
                    <td><input type='button' class='btn' value='Next >' onClick="javascript:display('CredBody',new Array('Module','Cred','TeamLogin','Team2'));" /></td>        
                    <td><input type='button' class='btn' value='Summary' onClick="javascript:display('CredBody',new Array('Module','Cred','TeamLogin','Summary'));" /></td>
                </tr>
                </tbody>
            </table>
            </form>
            </td></tr>
            </tbody>
        </table>
 

[samikrc]

In a last-ditch effort, I created a highly scaled down version of my page which demonstrates the problem. Can anyone have a look and see if something strikes as un-natural or problematic? I tested it, and it works in FF but not in IE7.
URL: http://samik.freeshell.org/test/ajaxtest.html

The backend perl is available at: http://samik.freeshell.org/test/ajaxTest.txt
Regards.