This javascript works in every browser EXCEPT for internet explorer!

Question

The webpage is here: http://develop.macmee.com/testdev/

I'm talking about when you click the ? on the left, it is supposed to open up a box with more content in it. It does that in every browser except IE!

function question()
{
    $('.rulesMiddle').load('faq.php?faq=rules_main',function(){//load page into .rulesMiddle

        var rulesa = document.getElementById('rulesMiddle').innerHTML;
        var rules = rulesa.split('<div class="blockbody">');//split to chop off the top above rules

        var rulesT = rules[1].split('<form class="block');//split to chop off below rules
        rulesT[0] = rulesT[0].replace('class=','vbclass');//get rid of those nasty vbulletin defined classes
        document.getElementById('rulesMiddle').innerHTML = rulesT[0];//readd the content back into the DIV
        $('.rulesMain').slideToggle();//display the DIV
        $('.rulesMain').center();//center DIV
        $('.rulesMain').css('top','20px');//align with top
    });
}

Answer 1

IE converts innerHTML contents into upper case, so you probably are not able to split the string this way, as string operations are case sensitive. Check what the contents really looks like by running

alert(rulesa);

Answer 2

My IE debugger throws an error on your script when I click that button. On this line:

var rulesT = rules[1].split('<form class="block');//split to chop off below rules

IE stops processing the Javascript and says '1' is null or not an object

Answer 3

Andris is right. And that's not all. It'll also throw away the quotes in attributes.

It is completely unreliable to make any assumptions about the format of the string you get from innerHTML; the browser may output it in a variety of forms — some of which, in IE's case, are not even valid HTML. The chances of you getting back the same string that was originally parsed are very low.

In general: HTML-string-hacking is a shonky waste of time. Modify HTML elements using their node objects instead. You seem to be using jQuery, so you've got loads of utility functions to help you.

In any case you should not be loading the whole HTML page into #rulesMiddle. It includes a load of scripts and stylesheets and other header nonsense that can't go in there. jQuery allows you to pick which part of the document to insert; you seem to just want the first .blockbody element, so pick that:

$('#rulesMiddle').load('faq.php?faq=rules_main .blockbody:first', function(){
    $('#rulesMiddle .blockrow').attr('class', '');
    $('.rulesMain').slideToggle();
    $('.rulesMain').css('top', '20px');
});

Answer 4

Don't know if you solve it, but it work's on my Ugly IE ... (its an v8)

Btw: It's me, or does pop-up widows wen open are really, really, really slowing down that platform ?