2

I have a page using a bunch of tables that are generated by a .NET repeater on page_load. These tables can have one of two classes: fileExists or fileDoesNotExist. On document.ready, I have the following:

$document.ready(function () {
    $('.fileDoesNotExist').each(function () {
        $(this).html("<h3>FILE #" + $(this).attr('id').replace('T', '') + ":</h3><p><a href=\"/cp/media-upload.aspx?seq=" + $(this).attr('id').replace('T', '') + "\">click here to upload an MP3 or video</a></p>");
        $(this).css('border', 'none');
    });
});

Which should affect this bit of HTML (there are more elements involved, but this is the basic gist):

<table class="fileDoesNotExist" style="width: 100%;margin-top: 1em;" id="T1">
        <tr>
            <th colspan="3">FILE 1</th>
        </tr>
        <tr>
        <td>Media Title:</td>
            <td colspan="2">
                <input name="txtTitle" type="text" maxlength="255" size="50" id="txtTitle" />
            </td>
        </tr>
</table>

This code fires fine in Chrome, Firefox, IE8 and IE9. When trying to view the page in IE7, it does all of nothing. I can replicate it in IE9 using IE7 standards for the document mode, and when trying to run the script directly in the console, it does all of nothing and returns no helpful error message.

The .each is definitely properly firing (I replaced the $(this).html with alert($(this).attr('id')); and that spit out the IDs of the tables with the fileDoesNotExist class) but it seems that the html/css replacements just aren't taking.

Is there something funky with IE7 (besides, you know, it being IE7) that I'm missing here? I looked through the suggested questions listed w/ my topic, but nothing seemed to touch upon .html or .css not firing at all.

antinescience
  • 2,339
  • 23
  • 31
  • Please post a snippet of your HTML. – Patrick McElhaney Mar 21 '12 at 13:28
  • Done. It's not the full table but it's the basic gist. I've double and triple checked tags to make sure everything adheres to normal DOM standards, so I don't think there's an issue there, but I could be way off. – antinescience Mar 21 '12 at 13:32
  • 3
    Here's a shot in the dark: maybe IE7 doesn't like it when IDs start with numbers. Maybe if you change it to start with a letter IE would be happy? – Jeff Mar 21 '12 at 13:35
  • @Jeff nice one, after your comment found this on SO http://stackoverflow.com/questions/5672903/can-i-have-a-div-with-id-as-number – Dampsquid Mar 21 '12 at 13:41
  • @Dampsquid Nice! I did a cursory search for `ie7 numeric id` but didnt find anything. I'm glad you were more successful than I was. I guess I should make that an answer instead of a comment to collect 15 rep?? :) – Jeff Mar 21 '12 at 13:50
  • @jeff holy cow, solid catch, I would have never thought of that. Throwing it onto our test environment to see if it fixes, but that seems pretty likely. – antinescience Mar 21 '12 at 13:53
  • So it turns out after using alert($(this).html()); through the developer console, the HTML is getting replaced (and the debugger, which I expected to be Chrome-esque, does not actually show the changed HTML, just the original source. Cute.), but for some reason the newly created source just doesn't appear on the page. Banging my head against a wall a bit for making the assumption IE's dev tools operated in a certain manner. Still can't figure out why the revised HTML doesn't appear. – antinescience Mar 21 '12 at 14:30

2 Answers2

3

Per our discussion in the comments, you should not start an ID with a number.

Jeff
  • 13,943
  • 11
  • 55
  • 103
  • Unfortunately, that doesn't seem to solve the issue. The IDs generated by the code behind are now "T#" (where # is the sequence integer of the file it's looking for), and yet it's still not accepting the jQuery. I'm going to keep that fix in place because I agree that having an ID start with a alpha char makes sense, but the actual jQuery issue still persists. =/ – antinescience Mar 21 '12 at 14:03
2

It appears that innerHTML cannot be safely used in IE7 when being applied to Table or TBody elements. here are a couple of references.

InnerHTML in IE7 problems

jQuery .html() not displaying any data in ie7, but ie8 works

hope that helps, both give workarrounds

Edit

Since your code replaces the contents of the Table element with plain html (no tr/td tags) why not put your tables in a containing div and apply the fileExists / fileDoesNotExist classes to that div instead.

JSFiddle with outer div

Community
  • 1
  • 1
Dampsquid
  • 2,456
  • 15
  • 14