Mam problme z IE. Ponizej zamieszczony kawalek kodu dziala poprawnie pod firefoxem natomiast pod ie nie dziala. W kodzie pobieram dane(klasa advAJAX) z pliku php, ktory pobiera dane z bazy. A chodzi mi o zrobienie dynamicznych selectow (wyszukiwarka), tzn dynamiczne usuwanie/dodawanie nowych selectow.
<html>
....
<script >
var counter=1;
function pokaz () {
//document.getElementById("result").className="t1";
//document.getElementById("e1_result").className="t1";
demo1();
}
function demo1() {
advAJAX.get({
url: "http://localhost/~test/ajax.php",
onSuccess : function(obj) {
var xmldoc = obj.responseXML;
var root = xmldoc.getElementsByTagName("root").item(0);
div = document.getElementById("test");
sel_name=createSelect();
div.innerHTML = "";
div.innerHTML = "ilosc elementow: " + counter;
var tab=new Array();
for (var i=1; i<=root.childNodes.length; i++) {
var nm="item" + i;
var root_node = xmldoc.getElementsByTagName(nm).item(0);
tab[i]=root_node.getAttribute('id');
tab[i]=new Array(root_node.firstChild.data,root_node.getAttribute('osc_id'));
document.form.sel_1.options[i] = new Option(root_node.firstChild.data);
document.form.sel_1.options[i].value = root_node.getAttribute('id');
}
}
});
}
function addListener(sel_name) {
sfield=document.getElementById(sel_name);
sfield.onchange = "demo2(this.options[this.selectedIndex].value,this.name)";
var onChangeHandler = new Function(sfield.onchange);
if (sfield.addEventListener) {
sfield.addEventListener('change', onChangeHandler, false );
} else if (sfield.attachEvent) {
sfield.attachEvent('onchange', onChangeHandler);
}
return sfield;
}
function createSelect() {
var sel=document.createElement("SELECT");
var sel_name="sel_" + counter;
sel.name=sel_name;
sel.id =sel_name;
selopt=document.createElement("OPTION");
sel.appendChild(selopt);
selopt.appendChild(document.createTextNode("Wybierz"));
document.form.appendChild(sel);
//sfield=document.getElementById(sel_name);
if (window.navigator.appName == 'Microsoft Internet Explorer') {
sfield=document.getElementById(sel_name);
sfield.onChange=demo2(this.name,sfield.options[sfield.selectedIndex].value);
}
else
sfield=addListener(sel_name);
counter++;
return sfield.name;
}
function demo2(wybor,selName) {
advAJAX.get({
url: "http://localhost/~sklep_leszek_moj/ajax.php",
parameters : {
"id" : wybor
},
onSuccess : function(obj) {
var xmldoc = obj.responseXML;
var root = xmldoc.getElementsByTagName('root').item(0);
var d= xmldoc.getElementsByTagName('item1').item(0)
if (root.childNodes.length > 0 ) { // <B><---- tu jest wyrzucany problem!!</b>
//if (xmldoc.getElementsByTagName('item1').item(0)) {
delSelect(selName);
var sfield=createSelect();
div = document.getElementById("test");
div.innerHTML = "";
div.innerHTML = "element: " + xmldoc.childNodes.length + " wybor " + wybor + " select " + selName;
var sel=document.getElementById(sfield);
for (var i=1; i<=root.childNodes.length; i++) {
var nm="item" + i;
var root_n = xmldoc.getElementsByTagName(nm).item(0);
sel.options[i] = new Option(root_n.firstChild.data);
sel.options[i].value =root_n.getAttribute('id');
}
//div = document.getElementById("test1");
//div.innerHTML = " ";
//div.innerHTML = "wybor " + wybor + " forms " + xmldoc.childNodes.length;
} //IF
else
delSelect(selName);
}
});
}
function delSelect(selName) {
var el=document.form.elements;
var forma = document.getElementById('form');
for (var i=el.length-1;i>=1; i--) {
var sel=selName.split('_');
roz=parseInt(sel[1]) + i;
//roz=roz+ "";
var sel2=sel[0] + "_" + roz.toString();
var node=document.getElementById(sel2);
if (node) {
forma.removeChild(node);
counter--;
}
}
div = document.getElementById("test1");
div.innerHTML = " ";
div.innerHTML = "form " + sel2 + " name " + selName + " roz " + roz.toString();//elName;
// }
// }
}
</script>
<form name="form" id="form">
<!-- <select onChange="demo2(this.value)" id="e1_result" name="e1_result">
<option value="tab1" >Brak danych </option>
<option value="tab2" > dupa1 </option>
</select>
<select name="result" id="result" onChange="demo2(this.value)">
</select>-->
<button onClick="demo1()">
Pobierz</button>
</form>
<div id="test" style="margin-top: 100px; margin-left: 300px;">
dupa
</div>
<div id="test1" style="marign-top: 200px; margin-left: 100px;">
allo
</div>
</body>
</html>
Problem wystepuje w funkcji demo2 przy if (root.childNodes.length > 0 )
tzn ie wyrzuca cos o braku obiektu (wymagany obiekt) .Dodam jeszcze ze dane wysylam w postaci pliku xml np takiego :
<?xml version="1.0" ?>
<root>
<item1 id="70" osc_id="69">xxxx</item1>
<item2 id="72" osc_id="69">zaq</item2>
</root>
dzieki