Affichage 2 résultats de 2 requêtes AJAX dans la même div

Sujet résolu

8 décembre 2011 à 15:12:21

Bonjour !

J'ai un problème d'affichage avec ma fonction js, voici le code :

idP = '100';
actionP = 'verifier';

function verifier_comment(idP,actionP)
{
    // récupération des cases cochées pour le formulaire nommé checkSvn :
    var selection = '';
    if(document.form_tableau.checkSvn.length == undefined)
    {
	if (document.form_tableau.checkSvn.checked == true)
	{
	    selection = selection + document.form_tableau.checkSvn.value;
	}
    }
	
    if(document.form_tableau.checkSvn.length != undefined)
    {
	for (i = 0; i<document.form_tableau.checkSvn.length; i++) 
        {
            if (document.form_tableau.checkSvn[i].checked) 
            {
                selection = selection + document.form_tableau.checkSvn[i].value + "-";
            }
       	}
    }
	
    // récupération des cases cochées pour le formulaire nommé checkBdd :
    var selection2 = '';
    if(document.form_tableau.checkBdd.length == undefined)
    {
	if (document.form_tableau.checkBdd.checked == true)
	{
		selection2 = selection2 + document.form_tableau.checkBdd.value;
	}
    }
	
    if(document.form_tableau.checkBdd.length != undefined)
    {
	for (i = 0; i<document.form_tableau.checkBdd.length; i++) 
       	{
            if (document.form_tableau.checkBdd[i].checked) 
            {
                selection2 = selection2 + document.form_tableau.checkBdd[i].value + "-";
            }
       	}
    }
	
    // on compte les tirets pour savoir combien de cases sont cochées
    var nb_tirets = substr_count(selection,'-');
	
    var arg = '';
	
    if(nb_tirets == 1)
    {
	arg = 'projsvn';
    }
	
    if(nb_tirets > 1)
    {
	arg = 'tout';
    }
	
    // vérification si selection ou selection2 sont vides :
    if(selection == '' && selection2 == '')
    {
        // Message d'erreur dans la div prévue pour ça
	document.getElementById('errorAjout').innerHTML = 'Veuillez cocher au moins un projet ou une base.';
    }

    // Message d'attente en attendant les résultats (qui sont respectivement récupérés dans if(selection…) et dans if(selection2…) plus bas)
    if(selection != '' || selection2 != '')
    {
	document.getElementById('traitement').innerHTML = '<span style="color:#2E9AFE;">Veuillez patienter… </span><img src="../svn_imgs/patienter.gif" alt="patientez" style="width:30px; height:30px; margin-left:30px; margin-top:20px;" />';
    }

    // on fait d'abord le traitement concernant la variable SELECTION
    if(selection != '')
    {
        // requete ajax
        var xhr = nav_AJAX();
        xhr.open("POST", "../parse.php", true); // on appelle la page qui récupère les résultats (pour le formulaire checkSvn)
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=utf-8');
		
	if(arg == 'tout')
	{ // si plusieurs cases checkSvn cochées
		xhr.send("proj="+idP+"&idSvn="+selection);
	}
	else
	{ // si une seule case checkSvn cochée
		// si on trouve un "-" dans la var selection on l'enleve sinon on laisse comme ça
		if(selection.substr(-1) == '-')
		{
			selection = selection.substr(0,(selection.length-1));
		}
		xhr.send("projsvn="+idP+"&idSvn="+selection);
	}
		
	xhr.onreadystatechange = function(){
	    if(xhr.readyState == 4)
	    {
    		if(xhr.status == 200)
    		{
        		var reponse2 = xhr.responseText; 
        		if(reponse2 != '')
        		{ 
        			if(idP!='')
				{
				        // PREMIERE REPONSE par rapport à "selection" :
					document.getElementById('traitement').innerHTML = '<br /><div id="cadreVerif" style="border:1px solid #aaa; height:160px; width:999px; background-color:#000; overflow:auto; margin-bottom:10px;">'+xhr.responseText+'</div>';
				}
			}
			else
			{ 
				document.getElementById('traitement').innerHTML = 'Pas de réponse.';
			}
       	        }
       	        else
       	        {
                    document.getElementById('traitement').innerHTML = "Pb AJAX";
	        }
            }
        }
    }

    // Traitement concernant la variable SELECTION2
    if(selection2 != '')
    {
        // Requete ajax
        var xhr = nav_AJAX();
	xhr.open("POST", "../postgresComment.php", true); // on appelle la page qui récupère les résultats (pour le formulaire checkBdd)
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=utf-8');
	if(arg == 'tout')
	{ // si plusieurs cases checkBdd cochées
		xhr.send("proj="+idP+"&bddId="+selection2+"&action=verifier");
	}
	else
	{ // si une seule case checkBdd cochée
		// si on trouve un "-" dans la var selection on l'enleve sinon on laisse comme ça
		if(selection2.substr(-1) == '-')
		{
			selection2 = selection2.substr(0,(selection2.length-1));
		}
		xhr.send("proj="+idP+"&bddId="+selection2+"&action=verifier");
	}
		
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4)
		{
		 	if(xhr.status == 200)
		    	{
		       		var reponse2 = xhr.responseText; 
		        	if(reponse2.reponse!='')
		        	{ 
					if(idP!='')
					{
						if(actionP == 'verifier')
						{
	                                            if(selection != '')
						    { // SI DEJA PREMIERE REPONSE dans traitement, 
						      // et donc dans cadreVerif qu'on a déjà créé :
							document.getElementById('cadreVerif').innerHTML += '<br />'+xhr.responseText;
						    }
					 	    else
						    { // sinon on y met seulement la 2eme réponse : 
							document.getElementById('traitement').innerHTML = '<br /><div id="cadreVerif" style="border:1px solid #aaa; height:160px; width:999px; background-color:#000; overflow:auto; margin-bottom:10px;">'+xhr.responseText+'</div>';
						    }
	                                       }        
	                	        }
				}
				else
				{ 
					document.getElementById('traitement').innerHTML = 'Pas de réponse.';
				}
		        }
		        else
		        {
		           	document.getElementById('traitement').innerHTML = "Pb AJAX";
		        }
		   }
	}
    }
}

Je souhaite afficher les résultats récupérés par la 1ère requete ajax suivie des résultats de la 2eme, dans la div "traitement".

Mais ça ne marche pas, ça reste sur le message d'attente si je traite "selection" ET "selection2"…

Par contre si je traite seulement "selection", ça s'affiche bien pas de pb, et aussi "selection2" tout seul ça fonctionne pareillement…

Alors je suis bloquée depuis un long moment pour arriver à afficher les deux résultats dans la div "traitement"… Auriez-vous une idée ?

Cordialement,
Ginger

Kyle Katarn

8 décembre 2011 à 15:46:49

Ben oui tu fais document.getElementById('traitement').innerHTML donc le contenu est remplacé.

Tu peux faire document.getElementById('traitement').innerHTML+= pour ajouter le contenu.

Mais le plus propres reste encore de faire deux div à l'intérieur du div traitement.

Holowar | Carbon | Pug for PHP

ginger4957

8 décembre 2011 à 16:03:55

Merci pour ta réponse,

Je fais déjà le innerHTML =+ à la ligne 161, et même en rajoutant une deuxieme div comme ceci :

Le deuxieme résultat remplace le premier, et en plus garde le message d'attente alors que je ne le souhaite pas… Je vais essayer autre chose d'autre je reviens

EDIT

J'ai déjà modifié l'affichage du message d'attente, en créant une div spéciale pour ça :

<!-- div des traitements -->
<div id="traitement"></div>
	
<!-- div attente -->
<div id="attente" style="display:none;">
	<span style="color:#2E9AFE;">Veuillez patienter… </span>
	<img src="../svn_imgs/patienter.gif" alt="patientez" style="width:30px; height:30px; margin-left:30px; margin-top:20px;">
</div>

Ca marche bien, maintenant j'ai pas encore réussi à afficher les deux réponses dans la div traitement, c'est en cours de réalisation :s

Du coup pour ce qui a changé, j'ai remplacé la ligne 73 par :

document.getElementById('attente').style.display = 'block';

Et un rajout aux lignes 108 et 158 :

document.getElementById('attente').style.display = 'none';

PS : le =+ est une erreur de frappe

Cordialement

Kyle Katarn

8 décembre 2011 à 17:23:46

innerHTML =+ et innerHTML += c'est pas la même chose.

Holowar | Carbon | Pug for PHP

ginger4957

12 décembre 2011 à 11:44:03

Salut

Je ne ocmprend toujorus pas pourquoi ça ne marche pas

J'ai essayé de définir une variable à la ligne 75 :

var traitement = document.getElementById('traitement').innerHTML;

Puis ensuite je remplis cette variable, mais ça ne garde pas en mémoire la premiere reponse quand je passe aussi dans la deuxieme (selection puis selection2) alors que ça fonctionne pour selection et selection2 séparément…

ginger4957

15 décembre 2011 à 9:54:50

Salut

Est-ce qu'on peut appeler plusieurs requetes ajax xhr à la suite ? C'est peutetre pour ça que ça ne marche pas ?

Kyle Katarn

15 décembre 2011 à 10:13:06

Si tu utilises des objets XHR différents tu peux. Dans ton cas normalement oui. Pour t'en convaincre, remplaces les innerHTML par des alert.

Holowar | Carbon | Pug for PHP

ginger4957

15 décembre 2011 à 11:04:49

Merci pour ta réponse Kyle Katarn

J'ai modifié mon code en plusieurs fonctions pour que les requetes s'executent vraiment l'une après l'autre, et ça marche !

idP = '100';
actionP = 'verifier';
// Premiere fonction qui recupere les cases cochées et appelle les autres fonctions selon les contenus des variables selection et selection2
function verifier_comment(idP,actionP)
{
    // récupération des cases cochées pour le formulaire nommé checkSvn :
    var selection = '';
    if(document.form_tableau.checkSvn.length == undefined)
    {
	if (document.form_tableau.checkSvn.checked == true)
	{
	    selection = selection + document.form_tableau.checkSvn.value;
	}
    }
	
    if(document.form_tableau.checkSvn.length != undefined)
    {
	for (i = 0; i<document.form_tableau.checkSvn.length; i++) 
        {
            if (document.form_tableau.checkSvn[i].checked) 
            {
                selection = selection + document.form_tableau.checkSvn[i].value + "-";
            }
       	}
    }
	
    // récupération des cases cochées pour le formulaire nommé checkBdd :
    var selection2 = '';
    if(document.form_tableau.checkBdd.length == undefined)
    {
	if (document.form_tableau.checkBdd.checked == true)
	{
		selection2 = selection2 + document.form_tableau.checkBdd.value;
	}
    }
	
    if(document.form_tableau.checkBdd.length != undefined)
    {
	for (i = 0; i<document.form_tableau.checkBdd.length; i++) 
       	{
            if (document.form_tableau.checkBdd[i].checked) 
            {
                selection2 = selection2 + document.form_tableau.checkBdd[i].value + "-";
            }
       	}
    }
	
    // on compte les tirets pour savoir combien de cases sont cochées
    var nb_tirets = substr_count(selection,'-');
	
    var arg = '';
	
    if(nb_tirets == 1)
    {
	arg = 'projsvn';
    }
	
    if(nb_tirets > 1)
    {
	arg = 'tout';
    }
    
    if(selection != '') verif_svn(idP,actionP,selection,selection2,arg);
    if(selection2 != '' && selection == '') verif_bdd(idP,actionP,selection2,arg,'no');
}


// Deuxieme fonction qui traite les cases a cocher checkSvn
function verif_svn(idP,actionP,selectionP,selection2P,argP)
{
	// vérification si selection ou selection2 sont vides :
    if(selectionP == '' && selection2P == '')
	{
		// Message d'erreur dans la div prévue pour ça
		document.getElementById('errorAjout').style.color = '#FF0000';
		document.getElementById('errorAjout').innerHTML = 'Veuillez cocher au moins un projet ou une base.';
	}
	else
	{
		// désactivation de tous les boutons
	    desactiver_btn();
		// Message d'attente en attendant les résultats (voir plus bas)
		document.getElementById('attente').style.display = 'block';
	}
	
    // on fait d'abord le traitement concernant la variable SELECTION
    if(selectionP != '')
	{
		// requete ajax
        var xhr = null;
        xhr = nav_AJAX();
        xhr.open("POST", "../parse.php", true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=utf-8');
		
		if(argP == 'tout')
		{ // si plusieurs cases checkSvn cochées
			xhr.send("proj="+idP+"&idSvn="+selectionP);
		}
		else
		{ // si une seul case checkSvn cochée
			// si on trouve un "-" dans la var selection on l'enleve sinon on laisse comme ça
			if(selectionP.substr(-1) == '-')
			{
				selectionP = selectionP.substr(0,(selectionP.length-1));
			}
			xhr.send("projsvn="+idP+"&idSvn="+selectionP);
		}
		
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4)
			{
	    		if(xhr.status == 200)
	    		{
	        		var reponse2 = xhr.responseText;
	        		if(reponse2 != '')
	        		{ 
	        			if(idP!='')
						{
							ok = 'yes';
							
							var reponse10 = xhr.responseText;
							
							document.getElementById('attente').style.display = 'none';
							
							document.getElementById('traitement').innerHTML = '<br /><div id="cadreVerif" style="border:1px solid #aaa; height:160px; width:999px; background-color:#000; overflow:auto; margin-bottom:10px;">'+reponse10+'</div>';
							
							exp = new RegExp("Ce fichier manque de commentaires","g");
							
							// Si ca renvoit true on indique au projet vérifié de ne pas etre affiché dans le  select de génération des projets
							indicEnv = 0;
							if(exp.test(xhr.responseText))
							{ 
								indicEnv = 1;
							}
							activer_btn();
							
							if(selection2P != '') verif_bdd(idP,actionP,selection2P,argP,'yes');
							
						}
					}
					else
					{ 
						document.getElementById('traitement').innerHTML = 'Pas de réponse.';
					}
	        	}
	        	else
	        	{
	            	 document.getElementById('traitement').innerHTML = "Pb AJAX";
	        	}
		    }
	    }
    }
}

// Troisieme fonction qui traite des cases a cocher checkBdd
function verif_bdd(idP,actionP,selectionP,argP,okP)
{
	// vérification si selection ou selection2 sont vides :
    if(selectionP == '' && selection2P == '')
	{
		// Message d'erreur dans la div prévue pour ça
		document.getElementById('errorAjout').style.color = '#FF0000';
		document.getElementById('errorAjout').innerHTML = 'Veuillez cocher au moins un projet ou une base.';
	}
	else
	{
		// désactivation de tous les boutons
	    desactiver_btn();
		// Message d'attente en attendant les résultats (voir plus bas)
		document.getElementById('attente').style.display = 'block';
	}
	// Requete ajax
       var xhr = null;
       var xhr = nav_AJAX();
	xhr.open("POST", "../postgresComment.php", true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=utf-8');
	if(argP == 'tout')
	{ // si plusieurs cases checkBdd cochées
		xhr.send("proj="+idP+"&bddId="+selectionP+"&action=verifier");
	}
	else
	{ // si une seule case checkBdd cochée
		// si on trouve un "-" dans la var selection on l'enleve sinon on laisse comme ça
		if(selectionP.substr(-1) == '-')
		{
			selectionP = selectionP.substr(0,(selectionP.length-1));
		}
		xhr.send("proj="+idP+"&bddId="+selectionP+"&action=verifier");
	}
	
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4)
		{
	   		if(xhr.status == 200)
	    	{
	       		var reponse2 = xhr.responseText; 
	       		
	        	if(reponse2.reponse!='')
	        	{ 
					if(idP!='')
					{
						if(actionP == 'generer')
						{
	        				generer_la_doc(idP);
						}
						
						if(actionP == 'verifier')
						{
							document.getElementById('attente').style.display = 'none';
							
							var reponse11 = xhr.responseText;
							
							if(okP == 'yes')
							{
								document.getElementById('cadreVerif').innerHTML += '<br />'+reponse11;
							}
							else
							{
								document.getElementById('traitement').innerHTML = '<br /><div id="cadreVerif" style="border:1px solid #aaa; height:160px; width:999px; background-color:#000; overflow:auto; margin-bottom:10px;">'+reponse11+'</div>';
							}
                        }
                        activer_btn();
                	}
				}
				else
				{ 
					document.getElementById('traitement').innerHTML = 'Pas de réponse.';
				}
	        }
	        else
	        {
	           	document.getElementById('traitement').innerHTML = "Pb AJAX";
	        }
	   	}
	}
}

Merci

Cordialement