xajax and IE: append table row

Append a table row should sound straight forward when using with a xajax function.

The HTML code for table and a button within a form:

<table>
  <th>
    <td>header1</td>
    <td>header2</td>
  </th>
  <tbody id="tbody_id">
  </tbody>
</table>
<form id="form_id">
// some input fields...
<input type="button" onClick="xajax_add_row(xajax.getFormValues('form_id'));" />
</form>

xajax function to append a row to table:

function add_row($data) {
  $obj = new xajaxResponse();
  $obj->append('tbody_id', 'innerHTML', 
    '<tr><td>' . $data['input1'] . '</td><td>' . $data['input2'] . '</td></tr>');
  return $obj;
}

It works perfectly in Firefox, but nothing is happening when you click the button in IE.

I wasted a lot of time trying to find out why. Finally found this forum post:

For whatever reason, the W3C deemed it “incorrect” to write to the innerHTML of a TABLE, TBODY or TR (among other tags)… the odd thing is that IE is one of the only browsers that currently FOLLOWS the standard…

Thankfully there’s a solution (based on the solution provided from the same post). Instead assigning table cells to the <tbody> tag, create <tr> and <td> tags and assign to innerHTML of <td>.

In the form, add a hidden field for next row id.

Now update the xajax function:

function add_row($data) {
  $obj = new xajaxResponse();
  $id = $data['next']; // hidden field with id="next"
 
  // add <tr>
  $obj->create('tbody_id', 'tr', 'row_' . $id);  
  // add <td>
  $obj->create('row_' . $id, 'td', 'td_row_' . $id . '_input1');
  $obj->create('row_' . $id, 'td', 'td_row_' . $id . '_input2');
     
  // assign values to <td>
  $obj->assign('td_row_' . $id . '_input1', 'innerHTML', $data['input1']);
  $obj->assign('td_row_' . $id . '_input2', 'innerHTML', $data['input2']); 
     
  // increment value for next row
  $obj->assign('next', 'value', $id + 1);
  return $obj;
}

Leave a Reply

Your email address will not be published. Required fields are marked *