[AJAX] Enregistrement checkbox et affichage couleurs

Version imprimable

29/04/2009, 22h41
david33b

[AJAX] Enregistrement checkbox et affichage couleurs

Bonjour,

je ne m'y connais pas bien en PHP ou javascript.
Voila.
j'ai une page avec déja deux submit, un affichant une liste de projet situé en haut,
le second en bas servant à écrire et envoyer une nouvelle tache.
Les taches une fois émises apparaissent dans un cadre central
Voici un rapide schéma pour mieux comprendre :

liste projets à selectionner
-------------------------------------------

taches 1 bouton A faire bouton en cours bouton achevé Bouton Save
taches 2 bouton A faire bouton en cours bouton achevé Bouton Save
taches 3 bouton A faire bouton en cours bouton achevé Bouton Save
-----------------------------------

Text area [...........................] Bouton Envoyer

Ce que je souhaiterais faire, c'est que l'on puisse cocher le bouton 1 A faire et que la tache sélectionnée s'enregistre dans un champ disons taches_etat mais que le texte enregistré Afaire devienne rouge.

De même pour les bouton En cours et Achevé qui enregistrent les taches dans taches_etat et les font apparaitre en d'autres couleurs.

Cela est-il possible sachant que j'ai déja deux submit dans ma page?
Si vous pouviez m'aider. merci

Piste pour la suite

Voilaà le type de code que tu peux adapter ou piocher selon tes besoins:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
    <form>
    <div>
    tache 1 <button onclick="this.form.taches_etat.value += ' tache1';
                             this.style.color='red'">A Faire</button><br>
 
    tache 2 <button onclick="this.form.taches_etat.value += ' tache2';
                             this.style.color='red'">A Faire</button><br>
 
    <input type="text" name="taches_etat" value="" />
    </form>

ERE

02/05/2009, 19h51
david33b

enregistrer et aficher l'état d'une checkbox cochée
Bonjour, merci de ta réponse mais j'aimerais procéder de la sorte.
EN fait, je souhaiterais que sur mon formulaire, (sans passer par un submit) lorsque l'utilisateur coche une checkbox (qui fait alors changer de couleur la ligne correspondante) , cet état s'enregistre ainsi que la checkbox cochée.

voici mon code PHP

Code:

echo'<td><input type="checkbox" name="afaire[]" onchange="rouge(this);" /></td>';

et mon code javascript pour la couleur
Code:

1 2 3 4 5 6 function rouge(rouge) { if ( rouge.checked ) rouge.parentNode.parentNode.style.color="#bc1f1f"; else rouge.parentNode.parentNode.style.color="white"; }
ca doit être possible tout de même sans passer par la base de données,
une fonction javascript qui retourne sur la page l'état enregistré..

merci!

Salut,
Utilise onclick à la place de onchange pour le changement de la couleur local.
Pour l'enregistrement utilise une requête AJAX.
Code:

1 2 3 4 5 6 7 8 9 10 function rouge(rouge) { if(rouge.checked) {rouge.parentNode.parentNode.style.color="#bc1f1f"; //enregistrement via AJAX ICI } else{rouge.parentNode.parentNode.style.color="white"; //enregistrement via AJAX ICI } }

06/05/2009, 02h34
david33b

ajax enregistrement

Bonjour, je te remercie pour ta réponse.
Je vois qu'il faut absolument que j'utilise Ajax..
le problème c'est que je n'y connais rien..
je pensais que je pouvais peut-être passer par un cookie en php pour éviter de recharger la page et conserver les données mais je n'obtiens rien ..

Désolé de te demander ca mais pourrais-tu m'en dire davantage sur la fonction AJAX pour enregistrer ce type de requête??

merci encore et désolé je suis vraiment débutant en PHP alors en Ajax... :(
Merci beaucoup..

Code:

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
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}
function savecolor(couleur,id) 
{
	var xhr=createXHR();
			xhr.open("POST", "page.php",true);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function()
			{ 
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
				{
					alert(xmlhttp.responseText);
				}
			}
			var donnee='couleur='+couleur+'&id='+id;
			xhr.send(donnee); 
}
function rouge(rouge,id)
{
	if(rouge.checked)
{rouge.parentNode.parentNode.style.color="#bc1f1f";
	savecolor('#bc1f1f',id);
}
	else{rouge.parentNode.parentNode.style.color="white";
	savecolor('white',id);
}
}

J'ai mis id en paramètre si la ligne modifiée en a une.
Du coté php

Code:

1
2
3
4
5
6
7
<?php
	if(isset($_POST['couleur']) && isset($_POST['id']))
	{
		//La requete pour l'enregistrement ici;
		echo'Couleur enregistré';
	}
?>

problème résolu

Merci beaucoup de t'être penché sur mon problème.
finalement, je ne me suis servi que de php.plus besoin d'ajax ni de javascript.
Tout marche impec.
Je poste ma page si cela peut aider quelqu'un.
Merci encore.

// Si au moins un checkbox est coché

Code:

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
if(isset($_POST['tache1'])){ 
	$nb_taches = $_POST['ligne']; // On récupère le nombre de tâches du projets, soit le nombre d'update qu'on aura à faire
	$modif_id = ""; // création d'une variable vide
	$modif_tache = "";
	for($i=1; $i<=$nb_taches; $i++){ // tant qu'on a des updates à faire
		$tache = 'tache'.$i;
		$id = 'id'.$i;
		foreach($_POST as $key => $value){ // on parcourt toutes les variables $_POST pour récupérer les valeurs qui nous intéressent
			if($key == $tache) $modif_tache = $value;
			if($key == $id) $modif_id = $value;
		}
		$requete_modification = "UPDATE taches SET taches_etat='".$modif_tache."' WHERE taches_id='".$modif_id."'";
		$execution_modification = mysql_query($requete_modification);
	}
}
?>
 
<form name="choix_projet" method="post" action="suivi_projets.php">
			<select name="projet" onchange=" choix_projet.submit();">
			<option value="">Choisissez un projet</option> <!-- il faut cette ligne pour avoir obligatoirement un changement -->
				<?php
                                        $requete_projets = "SELECT * FROM projets ORDER BY projets_num";
                                        $execution_projets = mysql_query($requete_projets);
                                                while($liste_projets = mysql_fetch_array($execution_projets)){
                                                        // Liste déroulante
                                                        $projet_num = $liste_projets['projets_num'];
                                                        $projet_description = $liste_projets['projets_description'];
                                                                if($projet_num == $projet_selectionne){
                                                                        echo '<option value="'.$projet_num.'"  selected="selected">'.$projet_num.' - '.$projet_description.'</option>'; }
                                                                else {
                                                                        echo '<option value="'.$projet_num.'">'.$projet_num.' - '.$projet_description.'</option>'; }
                                                }
                                ?>
			</select>
			<p></p></td></tr>
	</table>
 
<!-- Si un projet est sélectionné on crée le tableau d'affichage des tâches -->
<?php if($projet_selectionne != ""){?><table> 
	<tr>
		<td class="big"><p class="action">TACHES DU PROJET</p></td>
		<td><p class="action" style="color:#bc1f1f">A faire</p></td>
		<td><p class="action" style="color:#fcbe37">En cours</p></td>
		<td><p class="action" style="color:#4cc34f">Achevé</p></td>
	</tr>
	<?php
		$ligne = 0;
		$requete_taches = "SELECT * FROM taches WHERE projets_id = '".$projet_selectionne."'";
		$execution_taches = mysql_query($requete_taches);
		while($liste_taches = mysql_fetch_array($execution_taches)){
			$ligne++;
 
			// Description de la tâche et choix de la couleur
			switch ($liste_taches['taches_etat']){
			case "afaire": echo '<tr><td style="color:#bc1f1f">'.$liste_taches['taches_description'].'</td>'; break;
			case "encours": echo '<tr><td style="color:#fcbe37">'.$liste_taches['taches_description'].'</td>'; break;
			case "acheve": echo '<tr><td style="color:#4cc34f">'.$liste_taches['taches_description'].'</td>'; break;
			default: echo '<tr><td>'.$liste_taches['taches_description'].'</td>';
			}
 
			// A faire
			echo '<td><input type="radio" name="tache'.$ligne.'" value="afaire" id="afaire" ';
			if($liste_taches['taches_etat'] == "afaire") { echo 'checked="checked"'; }
			echo '/></td>';
 
			// En cours
			echo '<td><input type="radio" name="tache'.$ligne.'" value="encours" id="encours" ';
			if($liste_taches['taches_etat'] == "encours") { echo 'checked="checked"'; }
			echo '/></td>';
 
			// Achevé
			echo '<td><input type="radio" name="tache'.$ligne.'" value="acheve" id="acheve" ';
			if($liste_taches['taches_etat'] == "acheve") { echo 'checked="checked"'; }
			echo '/></td>';
 
			// Champ caché contenant l'identifiant de la tache à modifier
			echo '<input type="hidden" name="id'.$ligne.'" value="'.$liste_taches['taches_id'].'" /></tr>';
		}
		// Champ caché contenant le nombre de tâches du projet
		echo '<input type="hidden" name="ligne" value="'.$ligne.'" />';
	?>
</table><?php } // Fin du if ?>
	<p align="center"><input type="submit" value="Save" /></p>