innerHTML with IE

[Bogey]

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 August 14, 2014 by Bogey

[davej]

Too vague. Tell us what you are assigning to options and selectBox2.

[justsomeguy]

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()

[Bogey]

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);}}}

[davej]

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>";

[Bogey]

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 August 12, 2014 by Bogey

[dsonesuk]

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 August 12, 2014 by dsonesuk

[Bogey]

Thanks for your replies.... I go work with it again

[davej]

In a situation like this I would suggest writing a simpler example and then testing it with the browsers that you want to support.

[Bogey]

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?

[justsomeguy]

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.

[Bogey]

Thanks!

 

I develop using Chrome... and from now on I go test it more often on other browsers too! lol

[Bogey]

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 August 12, 2014 by Bogey

[justsomeguy]

Open your PHP file in a browser and see what it's sending back as the response.

[Bogey]

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.

[Bogey]

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 August 13, 2014 by Bogey

[justsomeguy]

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.

[Bogey]

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