Avatar of bman21
bman21 asked on

getElementById javascript with IE7

i have a javascript that displays a button next to a variable in website.  The website updates constantly and after awhile, my button disappears altogether or takes it a very long time to load.  i googled the heck out of this and found many references to a problem on how IE handles the getElementByID function that i currently am using.

The error that my google search explained to me was that the error occurs because IE7 doesn't handle the getElementByID function properly.  instead of searching the id field, IE7 also searches another field, and if either are the same or doesn't exist, the code breaks.

Attached is a portion of the code that i have the getElementById implemented.  Also, within the code i have the workaround that everyone seems to mention after the google search.  Right now it is commented out because it does not work (the buttons do not display).  

This is an urgent matter and any help is greatly appreciated.  attached is the snippet
for ( pai in idsAry )
            {
                sid = idsAry[pai];
//              button = "<input type=button style='border: 0px;' id='button" + sid + "' value='+' border='0' onclick=checkPriors('" + sid + "')>";
                button = "<img src='images/report-icon.gif' id='button" + sid + "' border='0' onclick=checkPriors('" + sid + "')>";
                /*if (/msie/i.test(navigator.userAgent)) //only overide IE
                {
                         //alert("IT WORKED");
                        document.nativeGetElementById = document.getElementByID;
                        document.getElementById = function(id)
                        {
                                var elem = document.nativeGetElementById(id);
                                if(elem)
                                {
                                        //make sure that it is a valid match on id
                                        if(elem.attributes['id'].value == id)
                                        {
                                                return elem;
                                                //alert("it worked");
                                        }
                                        else
                                        {
                                                //otherwise find the correct element
                                                for(var i=1;i<document.all[id].length;i++)
                                                {
                                                        if(document.all[id][i].id == id)
                                                        {
                                                                return document.all[id][i];
                                                        }
                                                }
                                        }
                                }
                                return null;
                        };
                }*/
                document.getElementById(sid).innerHTML = button;//debugger breaks here after the page refreshes

Open in new window

JavaPHPWeb Browsers

Avatar of undefined
Last Comment
bman21

8/22/2022 - Mon
Lukasz Chmielewski

as I see it, you are trying to numberate the buttons with button1, button2 etc., still, I can't imagine the whole page, would you send a complete or almost a complete page ? I'd say that the .innerHTML property is the issue here, because for what I know this is the problem with IE
ASKER CERTIFIED SOLUTION
ludofulop

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
bman21

ok, changed that, now i get a stack overflow error

here is all of the javascript that is involved with this button.




<script type="text/javascript">
 
var httpRequest;
var index;
var mapsign;
var studyIsReady = true;
var maxpriors = 0;
 
//bug workaround for document.getElementById and getAttributes (doesn't work in ie)
//overrides the IE getElementById with nativeGetElementById and then searches the document for the correct id
/*function nativeGetElementById(sid)
{
        if (/msie/i.test(navigator.userAgent)) //only overide IE
        {
                //alert("IT WORKED");
                document.nativeGetElementById = document.getElementByID;
                document.getElementById = function(id)
                {
                        var elem = document.nativeGetElementById(id);
                        if(elem)
                        {
                                //make sure that it is a valid match on sid
                                if(elem.attributes['id'].value == id)
                                {
                                        return elem;
                                        //alert("it worked");
                                }
                                else
                                {
                                        //otherwise find the correct element
                                        for(var i=1;i<document.all[id].length;i++)
                                        {
                                                if(document.all[id][i].id == id)
                                                {
                                                        return document.all[id][i];
                                                }
                                        }
                                }
                        }
                        //alert("it didn't work");
                }
        }
}
*/
function sendStudies(studiesStr) {
 
    maxpriors++
 
   if (maxpriors < 50) {
 
    if (typeof XMLHttpRequest != "undefined"){
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject){
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    httpRequest.onreadystatechange = receivePriors;
 
    httpRequest.open('GET', 'https://MYWEBSITE/add_prior_buttons.php?studies=' + studiesStr, true); //also debugger broke here
    httpRequest.send(null);
   }
}
 
function receivePriors() {
 
    if (httpRequest.readyState == 4){
       if (httpRequest.status == 200){
 
            var idsStr = httpRequest.responseText;
 
            // Split retrieved string into an array.
            var idsAry = new Array();
            idsAry = idsStr.split("-");
//          displayPriors(idsAry);
 
            // Then loop through the array to insert a button into the corresponding span id.
            var pai = 0;
            for ( pai in idsAry )
            {
                sid = idsAry[pai];
//              button = "<input type=button style='border: 0px;' id='button" + sid + "' value='+' border='0' onclick=checkPriors('" + sid + "')>";
                button = "<img src='images/report-icon.gif' id='button" + sid + "' border='0' onclick=checkPriors('" + sid + "')>";
                /*if (/msie/i.test(navigator.userAgent)) //only overide IE
                {
                         //alert("IT WORKED");
                        document.nativeGetElementById = document.getElementById;
                        document.getElementById = function(id)
                        {
                                var elem = document.nativeGetElementById(id);
                                if(elem)
                                {
                                        //make sure that it is a valid match on id
                                        if(elem.attributes['id'].value == id)
                                        {
                                                return elem;
                                                //alert("it worked");
                                        }
                                        else
                                        {
                                                //otherwise find the correct element
                                                for(var i=1;i<document.all[id].length;i++)
                                                {
                                                        if(document.all[id][i].id == id)
                                                        {
                                                                return document.all[id][i];
                                                        }
                                                }
                                        }
                                }
                                return null;
                        };
                }*/
                document.getElementById(sid).innerHTML = button;//debugger broke here
           }
        } else {
//                  alert('There was a 200 problem');
        }
    } else {
//                  alert('There was a 4 problem');
       return 0;
    }
 
}
 
/*************************************************************************
This function inserts a button (value='+') into the HTML of the
corresponding span id.
**************************************************************************/
function displayPriors(priorsArray) {
 
        var pai = 0;
        for ( pai in priorsArray )
        {
                button = "<input type=button id='button" + priorsArray[pai] + "' value='+' onclick=checkPriors('" + priorsArray[pai] + "')>";
                //if(/msie/i.test (native.userAgent))
                document.getElementById(priorsArray[pai]).innerHTML = button;
        }
}
 
function checkPriors(studyid){
    // set the row index
    index = studyid;
    row = document.getElementById("row" + studyid);
 
    // if the study is expanded, set button value to '-'
    if (row.style.display == "none"){
        row.style.display = "";
        document.getElementById('button' + studyid).value = "-";
 
    } else {
        // else set it to '+'
        row.style.display = "none";
        document.getElementById('button' + studyid).value = "+";
 
    }
 
    if (typeof XMLHttpRequest != "undefined"){
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject){
      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
//    httpRequest.overrideMimeType('text/xml'); 
 
    httpRequest.open('GET', 'https://MYWEBSITE/prior_reports.php?studyId=' + studyid, true);
    httpRequest.onreadystatechange = callback;
    httpRequest.send(null);
}
 
function callback(){
  if (httpRequest.readyState == 4){
    if (httpRequest.status == 200){
        document.getElementById("priors"+index).innerHTML = httpRequest.responseText;
    } else {
    //  alert('There was a 200 problem');
    }
  } else {
//     alert('There was a 4 problem');
  }
}

Open in new window

ASKER
bman21

ok, i think i solved the problem with the help of ludofulop.  i placed the workaround at the beginning of the javascript.  it removed the stack overflow problem.

i am going to leave this open for a couple of days to be sure that this solves my problem.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23