javascript - InnerHTML issue in IE8 and below

Question

I am editing some code from a previous developer for a timetable filtering system. The way I would tackle this myself is using jQuery so I am having a few issues debugging this problem. There seems to be an issue with the Javascript in IE.

Here is the code where the issue is arising:

The Javascript:

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("showtimetable").innerHTML=xmlhttp.responseText;
        jQuery('div #moreInfo a').each(function()
{
    var $link = jQuery(this);
    var $dialog = jQuery('<div></div>')
    .load($link.attr('href') + ' #content')
    .dialog
    ({
        autoOpen: false,
        title: $link.attr('title'),
        width: 600
    });

$link.click(function()
{
    $dialog.dialog('open');
    return false;
});

And the markup:

<div id="showtimetable">
<table class="tidytable">
    <thead>
        <tr>
            <th width="20%">
                Venue
            </th>
            <th width="18%">
                Session
            </th>
            <th width="18%">
                Age
            </th>
            <th width="15%">
                <?php echo JText::_('COM_TIMETABLE_HEADING_GROUP'); ?>
            </th>
            <th width="10%">
                <?php echo JText::_('COM_TIMETABLE_HEADING_WEEKDAY'); ?>
            </th>
            <?php /*<th width="13%">
                Activity
            </th>*/ ?>
            <th width="14%">
                Time
            </th>
            <th width="5%">
                Info
            </th>

      </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="13">
                <?php //echo $this->pagination->getListFooter(); ?>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <?php foreach($this->items as $i => $item): ?>
            <tr class="row<?php echo $i % 2; ?>">
                <td>                       
                    <?php if($item->centreDescription!=''){echo '<a href="'.$item->centreDescription.'" >'.$item->centre.'</a>';}
                    else {echo $item->centre;}?>
                </td>                    
                <td>
                    <?php echo $item->class;?>
                </td>
                <td>
                     <?php echo $item->ageRange;?>
                </td>
                <td>
                    <?php echo $item->gn;?>
                </td>
                <td>
                    <?php TimeTablesHelper::getWeekday($item->weekday);?>
                </td>
                <?php /*<td>
                    <?php echo $item->activity; ?>
                </td>*/?>
                <td>
                    <?php echo substr($item->startTime,0,5); ?> - <?php echo substr($item->endTime,0,5); ?>
                </td>
              <td width="5%">
                <?php if($item->bookingInfo!=''){?>
                <div id="moreInfo">
                  <a href="moreinfo.php?id=<?php echo $item->id;?>" title="More Details...">+</a>
                </div>      
                <?php }?>     
              </td>                       
            </tr>              
        <?php endforeach; ?>
    </tbody>
</table>

Here is what is in the xml response:

<form action="/component/timetable/" method="post" name="adminForm">
<table class="tidytable">
    <thead>
        <tr>
            <th width="20%">
                Venue
            </th>
            <th width="18%">
                Session
            </th>
            <th width="18%">
                Age
            </th>
            <th width="15%">
                Group           </th>
            <th width="10%">
                Weekday         </th>
                        <th width="14%">
                Time
            </th>
            <th width="5%">
                Info
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="13">
            </td>
        </tr>
    </tfoot>
        <tbody>
            <tr class="row0">
                    <td>                       
                        Heywood Civic Centre                     </td>                    
                    <td>
                        50+ Bowls                    </td>
                    <td>
                         Aged 50 plus                    </td>
                    <td>
                        50 Plus                    </td>
                    <td>
                        Thursday                    </td>
                                        <td>
                        13:00 - 16:00                    </td>
                    <td width="5%">
                                        <div id="moreInfo">
                        <a href="/moreinfo.php?id=303" title="More Details...">+</a>
                    </div>      

                    </td>                       
                </tr>              
        </tbody>
    </table>
    <input type="hidden" name="task" value="" />
</form>

This works fine in Firefox and IE9 but in IE8 and below I am recieving a SCRIPT601: unknown runtime error fitness-classes, line 564 character 7 which refers to the line in the javascript with the innerHTML function.

I am unsure as to why this issue may be arising but it is preventing any of the Javascipt from working.

Does anybody have any idea why this would be occurring?

Many thanks in advance!

Answer 1

This error occurs when the you don't follow the W3C tag recommendations. IE is very picky about this and Firefox is not. You can read more here: http://blog.rakeshpai.me/2007/02/ies-unknown-runtime-error-when-using.html

Here's a similar question that might help you: Fixing "unknown runtime error" in IE8

Here's another link on the same thing, and specifically the "form within a form" issue: http://jadendreamer.wordpress.com/2009/06/02/internet-explorer-fix-unknown-runtime-error-using-innerhtml-ajax/