[SGVLUG] Problem with IE 7

[Peter Fogg]

Hello everyone! I got the answer and is it simple!

When appending rows to a table via JavaScript, one must append them  
to the tbody element directly, not to the table element.

         <td width="600px" valign="top">
           <table width="100%" cellpadding="0" cellspacing="0"  
border="0">
             <tr><td valign="top" align="center"  
class="label_1">select sub-categories</td></tr>
             <tr><td>&nbsp;</td></tr>
             <tr>
               <td valign="top" align="center">
                 <table id="sub_categories" name="sub_categories"  
align="left" width="100%" cellpadding="0" cellspacing="0" border="1">

                   <tbody id="sub_categories_tbody">

                     <tr><td>sdffd</td></tr>

                   </tbody>

                 </table>
               </td>
             </tr>
           </table>
         </td>


         // Append the submit td element to the tr element.
         tr_element_submit.appendChild(td_element_submit);

         // Get the tbody element.
         tbody_element = document.getElementById 
('sub_categories_tbody');

         // Append the tr element to the tbody element.
         tbody_element.appendChild(tr_element_submit);

This JavaScript works in IE 7 and FF.

Thanks again for you tips.

Peter -

On May 30, 2008, at 6:37 PM, Jeff Keys wrote:

> I didn't see that fix it either. As I understand the bug that  
> Michael's link addresses, IE's getElementById finds the first  
> object with either id or name equql to the value. So adding  
> name="sub_categories" wouldn't be a solution, and since you have no  
> other name or id with that value, your code should find the right  
> element and work. I would say we are looking at a different bug.  
> [what?? IE has more than one?]
>
> Here's a link to MSDN's discussion: http://msdn.microsoft.com/en-us/ 
> library/ms536437(VS.85).aspx
>
> -jeff
>
> On Fri, May 30, 2008 at 2:51 PM, Peter Fogg  
> <peter.fogg at sbcglobal.net> wrote:
> I added name="sub_categories" attribute to the table declaration ->  
> unfortunately it didn't solve the problem. The article addressed a  
> conflict if one has a form with the sane "name" as another element.  
> The form, in this case, has no "name" attribute.
>
> Peter -
>
>
>
> On May 30, 2008, at 2:33 PM, Michael Proctor-Smith wrote:
>
> On Fri, May 30, 2008 at 2:17 PM, Peter Fogg  
> <peter.fogg at sbcglobal.net> wrote:
> Thank you one and all for your suggestions!! My apologies for not  
> including
> sufficient information.
> This is an excerpt from the html that displays the table:
>       .
>       .
>       .
>        <td width="600px" valign="top">
>          <table width="100%" cellpadding="0" cellspacing="0"  
> border="0">
>            <tr><td valign="top" align="center" class="label_1">select
> sub-categories</td></tr>
>            <tr><td>&nbsp;</td></tr>
>            <tr id="sub_categories_table">
>              <td valign="top" align="center">
>                <table id="sub_categories" align="left" width="100%"
> cellpadding="0" cellspacing="0" border="1">
>                 <tr><td>sdffd</td></tr>
>                </table>
>              </td>
>            </tr>
>          </table>
>        </td>
>       .
>       .
>       .
> Note that the border is on on the target table and that there is a  
> row with
> nonsense in it already in the table. This row is displayed on the  
> page in
> all browsers. The objective is to add another row containing an  
> html button
> via the following JavaScript excerpt:
>        .
>        .
>        .
>        var table_element = document.getElementById('sub_categories');
>
> OK, now with some code I can answer your question IE has broken id
> handling. Found with quick "ie getElementbyID" google search. Check
> out:
> http://remysharp.com/2007/02/10/ie-7-breaks-getelementbyid/
> basically it treats name as id sense you do not have a name tag for
> your table it breaks. I fixed it in my code by having both id="name"
> and name="name" in the places I want to address an element.
>
>        .
>        // Create a submit button td element.
>        var td_element_submit = document.createElement('td');
>        td_element_submit.setAttribute('colspan', 3);
>        td_element_submit.setAttribute('align', 'center');
>        // Create a sbumit button input element.
>        var submit_element = document.createElement('input');
>        submit_element.setAttribute('id', 'submit');
>        submit_element.setAttribute('type', 'submit');
>        submit_element.setAttribute('value', 'search');
>        // Append the submit button input element to the td element.
>        td_element_submit.appendChild(submit_element);
>        // Create the submit button tr element.
>        tr_element_submit = document.createElement('tr');
>        // Append the submit td element to the tr element.
>        tr_element_submit.appendChild(td_element_submit);
>        // Append the tr element to the table element.
>        table_element.appendChild(tr_element_submit);
>        .
>        .
>        .
> The second row created by this code appears in FF 2.0.0.14 on a Mac  
> and FF
> 2.0.0.14 on an XP machine but does not appear in IE 7.0.5730.11 on  
> the XP
> machine.
>
> So I am just going to point out that testing the same browser version
> on 3 different platform does not do much of anything.
>
> Obviously there is much more to the page and the JavaScript; I'm  
> trying to
> get this small test to work!
> Peter -
>
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.sgvlug.net/pipermail/sgvlug/attachments/20080530/a9ff50b5/attachment-0001.htm