Jump to content

innerHTML with IE


Bogey
 Share

Recommended Posts

Hi all,

 

I am writing some code. It works in Chrome, but not in IE.

 

I have a variable options which contains the options of a select.

 

This code works okay in Chrome:

document.getElementById(selectBox2).innerHTML = options;

But in IE the select is not filled.

 

I read numerous articles, but can't get it right... this is what I have, but does not work.

var newdiv = document.createElement("div");newdiv.innerHTML = options;alert (newdiv.innerHTML);var container = document.getElementById(selectBox2);container.appendChild(newdiv);

The alert, does give the right values, but I can't get them in the select.

 

Any suggestions?

 

Edited by Bogey
Link to comment
Share on other sites

What is selectBox2 set to? Does an element with that ID actually exist?

The alert, does give the right values, but I can't get them in the select.

A select box doesn't contain a div with a bunch of options, it only contains the options. A select element has an add method that you can also use to add options to it, which is probably preferable over changing innerHTML.https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#add()
Link to comment
Share on other sites

A quick response, before I go offline.... (I be back on this tomorrow)

 

This is the code of the whole function:

(selectBox2 contains the ID of the second select, which needs to be filled depending on the choice made in the first select.

Hope it makes sense to you all ;)

function selectBox(selectBox1,selectBox2,checkAllSelected_YesNo,buttonID,buttonClassID,AddChange){function toArray(obj) {var array = [];for (var i = obj.length >>> 0; i-- { array[i] = obj[i];}return array;}function addCommas(nStr){nStr += '';var x = nStr.split('.');var x1 = x[0];var x2 = x.length > 1 ? '.' + x[1] : '';var rgx = /(d+)(d{3})/;while (rgx.test(x1)) {x1 = x1.replace(rgx, '$1' + '.' + '$2');}return x1 + x2;}firstSelect = document.getElementById(selectBox1).getElementsByTagName('option');secondSelect = toArray(firstSelect);select1 = document.getElementById(selectBox1).value;var currentTime = new Date()//alert(select1);if (select1=='empty'){document.getElementById(selectBox2).disabled = 1;document.getElementById(selectBox2).innerHTML = '<option value="empty">tot</option>';//document.getElementById('hidden_selectPrijs2').value = document.getElementById(selectBox2).value;if (AddChange == 'add'){checkAllSelected_add_change_DB(buttonID,buttonClassID);}if (AddChange == 'change'){checkAllSelected_change_DB(buttonID,buttonClassID);}return;}if (select1=='last'){document.getElementById(selectBox2).disabled = 1;document.getElementById(selectBox2).innerHTML = '<option value="0">n.v.t.</option>';//document.getElementById('hidden_selectPrijs2').value = document.getElementById(selectBox2).value;if (AddChange == 'add'){checkAllSelected_add_change_DB(buttonID,buttonClassID);}if (AddChange == 'change'){checkAllSelected_change_DB(buttonID,buttonClassID);}return;}//alert(select1);var i = 0;var a = "eerste";for(var i in secondSelect){if (secondSelect[i].value=='empty'){options = "";}if (parseInt(secondSelect[i].value)>=parseInt(select1)){if (selectBox1=='selectBouwjaar1'){if (a != "eerste"){options = options + "<option value='" + secondSelect[i].value + "'>" + secondSelect[i].value + "</option>";}var a = "rest";}if (selectBox1=='selectKilometerstand1'){if (a != "eerste"){options = options + "<option value='" + secondSelect[i].value + "'>" + addCommas(secondSelect[i].value) + "</option>";}var a = "rest";}if (selectBox1=='selectPrijs1'){if (a != "eerste"){options = options + "<option value='" + secondSelect[i].value + "'>" + addCommas(secondSelect[i].value) + ",-</option>";}var a = "rest";}if (selectBox1=='selectVermogen1'){if (a != "eerste"){options = options + "<option value='" + secondSelect[i].value + "'>" + addCommas(secondSelect[i].value) + "</option>";}var a = "rest";}}if (secondSelect[i].value=='last'){if (selectBox1=='selectBouwjaar1'){options = options + "<option value='last'>" + currentTime.getFullYear() + "</option>";}if (selectBox1=='selectKilometerstand1'){options = options + "<option value='last'>>300.000</option>";}if (selectBox1=='selectPrijs1'){options = options + "<option value='last'>>250.000</option>";}if (selectBox1=='selectVermogen1'){options = options + "<option value='last'>>1.000</option>";}}} var newdiv = document.createElement("div");newdiv.innerHTML = options;alert (newdiv.innerHTML);var container = document.getElementById(selectBox2);container.appendChild(newdiv);//document.getElementById(selectBox2).innerHTML = options;//document.getElementById(selectBox2).disabled=false; if(checkAllSelected_YesNo=='ja'){if (AddChange == 'add'){checkAllSelected_add_change_DB(buttonID,buttonClassID);}if (AddChange == 'change'){checkAllSelected_change_DB(buttonID,buttonClassID);}}}
Link to comment
Share on other sites

This looks bad to me... you need to avoid the GT symbol...

if (selectBox1=='selectKilometerstand1'){options = options + "<option value='last'>>300.000</option>";}if (selectBox1=='selectPrijs1'){options = options + "<option value='last'>>250.000</option>";}if (selectBox1=='selectVermogen1'){options = options + "<option value='last'>>1.000</option>";
Link to comment
Share on other sites

I changed the ">>" after last to ">", but still not working.

Also tried "><", but also not working.

 

The select still not filled...

Does this part sounds okay? I guess there has to be an error?

var newdiv = document.createElement("div");newdiv.innerHTML = options;alert (newdiv.innerHTML);alert (selectBox2);var container = document.getElementById(selectBox2);container.appendChild(newdiv);
Edited by Bogey
Link to comment
Share on other sites

IE works to its own rules compared to other better browesers, if you want it work in IE and better browsers FORGET innerHTML, FORGET placing options in div as it is invalid in any case, and use add() as already suggested.You should never ever use .innerHTML, but use .value or .text for form elements.

Edited by dsonesuk
Link to comment
Share on other sites

The problem is, that I first made my website run in Chrome... after finishing that, I am testing it on the other browsers and fix the bugs for the browsers.

 

How you al do this? Build for one browser first (maybe IE, cause there are the most problems) or are you all testing the different browsers while writing the code?

Link to comment
Share on other sites

Test as often as you need to. You don't want to go down one path and get too far only to figure out testing that the path you took only works for a single browser and that you should have been doing things differently to start with. Most developers probably start with Firefox or Chrome because of the developer tools that are available, and test on the others as they go.

Link to comment
Share on other sites

Next problem I can;t get right:

 

Javascript function:

function fillSelect(sourceSelectID, targetSelectID, db_sourceTable, db_sourceTableID, db_sourceTableColumn, db_targetTable, db_targetTableColumn){//clear the selectvar selectObj = document.getElementById(targetSelectID);var selectParentNode = selectObj.parentNode;var newSelectObj = selectObj.cloneNode(false);selectParentNode.replaceChild(newSelectObj, selectObj); var sourceSelectValue = document.getElementById(sourceSelectID).value;run_xmlhttp();xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) {//alert (xmlhttp.responseText);alert(JSON.stringify(xmlhttp.responseText));//arraySelector = xmlhttp.responseText;//alert ("eerste: " + arraySelector);//alert ("tweede: " + arraySelector[1]);//alert("derde: " + arraySelector.join('n')) //document.getElementById(targetSelectID).innerHTML=xmlhttp.responseText;//myFunction(xmlhttp.responseText,targetSelectID); //var selectArray = xmlhttp.responseText;   //var sel = document.getElementById(targetSelectID);//for(var i = 0; i < selectArray.length; i++){// var opt = document.createElement('option');// opt.innerHTML = selectArray[i];// opt.value = selectArray[i];// sel.appendChild(opt);//}}}xmlhttp.open('GET', '/secure/opdrachten/db_fillSelect.php?a=' + sourceSelectValue + '&b=' + db_sourceTable + '&c=' + db_sourceTableID + '&d=' + db_sourceTableColumn + '&e=' + db_targetTable + '&f=' + db_targetTableColumn,  true);xmlhttp.send();}

The db_fillSelect.php file:

 

<?php$myArray = array();$x=0;while ($rowmodel = mysql_fetch_array($resultmodel)){//$options[$x]=$rowmodel['model'];//$myArray[] = array($rowmodel['model']);//$myArray[$x] = array($rowmodel['model'] => $rowmodel['model']);$myarray[$x] = $rowmodel['model'];//$rene = $rowmodel['model'];$x = $x + 1;}//echo $myArray;return $myArray;//echo $rene;?>
Edited by Bogey
Link to comment
Share on other sites

I see there is missing some info in my post, I had typed more stuff underneath the last code section for explanation...

 

I will try your option, to see what's happening in the php-file later on. I come back to this.

Link to comment
Share on other sites

okay...

 

php file:

<?php$sourceSelectValue = $_GET['a']; //volkswagen, volvo$db_sourceTable = $_GET['b']; //'merken'$db_sourceTableID = $_GET['c']; //'IDmerken'$db_sourceTableColumn = $_GET['d']; //'Merk'$db_targetTable = $_GET['e']; //'modellen'$db_targetTableColumn = $_GET['f']; //'IDmerken' echo $sourceSelectValue;echo "<br />";echo $db_sourceTable;echo "<br />";echo $db_sourceTableID;echo "<br />";echo $db_sourceTableColumn;echo "<br />";echo $db_targetTable;echo "<br />";echo "<br />"; include($_SERVER["DOCUMENT_ROOT"]."/config.php"); //Include de config met username en passwordsmysql_connect("localhost",$GLOBALS["dbuser"],$GLOBALS["dbpass"]) or die(mysql_error());mysql_select_db($GLOBALS["dbname"]); $result = mysql_query("SELECT " . $db_sourceTableID . " FROM " . $db_sourceTable . " WHERE " . $db_sourceTableColumn . " = '$sourceSelectValue'");$row= mysql_fetch_array($result); $resultModel = mysql_query("SELECT * FROM " . $db_targetTable . " WHERE " . $db_targetTableColumn . " = '$row[0]'"); $myArray = array();$x=0;while ($rowModel = mysql_fetch_array($resultModel)){echo $rowModel['model'];echo "<br />";//$options[$x]=$rowModel['model'];$myArray[] = array($rowModel['model']);//$myArray[$x] = array($rowModel['model'] => $rowModel['model']);//$myarray[$x] = $rowModel['model'];//$rene = $rowmodel['model'];$x = $x + 1;}echo "<br />";echo "<br />";echo "array1: " . $myArray;echo "<br />";echo "<br />";print_r($myArray);echo "<br />";echo "<br />";echo "frst: " . $myArray[0];echo "<br />";echo "scnd: " . $myArray[1];echo "<br />";echo "thrd: " . $myArray[2]; ?>

Show this in browser:

abarthmerkenid_merkenmerkmodellen500500cPunto Evoarray1: ArrayArray ( [0] => Array ( [0] => 500 ) [1] => Array ( [0] => 500c ) [2] => Array ( [0] => Punto Evo ) ) frst: Arrayscnd: Arraythrd: Array

So the array has been made, but what now? ;)

I want to "echo" or "return" this array to my javascript funtion and use it there, but can't get it accomplished.... I just get the value "Array", but not the content...

Edited by Bogey
Link to comment
Share on other sites

That's what happens when you print an array, it prints the word "Array". The best way to send an array to Javascript is to use json_encode to encode it as a JSON string, and in Javascript you can convert the JSON back into an array. You could also use implode to join the array on another character like a comma or pipe, and in Javascript split the string back into an array.

Link to comment
Share on other sites

Got it working... thnx!!!!

in php I did not use an array, but from start I uses a comma seperatored string.

In Javascript I did spilt this string to an array...

 

thnx thnx thnx

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...