dynamisk tilføjelse af dom-element
Hej EksperterJeg har 2 div elementer som opdateres på baggrund af indtastning i 2 input's elementer, dvs. forslag til indtastning input felt vises i div element.
Disse elementer skal virke parvis uafhængigt af hinanden. Koden er dog skrevet så der nemt kan tilføjes flere felter.
Koden virker også fint når kun et objekt er oprettet, ligegyldigt hvilket.
Enten
//-- Load hint for place 2
url = 'jshandle/xmlP.hint.php?q=';
var hint_obj2 = new Hint(url,'dom_hint_field2','field2');
function load_hint_func2(str){
hint_obj2.load(str);
}
eller
//-- Load hint for place 2
url = 'jshandle/xmlP.hint.php?q=';
var hint_obj2 = new Hint(url,'dom_hint_field2','field2');
function load_hint_func2(str){
hint_obj2.load(str);
}
kan være indkommenteret, men ikke begge på samme tid. Når begge er indkommenteret vises indhold altid i 'dom_hint_field2','field2' som defineret i det object der er oprettet sidst.
Tror problemet opstår ved måden Dom-objektet defineres, kan dog ikke lige komme på en bedre metode.
Håber nogen kan hjælpe med at finde fejlen...
Koden ser ud som følger.
<head>
<script language="javascript" type="text/javascript">
//-- Load hint for place 1
url = 'jshandle/xmlS.hint.php?q=';
var hint_obj1 = new Hint(url,'dom_hint_field1','field1');
function load_hint_func1(str){
hint_obj1.load(str);
}
//-- Load hint for place 2
url = 'jshandle/xmlP.hint.php?q=';
var hint_obj2 = new Hint(url,'dom_hint_field2','field2');
function load_hint_func2(str){
hint_obj2.load(str);
}
//-- Load the place ----
function Hint(url, divHintDist, divDist){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
x=xmlhttp.responseXML.documentElement.getElementsByTagName("item");
div = document.getElementById(divHintDist);
div.innerHTML='';
if(x.length>0){
for (i=0;i<x.length;i++){
var text = x[i].firstChild.nodeValue;
var p = document.createElement('p');
p.appendChild(document.createTextNode(text));
p.className='hint';
p.onclick = function(text) {return function(){
document.getElementsByName(divDist)[0].value=text;
document.getElementById(divHintDist).style.display="none";
};}(text);
div.appendChild(p);
}
div.style.display="block";
}
else
div.style.display="none";
}
}
//-- Load hint ---
this.load = function(str){
if (str.length==0){
document.getElementById(divHintDist).style.display="none";
return;
}
xmlhttp.open("GET",url+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div class="formcontent">
<input class='inputfield' type='text' name='field1' style="width: 200px;" onkeyup="load_hint_func1(this.value);" autocomplete="off" value=""/>
<div id="dom_hint_field1" class="hint" style="width:200px; display:none"></div>
</div>
<div class="formcontent">
<input class='inputfield' type="text" name="field2" style="width:320px;" onkeyup="load_hint_func2(this.value);" autocomplete="off" value=""/>
<div id="dom_hint_field2" class="hint" style="width:320px; display:none"></div>
</div>
</body>
