11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai un pop-up qui se présente de cette façon:
upload/16746-pop.png

Il y a donc 4 onglet à remplir.

Une fois arrivé sur l'onglet récapitulatif, les données des autres onglets sont récupérés afin que ce dernier soit rempli.
L'ennui est que lorsque l'onglet récapitulatif est rechargé de quelque manière que ce soit(clic sur l'onglet, retour sur un onglet précédent pour revenir sur celui-ci) les données sont dupliquées.

<div id="d4" style="display:none;">
		 <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
function resultat()
{
	var id_personnel = document.getElementsByName("id_perso")[0].value;
	var id_frais = document.getElementsByName("mission")[0].value;
	
	function getXMLHTTP()
{
	var xhr = null;
   
	if(window.XMLHttpRequest)
	{ // Firefox et autres
		xhr = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{ // Internet Explorer
		try
		{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
	    {
			try
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e)
			{	
				// XMLHttpRequest non supporté par le navigateur
				alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest");
			}
		}
	}
	
	if(!xhr)
	{
		return false;
	}

	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
	{
		alert(xhr.responseText+" "+xhr.readyState);
		eval(xhr.responseText);
	}
	}
	return xhr;
}

	xhr_object = getXMLHTTP();
    xhr_object.open("POST", "fin_popup.php", true);
	
    xhr_object.onreadystatechange = function() {
      if(xhr_object.readyState == 4)
         eval(xhr_object.responseText);
		 //alert(xhr_object.responseText+" "+xhr_object.readyState);
   }

   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   var data = "id_frais="+id_frais+"&id_personnel="+id_personnel;
   xhr_object.send(data);
}

    // ]]>
 </script>
 <p>
 <h3>Mission N°: <span id="num_mission"></span></h3><br/>
 
 <h4>Destination : </h4> <span id="desti"></span><br/>
 <h4>Type de mission : </h4> <span id="type_m"></span><br/>
 <b>Du</b> <span id="dd"></span> <b>au</b> <span id="da"></span><br/>
 <h4>Heure de départ : </h4><span id="hd"></span> <h4>Heure d'arrivée :</h4> <span id="ha"></span><br/>
 <h4>Lieu : </h4> <span id="lieu_m"></span><br/>
 <h4>Motif : </h4><span id="motif_m"></span><br/>
 </p>
  <br/><h3>Frais</h3><br/>
 <p id="r_frais">

 
 </p>
 <br/><h3>Transport</h3><br/>
  <p id="r_trans">

 </p>
<p>
 <a href="#" alt="terminer" id="fin" onclick="
		  effect_1 ==Effect.SlideDown('d4',{duration:1.0});
		  fermepop();
		  return false;
		  " /></a>
		  
</p>
</div>


Voilà le code correspondant à l'onglet (les onglets ne sont pas indépendants) et voil le code de récupération de données fin_popup.php ^^

<?
	require 'objet/objet_connect.php';
	$bdd = new bdd_connect();
	$bdd->connect();
	
	$mission = mysql_query("SELECT * FROM mission WHERE id_frais= '". $_POST['id_frais'] . "' AND id_personnel = '". $_POST['id_personnel'] . "'") or die(mysql_error());

echo "div_cible = document.getElementById('num_mission');";
echo "texte = document.createTextNode('". $_POST['id_frais'] ."');";
echo "div_cible.appendChild(texte);";

while($resultat=mysql_fetch_array($mission))
{
	
	if($resultat['etranger'] == 0)
	{	echo "div_cible = document.getElementById('desti');";
		echo "dest = document.createTextNode('France');";
		echo "div_cible.appendChild(dest);";
	}
	else
	{
		echo "div_cible = document.getElementById('desti');";
		echo "dest = document.createTextNode('Etranger');";
		echo "div_cible.appendChild(dest);";
	}

	if($resultat['lplus'] == 0)
	{
		echo "div_cible = document.getElementById('type_m');";
		echo "type = document.createTextNode('ADN');";
		echo "div_cible.appendChild(type);";
	}
	else
	{
		echo "div_cible = document.getElementById('type_m');";
		echo "type = document.createTextNode('Leader +');";
		echo "div_cible.appendChild(type);";
	}
	 
	echo "espa = document.createTextNode(' \u00A0 ');";
	echo "espb = document.createTextNode(' \u00A0 ');";

  
	echo "div_cible = document.getElementById('dd');";
	echo "dd = document.createTextNode(' ". $resultat['date_depart'] ."');";
	echo "div_cible.appendChild(dd);";
	echo "div_cible.appendChild(espa);";
	
	echo "div_cible = document.getElementById('da');";
	echo "da = document.createTextNode(' ". $resultat['date_retour'] ."');";
	echo "div_cible.appendChild(da);";
		
	echo "div_cible = document.getElementById('hd');";
	echo "dest = document.createTextNode(' ". $resultat['heure_depart']."');";
	echo "div_cible.appendChild(dest);";
	echo "div_cible.appendChild(espb);";
		
	echo "div_cible = document.getElementById('ha');";
	echo "dest = document.createTextNode(' ". $resultat['heure_retour'] ."');";
	echo "div_cible.appendChild(dest);";
		
	echo "div_cible = document.getElementById('lieu_m');";
	echo "lieu = document.createTextNode('" . $resultat['lieu'] ."');";
	echo "div_cible.appendChild(lieu);";
		
	echo "div_cible = document.getElementById('motif_m');";
	echo "motif = document.createTextNode('" . $resultat['motif'] ."');";
	echo "div_cible.appendChild(motif);";	
	
 }
 
 $repas = mysql_query("SELECT prix FROM indemnite WHERE id_frais= '". $_POST['id_frais'] . "' AND id_personnel = '". $_POST['id_personnel'] . "' AND repas ='1'") or die(mysql_error());
 
 
 if($repas != NULL)
 {
	while($resultat=mysql_fetch_array($repas))
 {
	echo "div_cible = document.getElementById('r_frais');";
	echo "motif = document.createTextNode('Repas : " . $resultat['prix'] ." euro');";
	echo "nouveauBr = document.createElement('br');";
	echo "div_cible.appendChild(motif);";
	echo "div_cible.appendChild(nouveauBr);";
 }
 }

 $hotel = mysql_query("SELECT * FROM indemnite WHERE id_frais= '". $_POST['id_frais'] . "' AND id_personnel = '". $_POST['id_personnel'] . "' AND repas ='0'") or die(mysql_error());
 
  if($hotel != NULL)
 {
	while($resultat=mysql_fetch_array($hotel))
 {
	echo "div_cible = document.getElementById('r_frais');";
	echo "motif = document.createTextNode('Hotel : " . $resultat['prix'] ." euro');";
	echo "nouveauBr = document.createElement('br');";
	echo "div_cible.appendChild(motif);";
	echo "div_cible.appendChild(nouveauBr);";
 }
 }
 
 $transport = mysql_query("SELECT * FROM transport WHERE id_frais= '". $_POST['id_frais'] . "' AND id_personnel = '". $_POST['id_personnel'] . "'") or die(mysql_error());//requête de selection des données de la table transport pour vérification ultérieure

//Si le résultat de la  requête est différent de null 
if($transport != NULL)
{
echo "div_cible = document.getElementById('r_trans');";
//boucle 
while($resultat=mysql_fetch_array($transport))
{
	if($resultat['vehicule_perso'] == 1)
	{
		echo "vehicule = document.createTextNode('Vehicule personnel ');";
		echo "km = document.createTextNode('Nombre de km : ". $resultat['km']."');";
	}
	else
	{
		echo "vehicule = document.createTextNode('" . $resultat['transport'] ."');";
	}

	echo "prix  = document.createTextNode(' Total remboursement : ". $resultat['prix']." euro');";
	echo "nouveauBr = document.createElement('br');";
	echo "espa = document.createTextNode(' \u00A0 ');";
	echo "espb = document.createTextNode(' \u00A0 ');";

	echo "div_cible.appendChild(vehicule);";
	echo "div_cible.appendChild(espa);";
	echo "div_cible.appendChild(km);";
	echo "div_cible.appendChild(espb);";
	echo "div_cible.appendChild(prix);";
	echo "div_cible.appendChild(nouveauBr);";
}
}
	mysql_close();

?>


Je pense que le problème vient du fait qu'à chaque rechargement de l'onglet la fonction resultat() est rappelé. L'ennui est que ce rappel est obligatoire en cas de modification de données et je n'ai pas d'idée pour éviter les duplicata des données déjà récupérée :s

Merci par avance à ceux qui auront ne serait-ce qu'une idée. Smiley murf
Modifié par makata (30 May 2008 - 10:47)
Ça semble logique... tes div_cible.appendChild() sont en effet appelés à chaque fois et cumulent leurs ajouts.

Ce que tu peux faire, c'est vider tes div_cible avant de commencer à y ajouter du contenu :
dans ton php fait suivre chaque ligne du type :
echo "div_cible = document.getElementById('xxxx');";
par un ligne
echo "div_cible.innerHTML='';";
Sauf pour "r_frais" car il est dans des boucles... donc pour ne faire son "reset" qu'une seule, fait le avant de rentrer dans ces boucles...
Merci pour la solution, j'étais justement parti sur cette solution qui fonctionne bien ^^
Et justement j'étais bloqué sur r_frais mais c'est résolu.

Encore merci.
Modifié par makata (30 May 2008 - 10:06)