Bonjour,
Je viens solliciter votre aide pour un souci avec du javascript, avec lequel je ne suis pas super à l'aise j'avoue.
Quelques explications:
Le code ci-dessous va interroger une base de donnée (à l'aide d'un XHR via une page php).
La page php retourne un résultat qui ressemble à ça: 1-hotel du Lac-50-100*/*3-hotel Beau Rivage-25-25*/*4-Royal Plazza-250-380*/*5-Palace Montreux-110-640.
Le résultat est repris par le javascript via une variable 'rep' puis splitée une première fois avec le '*/*', puis chaque entrée du premier tableau est re splité cette fois avec le '-'.
Jusque la tout va bien...
(Je sens déjà que je vais me faire incendier pour mes méthodes de boucherons ;-) )
Le premier souci:
Lors de la création de la div tous les éléments sont bien pris en compte...sauf sur le dernier tour de la boucle, celle-ci oublie l'attribut "top".
J'avoue ne pas comprendre pourquoi...
Le second souci:
Lors de la création des fonctions:
Code :
- maDiv.onmouseover = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'block';};
- maDiv.onmouseout = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'none';};
|
Le javascript écrit à chaque tours de boucle la même valeur pour: document.getElementById('over' + hotelDetail[0]),
soit la valeur de la dernière boucle, par exemple 'over3', au lieu d'écrire 'over1' 'over2' 'over3'.
J'avoue la aussi ne pas comprendre pourquoi.
Voici le code incriminé:
Code :
- <script type="text/javascript">
- function selectHotel()
- {
- var xhr=null;
- if (window.XMLHttpRequest) {
- xhr = new XMLHttpRequest();
- }
- else if (window.ActiveXObject)
- {
- xhr = new ActiveXObject("Microsoft.XMLHTTP" );
- }
- xhr.open("GET", "" + 'testhotel.php?do=4' + "", false);
- xhr.send(null);
- var rep = xhr.responseText;
- hotelActiv=rep.split('*/*');
- for(x in hotelActiv)
- {
- hotelDetail=hotelActiv[x].split('-');
- //alert(hotelDetail[1]);
- maDiv= document.createElement("div" );
- maDiv.id = 'a' + hotelDetail[0];
- maDiv.style.top= hotelDetail[3] + 'px';
- maDiv.style.width='20px';
- maDiv.style.height='20px';
- maDiv.style.backgroundImage = "url('img/btn_carte_redPoint.jpg')";
- maDiv.style.position="absolute"
- maDiv.style.left = hotelDetail[2] + 'px';
- maDiv.style.zIndex='20';
- maDiv.onmouseover = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'block';};
- maDiv.onmouseout = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'none';};
- document.body.appendChild(maDiv);
- maDiv2 = document.createElement("div" );
- maDiv2.id = 'over' + hotelDetail[0];
- maDiv2.style.height='20px';
- maDiv2.style.backgroundColor='#ff0000';
- maDiv2.innerHTML = hotelDetail[1];
- maDiv2.style.display='none';
- document.body.appendChild(maDiv2);
- }
|
Merci pour votre future aide!!
