Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stupid innerHTML error

    Before we begin, let me state into the record that I know little Javascript and stole the code I'm using out of whole cloth from this site:

    http://www.codeproject.com/aspnet/Go...Dictionary.asp

    The code, abstracted below, retrieves the table contents from an ASP.Net page. I have included the contents of the table element that has its innerHTML method set as an example of what the Asynchronous page returns. So if you replace the aspx link to HTML page containing said table rows, you'll have a fair mockup of the system.

    It's supposed to clone old Google Suggest and it works fine in Firefox, but no amount of tweaking, threatening nor tears can entice it to work in IE.

    Code:
    <html>
        <head>
            <script>
    var req;
    
    function Initialize()
    {
        try
        {
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(oc)
            {
                req=null;
            }
        }
    
        if(!req&&typeof XMLHttpRequest!="undefined")
        {
            req=new XMLHttpRequest();
        }
    
    }
    
    function SendQuery(key)
    {
        Initialize();
        var url="http://localhost/googletest/getClinicianNames.aspx?inputName="+key;
    
        if(req!=null)
        {
            req.onreadystatechange = Process;
            req.open("GET", url, true);
            req.send(null);
    
        }
    
    }
    
    function Process()
    {
    	var eId = "ClinicianResults";
    
    
        if (req.readyState == 4)
            {
            // only if "OK"
                if (req.status == 200)
                {
                    if(req.responseText=="")
                        HideDiv(eId);
                    else
                    {
                    	var p = document.getElementById(eId);
                        ShowDiv("ClinicianResults");
                        p.innerHTML = req.responseText;  //DIES HERE.  WHY DO YOU HATE ME CODE?!?!?
                    }
                }
                else
                {
                    document.getElementById(eId).innerHTML=
                        "There was a problem retrieving data:<br>"
                        + req.statusText;
                }
            }
    }
    
    function ShowDiv(divid)
    {
       if (document.layers) document.layers[divid].visibility="show";
       else document.getElementById(divid).style.visibility="visible";
    }
    
    function HideDiv(divid)
    {
       if (document.layers) document.layers[divid].visibility="hide";
       else document.getElementById(divid).style.visibility="hidden";
    }
    
    function BodyLoad()
    {
        HideDiv("ClinicianResults");
        document.form1.keyword.focus();
    
    }
    </script>
        </head>
        <body onload="BodyLoad();">
            <form name="form1">
            <input name="keyword" onKeyUp="SendQuery(this.value)"
              style="WIDTH:500px" autocomplete="off">
                <table align="left" class="box" id="ClinicianResults"
                  style="WIDTH:500px;BACKGROUND-COLOR:#ccccff">
                  <tr><td>DHABUWALA, RAJIV, M.,</td></tr>
                  <tr><td>Dhadha C/O Heather Stark,</td></tr>
                  <tr><td>Dhaliwal, Hardeep</td></tr>
                  <tr><td>Dhala, Anwer</td></tr>
                  <tr><td>Dhaliwal, Kulwant</td></tr>
                  <tr><td>Dhaliwal, Amrit</td></tr>
                  <tr><td>Dhaliwal, Narinder</td></tr>
                  <tr><td>Dhaduk, Shailesh</td></tr>
                  <tr><td>DHADUVAI, ASHOK,</td></tr>
                  <tr><td>Dhaliwal, Gunwant</td></tr>
    
                  </table>
            </form>
    
        </body>
    </html>
    Any help, solutions, taunts regarding AJAX standards that contain any information, RTFM suggestions (provided the location of an actual manual is provided), astute criticism of the literary merits of this post, or commiseration will be greatly appreciated.

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It doesn't work in IE because IE, when dealing with a TABLE element, treats .innerHTML as a read-only property.

    http://msdn.microsoft.com/workshop/a.../innerhtml.asp

    From this site:
    The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, that makes sense, but the code ORIGINALLY utilized a DIV tag, and I got an identical error on that.

    Guess that has the same issue.

    Google Suggest uses an eval statement to execute a function call which has the desired data values in a constructed array parameter, and then feeds it into div tags using the what appear to be some custom functions.

    In principle I can use the same workaround with insertRow and insertCell statements...but that assumes I can get eval to work...

    Thanks though.

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I solved my initial problem vis-a-vis shoving HTML into the table element like stuffing into a Christmas Turkey rather than using the handy dandy insertRow and insertCell functions.

    This success has, in a Zenoesque fashion, given rise to two still more bizarre problems, which I can only hope are only insoluable in as much as my own idiocy is a contributing factor.

    1st, the thing has stopped working in Firefox. No errors, no failures, I've used alert boxes to step through the code and all insertRow statements are being run without reporting any errors. (Or maybe I'm not looking for JS errors in FF in the right place...) The table simply doesn't appear.

    Works fine in IE though.

    2nd, dynamically changing the classname of the table row is having far less of an effect then expected when being used on mouseover to highlight the rows then the phpRiot example would lead one to believe.

    In fact, neither the color change nor setting the cursor to a pointer seem to work, although checking the classname value at runtime after it gets set indicates that the class change is being made.

    Here's the code:

    The HTML page:

    Code:
    <html>
        <head>
    		<link rel="stylesheet" href="inc\search.css" type="text/css">
    		<script>
    var req;
    
    function Initialize()
    {
        try
        {
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(oc)
            {
                req=null;
            }
        }
    
        if(!req&&typeof XMLHttpRequest!="undefined")
        {
            req=new XMLHttpRequest();
        }
    
    }
    
    
    function LoadInClinicianData(tableObject, idArray, nameArray, addressArray, zipArray) {
    
       var newRow;
       var newCell;
    
       //Clear the results before loading them.
       for (i=tableObject.rows.length - 1; i > -1 ; i--) {
       		tableObject.deleteRow(i);
       }
    
       for (i=0; i < nameArray.length ; i++) {
        		newRow = tableObject.insertRow(0);
        		newRow.id = idArray[i];
        		newRow.onclick = function() { alert(this.id); };
        		newRow.onmouseover = function() { mouseover(this.id); };
        		newRow.onmouseout = function() { mouseout(this.id); };
        		newCell = newRow.insertCell(0);
       			newCell.innerText = zipArray[i];
        		newCell = newRow.insertCell(0);
       			newCell.innerText = addressArray[i];
        		newCell = newRow.insertCell(0);
       			newCell.innerText = nameArray[i];
       }
    
       if(nameArray.length>0)
       	{ShowDiv("ClinicianResults");}
    }
    
    function SendQuery(key)
    {
        Initialize();
        var url="GetClinicianRecordsViaAJAX.asp?inputName="+key;
    
        if(req!=null)
        {
            req.onreadystatechange = Process;
            req.open("GET", url, true);
            req.send(null);
    
        }
    
    }
    
    function Process()
    {
    	var eId = "ClinicianResults";
    
    
        if (req.readyState == 4)
            {
            // only if "OK"
                if (req.status == 200)
                {
                    if(req.responseText=="")
                        HideDiv(eId);
                    else
                    {
                        ShowDiv(eId);
                        eval(req.responseText);
                    }
                }
                else
                {
                    document.getElementById(eId).innerText=
                        "There was a problem retrieving data:<br>"
                        + req.statusText;
                }
            }
    }
    
    function ShowDiv(divid)
    {
       if (document.layers) document.layers[divid].visibility="show";
       else document.getElementById(divid).style.visibility="visible";
       alert("hg");
    }
    
    function HideDiv(divid)
    {
       if (document.layers) document.layers[divid].visibility="hide";
       else document.getElementById(divid).style.visibility="hidden";
    }
    
    function BodyLoad()
    {
        HideDiv("ClinicianResults");
        document.form1.keyword.focus();
    
    }
    function mouseover(id)
    {
        element = document.getElementById(id);
        element.classname = 'trSelected';
    }
    
    function mouseout(id)
    {
        element = document.getElementById(id);
        element.classname = null;
    
    }
    
    function mouseclick(id, qId, idx)
    {
        element = document.getElementById(id);
        qElement = document.getElementById(qId);
    
        qElement.value = element.results[idx];
        qElement.form.submit();
    }
    
    function handleup(element, qElement)
    {
        if (element.numResults > 0 && ishidden(element)) {
            show(element);
            return;
        }
    
        if (element.selectedIndex == 0)
            return;
        else if (element.selectedIndex < 0)
            element.selectedIndex = element.numResults - 1;
        else
            element.selectedIndex--;
        highlightsel(element, qElement);
    }
    
    function handledown(element, qElement)
    {
        if (element.numResults > 0 && ishidden(element)) {
            show(element);
            return;
        }
    
        if (element.selectedIndex == element.numResults - 1)
            return;
        else if (element.selectedIndex < 0)
            element.selectedIndex = 0;
        else
            element.selectedIndex++;
        highlightsel(element, qElement);
    }
    
    </script>
        </head>
        <body onload="BodyLoad();">
            <form name="form1">
            <input name="keyword" onKeyUp="SendQuery(this.value)"
              style="vertical-align:middle;width:500px;font-family:Arial,sans-serif;font-size:13px;padding-left:4px"
              autocomplete="off">
                <table align="left" class="box" id="ClinicianResults" style="vertical-align:middle;width:500px">
    
                  </table>
            </form>
    
        </body>
    </html>
    The CSS sheet:

    Code:
    table#ClinicianResults {background-color : #fff; color : #000;}
    table#ClinicianResults tr {width : 100%; float : left; font-family : Arial, sans-serif;
        font-size : 13px; padding : 1px 0 0 0; background-color : #fff; color : #000;}
    table#ClinicianResults tr.trSelected { background-color : #36c; color : #fff; cursor:pointer; }

    And a sample output for the Asynchronous ASP page (If there's something wrong there, its in this output.):

    LoadInClinicianData(document.getElementById("ClinicianResults"), new Array("511749", "116045", "324019", "361246", "528318", "272967"), new Array("Hanggi, Matthew", "Hangasky, Suzanne", "Hang, Sandra", "hang, richard", "Hang, Nguyen", "Hang, Ae Lee"), new Array("1928 Alcoa Hwy", "", "960 Clague Rd", "530 First Ave", "301 S Seventh Ave.", "1660 E Herndon"), new Array("37920", "", "44145", "10016", "19611", "93720"))

    That should be all you need to mock up something.

    There are still a lot of tasks that need doing here, so I'm probably going to have to assume I can't have mouse rollover highlighting on an option list and start working on getting the selector to populate the form it needs to.

  • #5
    New Coder bigtiger's Avatar
    Join Date
    Oct 2005
    Posts
    98
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi, I have changed your code a bit to test why it does't work.
    I have found that highlight was not work because you have mis-type the property 'className' as 'classname'.

    P.S I tested it on local file system.

    Code:
    <html>
        <head>
    		<link rel="stylesheet" href="search.css" type="text/css">
    		<script>
    var req;
    
    function Initialize()
    {
        try
        {
            req=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                req=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(oc)
            {
                req=null;
            }
        }
    
        if(!req&&typeof XMLHttpRequest!="undefined")
        {
            req=new XMLHttpRequest();
        }
    
    }
    
    
    function LoadInClinicianData(tableObject, idArray, nameArray, addressArray, zipArray) {
    
       var newRow;
       var newCell;
    
       //Clear the results before loading them.
       for (i=tableObject.rows.length - 1; i > -1 ; i--) {
       		tableObject.deleteRow(i);
       }
    
       for (i=0; i < nameArray.length ; i++) {
        		newRow = tableObject.insertRow(0);
        		newRow.id = idArray[i];
        		newRow.onclick = function() { alert(this.id); };
        		newRow.onmouseover = function() { mouseover(this.id); };
        		newRow.onmouseout = function() { mouseout(this.id); };
        		newCell = newRow.insertCell(0);
       			newCell.innerHTML = zipArray[i];
        		newCell = newRow.insertCell(0);
       			newCell.innerHTML = addressArray[i];
        		newCell = newRow.insertCell(0);
       			newCell.innerHTML = nameArray[i];
       }
    
       if(nameArray.length>0)
       	{ShowDiv("ClinicianResults");}
    }
    
    function SendQuery(key)
    {
        Initialize();
        var url="GetClinicianRecordsViaAJAX.asp?inputName="+key;
    
        if(req!=null)
        {
            req.onreadystatechange = Process;
            req.open("GET", url, true);
            req.send(null);
    
        }
    
    }
    
    function Process()
    {
    	var eId = "ClinicianResults";
    
    
        if (req.readyState == 4)
            {
            // only if "OK"
                if (req.status == 200)
                {
                    if(req.responseText=="")
                        HideDiv(eId);
                    else
                    {
                        ShowDiv(eId);
                        eval(req.responseText);
                    }
                }
                else
                {
                    document.getElementById(eId).innerText=
                        "There was a problem retrieving data:<br>"
                        + req.statusText;
                }
            }
    }
    
    function Process2()
    {
    	var eId = "ClinicianResults";
    	var code = "LoadInClinicianData(document.getElementById('ClinicianResults'), new Array('511749', '116045', '324019', '361246', '528318', '272967'), new Array('Hanggi, Matthew', 'Hangasky, Suzanne', 'Hang, Sandra', 'hang, richard', 'Hang, Nguyen', 'Hang, Ae Lee'), new Array('1928 Alcoa Hwy', '', '960 Clague Rd', '530 First Ave', '301 S Seventh Ave.', '1660 E Herndon'), new Array('37920', '', '44145', '10016', '19611', '93720'))";
            ShowDiv(eId);
    	eval(code); 
    }
    
    function ShowDiv(divid)
    {
       if (document.layers) document.layers[divid].visibility="show";
       else document.getElementById(divid).style.visibility="visible";
       alert("hg");
    }
    
    function HideDiv(divid)
    {
       if (document.layers) document.layers[divid].visibility="hide";
       else document.getElementById(divid).style.visibility="hidden";
    }
    
    function BodyLoad()
    {
        HideDiv("ClinicianResults");
        document.form1.keyword.focus();
    
    }
    function mouseover(id)
    {
        element = document.getElementById(id);
        element.className = 'trSelected';
    }
    
    function mouseout(id)
    {
        element = document.getElementById(id);
        element.className = null;
    
    }
    
    function mouseclick(id, qId, idx)
    {
        element = document.getElementById(id);
        qElement = document.getElementById(qId);
    
        qElement.value = element.results[idx];
        qElement.form.submit();
    }
    
    function handleup(element, qElement)
    {
        if (element.numResults > 0 && ishidden(element)) {
            show(element);
            return;
        }
    
        if (element.selectedIndex == 0)
            return;
        else if (element.selectedIndex < 0)
            element.selectedIndex = element.numResults - 1;
        else
            element.selectedIndex--;
        highlightsel(element, qElement);
    }
    
    function handledown(element, qElement)
    {
        if (element.numResults > 0 && ishidden(element)) {
            show(element);
            return;
        }
    
        if (element.selectedIndex == element.numResults - 1)
            return;
        else if (element.selectedIndex < 0)
            element.selectedIndex = 0;
        else
            element.selectedIndex++;
        highlightsel(element, qElement);
    }
    
    </script>
        </head>
        <body onload="BodyLoad();">
            <form name="form1">
            <input name="keyword" onKeyUp="SendQuery(this.value)"
              style="vertical-align:middle;width:500px;font-family:Arial,sans-serif;font-size:13px;padding-left:4px"
              autocomplete="off">
                <table align="left" class="box" id="ClinicianResults" style="vertical-align:middle;width:500px">
    
                  </table>
    	<input type="button" id="btn1" onclick="Process2()" value="Go!" />
            </form>
    
        </body>
    </html>
    Code:
    table#ClinicianResults {background-color : #fff; color : #000;}
    table#ClinicianResults tr {width : 100%; float : left; font-family : Arial, sans-serif;
        font-size : 13px; padding : 1px 0 0 0; background-color : #fff; color : #000;}
    table#ClinicianResults tr.trSelected { background-color : #36c; color : #fff; cursor:pointer; }
    input#btn1 { width: 150; height:25 }
    Attached Files Attached Files
    Last edited by bigtiger; 05-17-2006 at 07:09 AM.

  • #6
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A pox!!! A pox on the stringent case sensitivity of non-VB browsers! May the dust of a Thousand Camels fall upon my fascination with grammatically Incorrect Elizabethan Style mid-sentence Capitalization!

    Thank you for spotting my egregious error Mr. BigTiger, may your stripes be straight and your machinations un-Shere Khanesque. Thou art the prince of the code-cutters, tell me thou didst the same for the Firefox issue and thou art the non-Pareil.

    Clearly I need to quit my day job and head back to playwrighting.

  • #7
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually, nevermind. I found that switching innerText back to innerHTML made all the browsers happy. Now if I can just get rid of those unsightly cell borders in IE.

    Thanks again!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •