www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 16

Thread: [RESOLVED] IE innerHTML. Urgent help please

  1. #1
    Join Date
    Jul 2009
    Posts
    91

    resolved [RESOLVED] IE innerHTML. Urgent help please

    I am trying to reset an option drop down list using javascript code which works in FF and Safari but don't get anywhere near working in IE which is driving me mad. the problem i know has to do with innerHTML but i don't know how to fix it.

    Code:
    function resetSizesList(){
      var shapeDiv = document.getElementById('pool'); //id of radio buttons
      var sizeList = document.getElementById('size'); //id of select options
      if(shapeDiv.onchange){//one of the 3 available radio button is changed
          sizeList.innerHTML = ""; //clear and reset the option lists
      
    }
    hand i call that method here in my html file
    HTML Code:
    <td>
        <div id="shape" class="Pool_Shape">
            <input type="radio" id="pool" value="UKOvalPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Oval Pool<br>
            <input type="radio" id="pool" value="UKRoundPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Round Pool<br>
            <input type="radio" id="pool" value="UKRectangularPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Rectangular Pool<br>
    
        </div>
        <div id="Shapes" style="display:none">
            <select id = "size" name ="size_In_Feets">
    
             </select>
    
         </div>
     </td>
    please help its urgent. Thanks in advance
    Last edited by ca87; 10-14-2010 at 04:06 AM.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Despite the behavior of the name attribute (which can belong to more than a single element), an id must be unique on document, as it was designed to refer a single element. Same as an ID paper in our real life. As it is about the elements of a form, you may use getElementsByName() instead. And use the common name as argument. But take care: that method returns always a collection (a sort of array), thus you have to circle through the elements of that collection, and to use the index to refer a certain element there.
    Last edited by Kor; 10-14-2010 at 07:07 AM.

  3. #3
    Join Date
    Jul 2009
    Posts
    91
    Quote Originally Posted by Kor View Post
    Despite the behavior of the[........
    Here is what i come up with but did not stop the problem in IE.
    Code:
    //function to reset the size drop down menu
    function resetSizes(){
      var d = document;	// just to save on typing
      //var shapeDiv = d.getElementById('pool');
      var selectElement = d.getElementById('size'); 
      while (selectElement.childNodes.length) {
            selectElement.removeChild(selectElement.firstChild);
      }
    }
    But this refuse to work in IE and i don't know what else to do. please help out.

    here is the link to my application.Click on the link to open the Calculator.
    It works well in FF, Safari and Chrome.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    d.getElementById('size').options.length =  null;

  5. #5
    Join Date
    Oct 2010
    Posts
    4
    There's a bug in IE makeing innerHTML unpredictable on select elements.
    The only solution is to wrap the select in a div and replace the innerHTML of that div.

    Hope this helps :-)

  6. #6
    Join Date
    Jul 2009
    Posts
    91
    Quote Originally Posted by Fang View Post
    Code:
    d.getElementById('size').options.length =  null;
    I only want to reset the select option when one of the radio button is changed. Now, using your suggestion just sets all the select options to "null" which isn't what i want. What i want is to clear up any data in the select option prior to change and then populate it with the values from showPoolSize() below

    Code:
     function showPoolSize(str){
        if (str==""){
          documtent.getElementById('size').appendChild("");
          return;
      }
      loadScript("selectSize.php?Pool_Shape="+str,function(){
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
              var d = document;
              var s = d.getElementById('size');
              var sizes = eval('('+xmlhttp.responseText+')');
              for (key in sizes) {
                  var o = d.createElement('option');
                  o.value = key;
                  var text = d.createTextNode(sizes[key]);
                  o.appendChild(text);
                  s.appendChild(o);
              }
          }
          document.getElementById('Shapes').style.display = 'block';
      });
    }
    below is the html section i am working with
    HTML Code:
    <td>Pool Shape &amp; Size</td>
                                    <td>
                                        <div id="shape" class="Pool_Shape">
                                            <input type="radio" value="UKOvalPool" id="pool" name="Pool_Shape" onchange="resetSizes()" onclick ="showPoolSize(this.value)">Oval Pool<br>
                                            <input type="radio" value="UKRoundPool" id="pool" name="Pool_Shape" onchange="resetSizes()" onclick ="showPoolSize(this.value)">Round Pool<br>
    
                                            <input type="radio" value="UKRectangularPool" id="pool" name="Pool_Shape" onchange="resetSizes()"  onclick ="showPoolSize(this.value)">Rectangular Pool<br>
    
                                        </div>
                                        <div id="Shapes" style="display:none">
                                            <select id = "size" name ="size_In_Feets">
                                                <!--<option VALUUE ="0" selected>Please select pool size</option>-->
    
                                             </select>
    
                                         </div>
    
                                     </td>
    Quote Originally Posted by voilajs View Post
    There's a bug in IE makeing innerHTML unpredictable on select elements.
    The only solution is to wrap the select in a div and replace the innerHTML of that div.

    Hope this helps :-)
    The select options were already wrapped in div but still did not fix it.

  7. #7
    Join Date
    Oct 2010
    Posts
    4
    Wrapping the options in a div is not the solution I suggested.
    You need to wrap the select element and replace everything in that div.

    HTML Code:
    div.innerHTML = '<select><option></option></select>';

  8. #8
    Join Date
    Jul 2009
    Posts
    91
    Quote Originally Posted by voilajs View Post
    Wrapping the options in a div is not the solution I suggested.
    You need to wrap the select element and replace everything in that div.

    HTML Code:
    div.innerHTML = '<select><option></option></select>';
    Sorry i don't understand you. I am a noob who's learning. are you suggesting that i replace the html code with your suggestion? well, i haven't come across that. Or should it rather be done in javascript?

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    If you need to remove the options, you can use a simple function like:
    Code:
    function clearChildNodes(parent){
    while(parent.hasChildNodes()){
    parent.removeChild(parent.childNodes[0]);
    }
    }
    And send the reference of your select element to that function as an argument.
    Last edited by Kor; 10-18-2010 at 10:05 AM.

  10. #10
    Join Date
    Jul 2009
    Posts
    91
    Quote Originally Posted by Kor View Post
    If you need to remove the options, you can use a simple function like:
    Code:
    function clearChildNodes(parent){
    while(parent.hasChildNodes()){
    parent.removeChild(parent.childNodes[0]);
    }
    }
    And send the reference of your select element to that function as an argument.
    Kor, what value should be passed to the parameter? giving that i want to call the function on the radio onchange event. Could you please explain how i should implement it. thanks.
    Last edited by Kor; 10-18-2010 at 10:05 AM.

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    As I wrote the function, you should pass the parent object (the select reference) whose options you want to remove:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function clearChildNodes(parent){
    while(parent.hasChildNodes()){
    parent.removeChild(parent.childNodes[0]);
    }
    }
    </script>
    </head>
    <body>
    <form action="">
    <select id="size" name="size_In_Feets">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <br>
    <br>
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
    </form>
    </body>
    </html>
    Or, if you intend to use id, you may pass the id to the function, and modify a little bit that function as:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function clearChildNodes(parentID){
    var parent=document.getElementById(parentID);
    while(parent.hasChildNodes()){
    parent.removeChild(parent.childNodes[0]);
    }
    }
    </script>
    </head>
    <body>
    <form action="">
    <select id="size" name="size_In_Feets">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    <br>
    <br>
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes('size')">
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes('size')">
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes('size')">
    </form>
    </body>
    </html>

  12. #12
    Join Date
    Jul 2009
    Posts
    91
    Quote Originally Posted by Kor View Post
    As I wrote the function, you should pass the parent object (the select reference) whose options you want to remove:
    Code:
    <script type="text/javascript">
    function clearChildNodes(parent){
    while(parent.hasChildNodes()){
    parent.removeChild(parent.childNodes[0]);
    }
    }
    </script>
    
    <input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
    <input type="radio" name="Pool_Shape"
    THANK YOU! for taking your time to go up to this extent. That is the one that works but it seems IE has problem with even the both approach. Click on the radio option and then try to select a size; you'll notice in IE 8 and 9 that the size option is completeley empty? try selecting another radio option you still see the same problem, this is really strange!
    On the other hand, if i don't add the onchange = "clearChildNodes(this.form['size_In_Feets'])" ofcouse it will only display one set sizes corresponding to the select Radio option.

    Everything works just fine in FF, Chrome and Safari!

    Here is the code for filling the size list when a radio button is clicked.
    Code:
    function showPoolSize(str){
        if (str==""){
          documtent.getElementById('size').appendChild("");
          return;
      }
      loadScript("selectSize.php?Pool_Shape="+str,function(){
          if (xmlhttp.readyState==4 && xmlhttp.status==200){
              var d = document;
              var s = d.getElementById('size');
              var sizes = eval('('+xmlhttp.responseText+')');
              for (key in sizes) {
                  var o = d.createElement('option');
                  o.value = key;
                  var text = d.createTextNode(sizes[key]);
                  o.appendChild(text);
                  s.appendChild(o);
              }
          }
          document.getElementById('Shapes').style.display = 'block';
      });
    }
    if you are wondering what the selectSize.php is? here it is
    PHP Code:
    if(! isset($_SESSION['databaseURL'])){
                include(
    "conf/conf.php");
                
    $dbConf = new PPConf();
                
    $databaseURL $dbConf->get_databaseURL();
                
    $databaseUName $dbConf->get_databaseUName();
                
    $databasePWord $dbConf->get_databasePWord();
                
    $databaseName $dbConf->get_databaseName();


                
    $connection mysql_connect($databaseURL,$databaseUName,$databasePWord)or die ("Error while connecting to localhost");

                
    $db mysql_select_db($databaseName,$connection) or die ("Error while connecting to database");

                
    $table $_REQUEST["Pool_Shape"];
                
    $query "SELECT * FROM `$table`";
                
    $result mysql_query($query);
                
    $sizeArray = array('Please select pool size'); //initialize the array since the string value is not on the database
                
    $counter 1;
                while(
    $row mysql_fetch_array($result)){
                    
    $sizeArray[$counter] = $row['sizeMtr'];
                    
    $counter++;
                }
                echo 
    json_encode($sizeArray);
                
    mysql_close($connection);
        } 

  13. #13
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,271
    Others cross brosers methods to remove and reset a drop down list :

    HTML Code:
    // remove 
    document.getElementById(id).options.length=0;
    // (It's ofen interesting to have an 0 option to force a change)
    
    //build with an objet like your sizes
    var i=0;
    for (key in sizes) 
       document.getElementById(id).options[i++]=new Option(sizes.key)
    // variant
       document.getElementById(id).options[i++]=new Option(sizes.key,sizes.value)
    }
    see this page
    Last edited by 007Julien; 10-18-2010 at 12:11 PM. Reason: mistake

  14. #14
    Join Date
    Jul 2009
    Posts
    91
    Quote Originally Posted by 007Julien View Post
    Others cross brosers methods to remove and reset a drop down list :

    HTML Code:
    // remove 
    document.getElementById(id).options.length=0;
    // (It's ofen interesting to have an 0 option to force a change)
    
    //build with an objet like your sizes
    var i=0;
    for (key in sizes) 
       document.getElementById(id).options[i++]=new Option(sizes.key)
    // variant
       document.getElementById(id).options[i++]=new Option(sizes.key,sizes.value)
    }
    see this page
    THANK YOU! YOU DID IT! it works NOW WITH ALL! Oh What a relief!!!!! But IE8 returns and display the counter (i) at the end of the select menu? why is this and how can i get rid of it?
    Last edited by ca87; 10-18-2010 at 01:52 PM.

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,271
    It serves as an alternate method of adding/removing options to select.add() and select.remove(), with the main benefit being it works in all browsers out of the box, including in very old, non DOM2 legacy browsers.
    It's works too with IE8. I did It with this page. In fact 22 pages and additionnal scripts for Régions, about 100 Départements (first choice) and 36.885 Communes (second choice) !
    Courage ...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles