ecriture de div "à la volée"

ecriture de div "à la volée" - HTML/CSS - Programmation

Marsh Posté le 07-09-2010 à 15:59:50    

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 :
  1. maDiv.onmouseover = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'block';};
  2. 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 :
  1. <script type="text/javascript">
  2. function selectHotel()
  3. {
  5.    var xhr=null;
  7.  if (window.XMLHttpRequest) {
  8.   xhr = new XMLHttpRequest();
  9.  }
  10.  else if (window.ActiveXObject)
  11.  {
  12.   xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  13.  }
  14.  xhr.open("GET", "" + 'testhotel.php?do=4' + "", false);
  15.  xhr.send(null);
  16.  var rep = xhr.responseText;
  19.  hotelActiv=rep.split('*/*');
  20.  for(x in hotelActiv)
  21.  {
  23.   hotelDetail=hotelActiv[x].split('-');
  24.   //alert(hotelDetail[1]);
  26.   maDiv= document.createElement("div" );
  27.   maDiv.id = 'a' + hotelDetail[0];
  28.   maDiv.style.top= hotelDetail[3] + 'px';
  29.   maDiv.style.width='20px';
  30.   maDiv.style.height='20px';
  31.   maDiv.style.backgroundImage = "url('img/btn_carte_redPoint.jpg')";
  32.   maDiv.style.position="absolute"
  33.   maDiv.style.left = hotelDetail[2] + 'px';
  35.   maDiv.style.zIndex='20';
  36.   maDiv.onmouseover = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'block';};
  37.   maDiv.onmouseout = function() {document.getElementById('over' + hotelDetail[0]).style.display = 'none';};
  38.   document.body.appendChild(maDiv);
  40.   maDiv2 = document.createElement("div" );
  41.   maDiv2.id = 'over' + hotelDetail[0];
  42.   maDiv2.style.height='20px';
  43.   maDiv2.style.backgroundColor='#ff0000';
  44.   maDiv2.innerHTML = hotelDetail[1];
  45.   maDiv2.style.display='none';
  47.   document.body.appendChild(maDiv2);
  48.  }


 
Merci pour votre future aide!!

Reply

Marsh Posté le 07-09-2010 à 15:59:50   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed