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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE8 innerHTML rubbish

    Hi there,
    I'm a javascript noobie - struggling with some cross platform issues :-)
    The attached code works fine in Firefox / Safari etc but of course not in IE 8

    It should be a simple disclosure. The show/hide div works fine, it is just the text that does not change to show the new state.

    I know that it is an issue with the innerHTML - but I do NOT know how to fix it ...

    Please help... been bashing my head against this particular wall since yesterday.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <style type="text/css">
    body { border: 0px; }
    *{ font: 11px \Lucida Grande\, Verdana, sans-serif; }
    table { width:100% ; border: 0px ; border-spacing: 0px ; table-layout: fixed ; }
    td { border: 0px }
    .values { vertical-align:text-top }
    .labelGreen { font-weight:bold ; color: #008000 ; } 
    td.auto { width:auto; } 
    .empty { margin:auto }
    ul { list-style: none; margin: 0; padding: 0;} 
    a { color: #888; text-decoration: none; font-weight: bold; font-size: 10px; }
    </style>
    <script type="text/javascript">
    function toggle_visibility1(id)
    {
     var e = document.getElementById(id);
    if(e.style.display == 'none')
    {
     e.style.display = 'block';
    document.getElementById('triOpen1').innerHTML = "<a href='javascript:openTri()'>Close</a>";
    }
    else {
     e.style.display = 'none';
     document.getElementById('triOpen1').innerHTML = "<a href='javascript:cloTri()'>Open</a>";
     }
    }
    </script>
    <title>
    </title>
    </head>
    <body>
    <table>
    <tr><td class='auto' colspan ='4'>These entities, related to THIS Methodology, are already included in this Model Extract</td></tr>
    <tr><td class='labelGreen'><a href="#tri" onclick="toggle_visibility1('tri1');"><span id='triOpen1'>Open</span></a>&nbsp;ABBS 5 </td><td class='labelGreen'>Devices 15</td><td class='labelGreen'>Processes 2</td><td class='labelGreen'>Tests 13</td></tr>
    </table>
    <div id="tri1" style="display:none;">
    <table>
    <tr><td class='values'>Abbs List to go here</td><td class='values'>Dev List to go here</td><td class='values'>Process List to go here</td><td class='values'>Testing List</td></tr>
    </table>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 592 Times in 591 Posts
    The problem is your JS code.
    Use this:
    Code:
    <script type="text/javascript">
    function toggle_visibility1(id){
    	var e = document.getElementById(id);
    	if(e.style.display == 'none')
    	{
    		e.style.display = 'block';
    		document.getElementById('triOpen1').innerHTML = "Close";
    	}else {
    		e.style.display = 'none';
    		document.getElementById('triOpen1').innerHTML = "Open";
    	}
    }
    </script>
    P.S. Using an anchor to call JS is not the best way of doing things A button would be a lot better. It's hard to as a user to see that the word 'open' is clickable.
    Last edited by sunfighter; 01-29-2014 at 02:54 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,911
    Thanks
    56
    Thanked 544 Times in 541 Posts
    it seems to be unnecessarily complicated, but anyway. I assume you are defining openTri and cloTri elsewhere because they are nowhere to be seen. There are many improvements that could be made, but this at least works in my IE8...

    Code:
    <body>
    <table>
    <tr><td class='auto' colspan ='4'>These entities, related to THIS Methodology, are already included in this Model Extract</td></tr>
    <tr><td class='labelGreen'><a href="#tri" onclick="toggle_visibility1('tri1');"><span id='triOpen1'>Open</span></a>&nbsp;ABBS 5 </td><td class='labelGreen'>Devices 15</td><td class='labelGreen'>Processes 2</td><td class='labelGreen'>Tests 13</td></tr>
    </table>
    <div id="tri1" style="display:none;">
    <table>
    <tr><td class='values'>Abbs List to go here</td><td class='values'>Dev List to go here</td><td class='values'>Process List to go here</td><td class='values'>Testing List</td></tr>
    </table>
    </div>
    <script type="text/javascript">
    function toggle_visibility1(id)
    {
     var e = document.getElementById(id);
    
     if(e.style.display == 'none')
    {
     e.style.display = 'block';
    
     //document.getElementById('triOpen1').onclick = openTri;
    document.getElementById('triOpen1').innerHTML="Close";
    
    }
    else {
     e.style.display = 'none';
    document.getElementById('triOpen1').innerHTML="Open";
     //document.getElementById('triOpen1').onclick = cloTri;
    
     }
    }
    </script>
    </body>

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    This is a well known issue in older ie browsers
    with table elements.
    In older ie browsers and maybe some other browsers adding text
    with innerHTML io table cells works OK but adding html often fails.

    here is one possible work around ,
    this works in modern browsers and
    older ie browsers

    Code:
     
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <style type="text/css">
    body { border: 0px; }
    *{ font: 11px \Lucida Grande\, Verdana, sans-serif; }
    table { width:100% ; border: 0px ; border-spacing: 0px ; table-layout: fixed ; }
    td { border: 0px }
    .values { vertical-align:text-top }
    .labelGreen { font-weight:bold ; color: #008000 ; } 
    td.auto { width:auto; } 
    .empty { margin:auto }
    ul { list-style: none; margin: 0; padding: 0;} 
    a { color: #888; text-decoration: none; font-weight: bold; font-size: 10px; }
    </style>
    <script type="text/javascript">
    function cloTri(){alert("close")}
    function openTri(){alert("open")}
    function toggle_visibility1(id){
     var e = document.getElementById(id);
    if(e.style.display == 'none'){
     e.style.display = 'block';
     triOpen1.innerHTML = "";
     var a=triOpen1.appendChild(document.createElement("A"))
     a.href="javascript:openTri()";
     a.appendChild(document.createTextNode("Close"));
    }else {
     e.style.display = 'none';
     triOpen1.innerHTML = "";
     var a=triOpen1.appendChild(document.createElement("A"))
     a.href='javascript:cloTri()';
     a.appendChild(document.createTextNode("Open"));
     }
    }
    </script>
    <title>
    </title>
    </head>
    <body>
    <table>
    <tr><td class='auto' colspan ='4'>These entities, related to THIS Methodology, are already included in this Model Extract</td></tr>
    <tr><td class='labelGreen'><a href="#tri" onclick="toggle_visibility1('tri1');"><span id='triOpen1'>Open</span></a>&nbsp;ABBS 5 </td><td class='labelGreen'>Devices 15</td><td class='labelGreen'>Processes 2</td><td class='labelGreen'>Tests 13</td></tr>
    </table>
    <div id="tri1" style="display:none;">
    <table>
    <tr><td class='values'>Abbs List to go here</td><td class='values'>Dev List to go here</td><td class='values'>Process List to go here</td><td class='values'>Testing List</td></tr>
    </table>
    </div>
    </body>
    </html>
    Last edited by DaveyErwin; 01-29-2014 at 05:12 PM.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    href="javascript: is intended for right click and add to bookmarks menu - it should not be used for anything else.

    Where you need to have JavaScript run when a link is clicked you attach it to the onclick event handler (or even better attach a click event listener). The href needs to be used to identify where the link should take people who don't have JavaScript.

    Where you don't want a default action for people without JavaScript you should use <button> instead of <i> to create the link. See http://www.felgall.com/jstip189.htm
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    The problem is the nested <a> tags which is obviously invalid. This is how the link would look like when you execute your code.

    <a href="#tri" onclick="toggle_visibility1('tri1');"><span id='triOpen1'><a href='javascript:openTri()'>Close</a></span></a>

    And you did not post openTri() and closeTri() functions. These can probably be converted into a single function, say toggleTri(), that accepts a flag that indicates if open or close.

    Code:
    function toggle_visibility1(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'none') {
            e.style.display = 'block';
            toggleTri(false);
            document.getElementById('triOpen1').innerHTML = "Close";
        } else {
            e.style.display = 'none';
            toggleTri(true);
            document.getElementById('triOpen1').innerHTML = "Open";
        }
        return false;
    }
    
    function toggleTri(isClosed) {
        if (isClosed) {
    
        } else {
    
        }
    }


  •  

    Posting Permissions

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