Problèmes de remplacement d'un ID statique par une variable

Question

J'ai un script qui charge les informations du fichier XML externe et l'insère dans la page HTML lors du clic. Voici le code de ce script:

var xmlhttp; 
function loadXMLDoc(url,target) { 
xmlhttp = null; 
if (window.XMLHttpRequest) { // code for all new browsers 
    xmlhttp = new XMLHttpRequest(); 
} 
else if (window.ActiveXObject) { // code for IE5 and IE6 
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
if (xmlhttp != null) { 
    xmlhttp.onreadystatechange = state_Change; 
    xmlhttp.open("GET", url, true); 
    xmlhttp.send(null); 
} 
else { 
    alert("Your browser does not support XMLHTTP."); 
} 
} 
function state_Change() { 
if (xmlhttp.readyState == 4) { // 4 = "loaded" 
    if (xmlhttp.status == 200) { // 200 = OK  
     var markers = xmlhttp.responseXML.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getElementsByTagName("name")[0].firstChild.nodeValue; 
      //etc... 
document.getElementById(target).innerHTML += '<li>' + name + '</li>\n'; 
     } 
    } 
    else { 
     alert("Problem retrieving XML data"); 
    } 
} 
} 

Voici le code HTML:

<ul id="list_puncts"> 
<li><a href="javascript:;" onclick="loadXMLDoc('./content/geo_points/slovenia.xml','list_sl')">Republika Slovenija (RS)</a> 
<ul id="list_sl"> 
    <!--here should be some info from XML file--> 
    </ul></li> 
    <li><a href="javascript:;" onclick="loadXMLDoc('./content/geo_points/horvatia.xml','list_hr')">Republika Hrvatska (RH)</a> 
    <ul id="list_hr"> 
    <!--here should be some info from XML file--> 
    </ul></li> 
    </ul> 

Cependant, cela ne fonctionne pas - après que le lien est cliqué, XML se charge (on peut voir dans Firebug), mais la deuxième variable - target - ne peut pas faire son chemin dans la fonction state_Change, donc aucune action réelle n'est faite. Si target dans document.getElementById(target).innerHTML est remplacé par un ID statique (comme list_sl), il fonctionne, mais j'ai beaucoup de ces liens dans le HTML, pas seulement Slovénie et Horvatia, donc la variable est fortement nécessaire.

Merci pour toute aide.

Answer 1

Placez la logique state_Change dans une fonction anonyme au sein de loadXMLDoc.

function loadXMLDoc(url,target) { 
    // ... code to instantiate XMLHttprequest goes here ... 

    if (xmlhttp != null) { 
     xmlhttp.onreadystatechange = function() { 
      // Your state_Change() logic goes here. 
      // This has access to the variable "target" because 
      // it's within the same enclosing function's scope. 
     }; 
     xmlhttp.open("GET", url, true); 
     xmlhttp.send(null); 
    } 
} 

L'inconvénient est qu'une nouvelle instance de la fonction est instancié chaque fois loadXMLDoc est appelé.

Answer 2

Si vous utilisez des variables globales (aussi bien pour XMLHttpRequest s et vos target s), vous ne pouvez pas appuyer les demandes parallèles (à savoir un utilisateur de clics sur un autre lien avant un XMLHttpRequest retours). Une façon de mettre en œuvre est de garder la variable xmlhttp dans votre champ de fonction loadXMLDoc et ajoutez votre target comme propriété de l'objet XMLHttpRequest:

function loadXMLDoc(url, target) { 
    var xmlhttp; 
    // create XMLHttpRequest instance 
    if(xmlhttp != null) { 
     xmlhttp.onreadystatechange = state_Change; 
     xmlhttp.targetListId = target; 
     xmlhttp.open(); // etc. 
    } 
}; 

Dans votre fonction state_Change vous pouvez accéder à l'instance XMLHttpRequest en utilisant target propriété de l'événement :

function state_Change(e) { 
    var xmlhttp = e.target; 
    // check readystate & status 

    var targetList = document.getElementById(xmlhttp.targetListId); 
    targetList.innerHTML = ''; // fill with data, etc. 
};