[AJAX] Actualiser des listes déroulantes sur une page qui en contient de 1 à plus de 100 ?

**chris8001** · 20/08/2014, 18h55

Bonjour,

Je cherche à rendre un peu plus dynamique une page de mon site de gestion de projet. Dans celui-ci, j'ai une liste de projets dans lesquels il est possible de choisir l'état de tel ou tel projet à travers un select (quand on ouvre la fiche du projet), le tout affiché dans un tableau.

J'ai commencé à regarder tout ça ce matin, j'avoue que je patauge un peu. J'ai trouvé un script qui fonctionne mai j'ai un problème d'id.
Je ne connais pas le nombre de listes qu'il peut y avoir et l'id des select est aléatoire du genre post_flux$id_projet.

Voici le script que j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}
 
function submitFlux(callback,var_js) {  // var_js me permet de transférer l'id du projet pour construire les noms des id de formulaire
 
	var xhr = getXMLHttpRequest();
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		}
	};
 
//declaration des v
 
	var NomIdProjet = 'post_projet_id'+ var_js; //nom des id de formulaire
	var NomIdFlux = 'post_flux_id'+ var_js;
 
	var projet_id2 = encodeURIComponent(document.getElementById(NomIdProjet).value);
	var flux_id2 = encodeURIComponent(document.getElementById(NomIdFlux).value);
	idBloc2 = 'flux'+ var_js;
 
	alert(idBloc2);
 
 
	xhr.open("POST", "modules/M_projets/vues/ajax-general.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("post_projet_id="+ projet_id2 +"&post_flux_id="+ flux_id2);
 
 
	document.getElementById(idBloc2).innerHTML = xhr.reponseText;
 
	delete(flux_id2);
	delete(projet_id2);
}
function readData(sData) {
 
	//alert(sData);
	document.getElementById(idBloc2).innerHTML = sData; // affichage après tratement de ma liste, mais pour le moemnt je n'rrive pas à transférer idBloc2
		delete(idBloc2);
 
}

Ma fonction d'affichage de lsite :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
function formListeFluxAjax($flux_id,$type,$projet_id){
	echo '	    <form method="post">';
 
	$flux_id = intval($flux_id);
	$type = intval($type);
	$projet_id = intval($projet_id);
	$readData = 'flux'.$projet_id;
 
	?>
	<script type='text/JavaScript'>
	var var_js= <?php echo($projet_id); ?>;
	</script>
	<?php
 
	if (empty($type) OR $type == 0 OR $type == ' ') {  $sql_type = ''; } else { $sql_type = 'WHERE flux_type = '.$type;  }
 
	if ($flux_id >= 1) {
		$acq_flux = mysql_query("SELECT * FROM flux WHERE flux_id = ".$flux_id."  ") or die ('Erreur : '.mysql_error()) ;	 
		$flux = mysql_fetch_assoc($acq_flux); 
		echo '<select name="flux_id" style="background:'.$flux['flux_color'].';" onChange="submitFlux(readData,var_js)" id="post_flux_id'.$projet_id.'">';
		echo '<option value="'.$flux['flux_id'].'" style="background:'.$flux['flux_color'].';">'. htmlentities(stripslashes($flux['flux_nom'])).'</option>';
	}
	else
	{
		echo '<select name="flux_id" onChange="submitFlux(readData,var_js)" id="post_flux_id'.$projet_id.'">';
	}
 
	$i =0;
	$acq_flux = mysql_query("SELECT * FROM flux ".$sql_type." ") or die ('Erreur : '.mysql_error()) ;	 
			while ( $flux = mysql_fetch_assoc($acq_flux)) { 
    echo '<option value="'.$flux['flux_id'].'" style="background:'.$flux['flux_color'].';">'. htmlentities(stripslashes($flux['flux_nom'])).'</option>';
     $i++; }
 
	echo '</select> ';
 
		echo '<input type="hidden" name="projet_id" value="'.$projet_id.'" id="post_projet_id'.$projet_id.'" />';
		echo '<input type="hidden" name="fluxIdBloc" value="flux'.$projet_id.'" id="post_fluxIdBloc'.$projet_id.'" />';
 
	echo '</form>';
	}

Elle est appelée dans ma vue :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    <tr  >
        <td style="background:<?php echo $liste['projet_type']['couleur']; ?>">	
 
		<?php echo $liste['projet_type']['nom']; ?>
 
        </td>
        <td>	<?php echo $nomSociete; ?>  </td>
        <td>	<?php echo $liste['projet_nom']; ?></td>
 
        <td > <div id="flux<?php echo $liste['projet_id'] ?>"> // div pour réafficher le contenu du ficher de traitement
		<?php echo formListeFluxAjax($liste['flux']['id'],2,$liste['projet_id']); ?>
        </div>
        </td>
 
 
        <td> 	<?php echo $liste['actions']; ?></td>
        <?php if ( $_SESSION['niv_autorisation'] == 1) { ?>
        <td> 	<?php echo $liste['projet_cout']; ?></td>
        <?php } ?>
        <td> 	<?php echo $liste['projet_tps_passe']; ?></td>
        <td> 	<?php echo $liste['flux']['avcmt']; ?> % </td>
    </tr>

Pour résumer, j'ai une liste de projets dans un tableau, je souhaite ajouter un select pour changer l'état d'avancement du projet directement dans mon tableau. Je ne connais pas le nombre de projets ou les id, tout est dynamique et les champs de mon formulaire sont de ce type : post_projet_id$id_projet, pour avoir des id uniques.

Si quelqu'un a une "ID".

Sinon peut être une autre solution sans devoir réactualiser le page quand il y a près de 200 lignes, c'est un peu lourd.

**devyan** · 21/08/2014, 15h51

Bonjour,

Le sujet de ton message fait un peu peur mais je pense avoir compris que tu as un tableau avec une liste déroulante dans chaque ligne.
Cependant, la liste des options de chaque liste déroulante reste la même, seule la valeur sélectionnée dépend de chaque ligne.

Ensuite, avant de pouvoir aller plus avant pourrais-tu mettre le code HTML généré au lieu de ton code PHP ?

devYan.

**chris8001** · 21/08/2014, 16h10

Dit comme sa ça à l'aire tout bête = mais oui c'est bien ça !

voici un extrait du code HTML généré

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<table class="Table" cellspacing="0">
	<tr class="TableEntete">
        <td>	Type</td>
        <td>	Nom soci&eacute;t&eacute;</td>
        <td>	Nom projet</td>
        <td>	Flux</td>
        <td>	Actions</td>
        <td>	Temps</td>
        <td>	Avancement </td>
  </tr>
 
  <tr>
        <td style="background:#e69803">	WEB  </td>
        <td>	<a class="various3" href="index2.php?page=Contacts&amp;vue=modif&amp;id_traitement=273" ><img src="template/img/voire.png" style="width:20px; height:20px;" align="midle" ></a>Camping </td>
        <td>	<a href="index2.php?page=Projets&amp;vue=modif&amp;id_traitement=283"><img src="template/img/modifier.png" style="width:20px; height:20px;" /></a>site web</td>
        <td > 
            <div id="flux283">
            <form method="post">	
						<script type='text/JavaScript'>
                      var var_js= 283;
                      </script>
                <select name="flux_id" style="background:#999999;" onChange="submitFlux(readData,var_js)" id="post_flux_id283">
                    <option value="6" style="background:#999999;">Maquette envoy&eacute;e</option>
                    <option value="4" style="background:#FFF;">En attente</option>
                    <option value="5" style="background:#FF0000;">A faire</option>
                    <option value="6" style="background:#999999;">Maquette envoy&eacute;e</option>
                    <option value="7" style="background:#FF00FF;">Correction a faire</option>
                    <option value="8" style="background:#00FF00;">Valid&eacute;</option>
                    <option value="9" style="background:#FFF;">Envoy&eacute; &agrave; imprimer</option>
                </select> 
 
                <input type="hidden" name="projet_id" value="283" id="post_projet_id283" />
                <input type="hidden" name="fluxIdBloc" value="flux283" id="post_fluxIdBloc283" />
            </form>        
            </div>
        </td>
        <td> 	
            <a href="index2.php?page=Projets&amp;vue=publication&amp;id_traitement=283&amp;publication=4"><img src="template/img/supprimer.gif" width="20" height="20" /></a>
            <a href="index2.php?page=Projets&amp;vue=publication&amp;id_traitement=283&amp;publication=2"><img src="template/img/valider.gif" width="20" height="20" /></a>
            <a class="various3" href="modules/M_notifications/controleurs/general.php?type=projet&amp;id_traitement=283"><img src="template/img/mail1.png" width="30" height="20" /></a>
        </td>
        <td> 	3+1</td>
        <td> 	60 % </td>
    </tr>
    <tr  > [...] </tr>
 
   	<tr class="TablePied">
        <td colspan="6"></td>
        <td colspan="3" ></td>
    </tr>
</table>

Merci

**devyan** · 21/08/2014, 16h50

Ta mise à jour AJAX porte sur une ligne à la fois ou sur tout le tableau ?

Pour la mise à jour d'une ligne, toutes les informations changent ou seulement l'état (la valeur de la liste déroulante) ?

**chris8001** · 21/08/2014, 16h57

la mise à jour porterait que sur une liste déroulante (et non sur toutes les infos de la ligne) , et seulement sur l'état (elle passerait par exemple de "à imprimé" à "à facturer" ...)

**devyan** · 21/08/2014, 17h10

Envoyé par chris8001

la mise à jour porterait que sur une liste déroulante (et non sur toutes les infos de la ligne) , et seulement sur l'état (elle passerait par exemple de "à imprimé" à "à facturer" ...)

Donc si la requête AJAX demande l'état d'une seule ligne :
tu envoies l'identifiant de de la ligne (enfin celui du projet) et tu auras en réponse la valeur de l'état (le value de l'option à sélectionner).

devYan.

**chris8001** · 22/08/2014, 09h20

Merci pour cette réponse,
Mais l' "ID Bloc", je ne connait pas l'ID de la ligne à l’avance, mon script a besoin de cette idée pour faire les traitements.
Peut être as tu une piste pour créer un autre script ?

**chris8001** · 22/08/2014, 09h44

je viens de trouver comment adapter mon script,
mon problème principal était les id aléatoires des listes déroulantes (ou des lignes, si on en a un on a les autres),
j'ai d'abord créé une variable javaScript qui comporte le numéro de l'id du projet (unique) que je transfert à ma fonction, mai elle portait le même nom pour toutes les listes, je l'ai donc rendu unique en y ajoutant l'id du projet.
Une fois cette variable dans ma fonction je peux retrouver les id unique des champs de formulaire.
je déclare cette variable en global pour la récupérer dans ma deuxième fonction et le delete ensuite.

je crée la variable unique qui transfert l'id du projet/de la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
	<script type='text/JavaScript'>
	var var_js<?php echo($projet_id); ?>= <?php echo($projet_id); ?>;
	</script>

je l'envoie dans ma fonction javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
onChange="submitFlux(readData,var_js'.$projet_id.')"

je défini ma variable globale pour la récuprérer dans ma deuxième fonction (pour afficher le traitmeent du fichier php appelé)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
	idBloc2 = 'flux'+ var_js;

vu comme ça ça à l'aire compliqué, mais ça fonctionne,
si quelqu'un a malgré tout quelque chose de plus simple

Merci

**devyan** · 22/08/2014, 10h46

Bonjour,

Encore un fois merci de ne pas mettre de code PHP mais HTML généré ...

Comme tu construis dynamiquement l'appel de l'événement onChange tu n'as pas besoin d'une variable. Tu peux mettre directement la valeur.

onChange="submitFlux(readData, '$projet_id')"

devYan.

**chris8001** · 25/08/2014, 15h01

Merci pour ces réponses ça fonctionne sans le nom de variable unique, en mettant directement la valeur ça fonctionne aussi.
Pourquoi faire simple quand on peut faire compliquer

[AJAX] Actualiser des listes déroulantes sur une page qui en contient de 1 à plus de 100 ?

AJAX

Discussions similaires

Partager

Partager