Bogey Posted August 11, 2014 Share Posted August 11, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted August 11, 2014 Share Posted August 11, 2014 Too vague. Tell us what you are assigning to options and selectBox2. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 11, 2014 Share Posted August 11, 2014 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 More sharing options...
Bogey Posted August 11, 2014 Author Share Posted August 11, 2014 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 More sharing options...
davej Posted August 12, 2014 Share Posted August 12, 2014 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 More sharing options...
Bogey Posted August 12, 2014 Author Share Posted August 12, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 12, 2014 Share Posted August 12, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
Bogey Posted August 12, 2014 Author Share Posted August 12, 2014 Thanks for your replies.... I go work with it again Link to comment Share on other sites More sharing options...
davej Posted August 12, 2014 Share Posted August 12, 2014 In a situation like this I would suggest writing a simpler example and then testing it with the browsers that you want to support. Link to comment Share on other sites More sharing options...
Bogey Posted August 12, 2014 Author Share Posted August 12, 2014 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 More sharing options...
justsomeguy Posted August 12, 2014 Share Posted August 12, 2014 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 More sharing options...
Bogey Posted August 12, 2014 Author Share Posted August 12, 2014 Thanks! I develop using Chrome... and from now on I go test it more often on other browsers too! lol Link to comment Share on other sites More sharing options...
Bogey Posted August 12, 2014 Author Share Posted August 12, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted August 12, 2014 Share Posted August 12, 2014 Open your PHP file in a browser and see what it's sending back as the response. Link to comment Share on other sites More sharing options...
Bogey Posted August 13, 2014 Author Share Posted August 13, 2014 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 More sharing options...
Bogey Posted August 13, 2014 Author Share Posted August 13, 2014 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted August 13, 2014 Share Posted August 13, 2014 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 More sharing options...
Bogey Posted August 14, 2014 Author Share Posted August 14, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now