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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    document.getElementById working in all browsers except IE

    Below code works in virtually every browser (including Safario and iOS) except IE. In IE I get an Object Required error. Thanks in advance for any assistance. RG

    [CODE]
    function toggle(btnID) {

    if (document.getElementById(btnID).style.display == "block")
    {
    document.getElementById(btnID).style.display = "none";
    } else {
    document.getElementById(btnID).style.display = "block";
    }


    var a = ["pdfMap","markUp","addSearch","mapLegend","parcelSearch"];

    for (index=0;index < a.length; ++index)
    {
    if (btnID != (a[index]))
    {

    if (document.getElementById(a[index]).style.display == "block")
    {
    document.getElementById(a[index]).style.display = "none";
    }
    }

    } //for

    }//func



    <div id="header" dojotype="dijit.layout.ContentPane" region="top">
    <img id="logo" src="images\parcel.png" />
    <img id="legendSwatch" alt="Optional Layers" src="images\layers_1_icon&32.png" onclick="toggle('mapLegend')" />
    <img id="searchSwatch" alt="Parcel Search" src="images\zoom_icon&32.png" onclick="toggle('parcelSearch')" />
    <img id="addressSwatch" alt="Find Address" src="images\pin_map_icon&32.png" onclick="toggle('addSearch')" />
    <img id="drawSwatch" alt="Map Mark-up" src="images\pencil_icon&32.png" onclick="toggle('markUp')" />
    <img id="pdfSwatch" alt="Print to PDF" src="images\print_icon&32.png" onclick="toggle('pdfMap')" />

    </div>

    <div id="mapLegend" class="floating-layerMenu" style="width:200px; height:195px;" >
    <h5>Optional Layer List</h5>
    </br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'>Addresses</label></br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='2' value=2 onclick='updateLayerVisibility();'>Zoning</br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='3' value=3 onclick='updateLayerVisibility();'>Lot Numbers</br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='4' value=4 onclick='updateLayerVisibility();'>Subdivisions</br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='5' value=5 onclick='updateLayerVisibility();'>Parcels</br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='8' value=8 onclick='updateLayerVisibility();'>Bldg Footprints</br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='11' value=11 onclick='updateLayerVisibility();'>Base Flood Elev</br>
    <label class="chkLabel"><input type='checkbox' class='list_item' id='12' value=12 onclick='updateLayerVisibility();'>Flood Hazard Areas</br>
    </div>


    <div id="pdfMap" class="floating-layerMenu" style="width:200px; height:150px;" >
    <h5>Export to PDF</h5>
    </br>
    <span>
    <input type="text" id="pdfTitle" value="" /></br>
    <button data-dojo-type="dijit.form.Button", data-dojo-props="onClick:function(){myPDF();}">Set Map Title</button>
    <div id="print_button"></div>
    </span>

    </div>

    <div id="addSearch" class="floating-layerMenu" style="width:200px; height:150px;" >
    <h5>Find Address</h5>
    </br>
    <span>
    <input type="text" id="geocode" value="8813 Meadow Dr"></input>
    <button onClick="locate()">Locate</button>
    </span>
    </div>


    <div id="parcelSearch" class="floating-layerMenu" style="width:200px; height:150px;" >
    <h5>Parcel Search</h5>
    </br>
    <span>
    <input type="text" id="searchText" value="17451-0020-00000-00"></input></br>
    <button onClick="execute(dojo.byId('searchText').value);">Search</button>
    </span>
    </div>




    <div id="markUp" class="floating-layerMenu" style="width:200px; height:150px;" >
    <h5>Map Markup</h5>
    </br></br>
    <img id="iconPG" src="images\drawPLicon.png" onClick="initToolbarPL();" />
    <img id="iconPG" src="images\drawPGicon.png" onClick="initToolbarPG();" />
    <img id="iconPG" src="images\drawPNTicon.png" onClick="initToolbarPNT();" />
    <img id="iconPG" src="images\clearAllicon.png" onClick="initToolbarClear();" />
    </div>
    [CODE]

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    works OK for me in IE8

    do you get any more detail about the error? is it on the toggle function, or something else?

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    works OK for me in IE8

    do you get any more detail about the error? is it on the toggle function, or something else?
    Thanks for the very quick reply, xelawho.

    Yes, the error is on the toggle function. The "Object Required" error occurs at the line:

    Code:
    if (document.getElementById(btnID).style.display == "block")
    And actually any line where I use the "document.getElementById(btnID)" statement.

    Thanks again,

    RG

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,203
    Thanks
    15
    Thanked 253 Times in 253 Posts
    Some versions of IE require that you say

    window.document.getElementById
    Code:
    function byId(A)
    {
    var B=window.document.getElementById(A);
    return B;
    }
    function byClass(C)
    {
    var D=window.document.getElementsByClassName(C);
    return D;
    }
    function byTag(E)
    {
    var F=window.document.getElementsByTagName(E);
    return F;
    }
    
    
    //   <script type="text/javascript" src="../Files/miniAPI.js"></script>
    Put that in a file and name it miniAPI.js and put the cod at the bottom at the top of the javascript stack. Then you just need to say byId or byClass.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the reply, DrDos. Sadly however that did not yield any positive results. Same error. Just don't understand how it works in every browser except IE.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    What *VERSION* of IE???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    IE 8.....

    Thanks!

    RG

  • #8
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, 7-8-9 actually. :-/

  • #9
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    For the record, and possibly to save anyone's time....I have placed the script in every possible position in the app.....after the </BODY> tag, etc. Still no success in IE and in any flavor of IE. Mind blower indeed.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it's gotta be something else... unfortunately IE is hopelessly unreliable when it comes to line numbers. Do you have other elements that have the same name as the IDs you are using? Or maybe a link to a live page?

  • #11
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Link to live page is below......the issue is with the tool icons in the upper-right of the page. In all other browsers except IE, you toggle the visibility of a DIV-based menu by clicking the image. And again, I sincerely appreciate everyone's generous assistance. Link is below..

    http://gisapps.fortsmithar.gov/javas...ParcelMap.html

    RG

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Do you have any elements in the page that use name attributes? If so is there one of those using the same name as the id? IE maps name attributes and id attributes to the same namespace so that one can interfere with the other.
    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.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    Works fine in MSIE 9 for me!

    (Well, the CSS needs some work...some elements overlap a bit...but the toggling works same as on Chrome.)

    And Felgall: No duplicate names or ids anywhere in the page, so far as I can see.

    GibbyAR: I sure don't see the reason for the bug, but I think we could fix it.

    Kill your existing toggle() function and put the following code *JUST BEFORE* the </body> on the page:
    Code:
    <script type="text/javascript">
    var divs = document.getElementsByTagName("div");
    var layerMenus = [ ];
    for ( var d = 0; d < divs.length; ++d )
    {
        var div = divs[d];
        if ( div.className.indexOf("floating-layerMenu") >= 0 )
        {
            div.style.display = "none";
            layerMenus.push( div ); 
        }
    }
    
    function toggle( btnID )
    {
        for ( var d = 0; d < layerMenus.length; ++d )
        {
            var div = layerMenus[d];
            if ( div.id == btnID )
            {
                div.style.display = div.style.display == "block" ? "none" : "block";
            } else {
                div.style.display = "none";
            }
        }
    }
    </script>
    If for some reason that still doesn't work, give each of those 5 <div>s a name= that matches their id= and use
    Code:
            if ( div.id == btnID || div.name == btnID )
    in the toggle() function code.

    See if either of those work. We have now gotten rid of the dependence on getElementById.

    EDITED: OOPS! Correct my own mistake. The array used in the toggle function must be that layerMenus array.
    Last edited by Old Pedant; 06-13-2013 at 11:57 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I see the problem on IE8, and I still think it's some other conflict.

    Alerting document.getElementById("mapLegend");

    at the start of the toggle function gets you "null" (when it obviously does exist) but alerting document.getElementById("parcelSearch") gets you [object] (as you would expect) because it's the one that is shown on page load.

    I suspect something to do with dojo, which I know nothing about... but maybe Old Pedant's solution will fix it and all of that is meaningless...

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    no, I think I see it now... looks like you're missing a closing div tag. From the looks of it, it's on the div id="map" div. IE's very picky about that...


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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