Executer requete en cliquant sur une cellule

**Augustule** · 13/09/2013, 18h12

Bonjour à tous,

Je développe un agenda ou les utilisateurs doivent indiquer les jours de présences.

J'ai fais un calendrier ou je liste tous les mois et ou je stocke les les données (ici les jours de présence) dans une base de données.

Je souhaiterais pouvoir faire en sorte qu'en cliquant sur la cellule d'un jour, on puisse indiquer ses jours de présence et que les in formations soient automatiquement insérées dans la base de données et appliquer une classe css spéciale sur la cellule (td).

A contrario, si l’utilisateur clique à nouveau sur la cellule du jour, on supprime l'entrée de la bdd car l'utilisateur n'est pas présent ce jour la.

J'ai essayé plusieurs portions de script jquery/ajx mais en vain.

Voici mon code

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<?php require_once('inc/bdd.php');?>
<?php require_once('inc/fonctions.php');?>
<?php require_once('classes/candidats.class.php');?>
<?php require_once('classes/date.class.php');?>
<?php include('inc/header.php');?>
 
<?php
$date = new Date();
 
/* Essai en passant par la checkbox
if(isset($_POST['days'])) :

	foreach ($_POST['days'] as $dateAdd => $value):
		if (($date->verifEvents($dateAdd,1) != true) && ($value==true))
			$date->AddEvents($dateAdd,1);
	endforeach;
endif;
*/
 
?>
 
 
 
        <?php
        $months = array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
 
        $year = date('Y');
        $events = $date->getEvents($year,1);
        $dates = $date->getAll($year);
        ?>
        <form method="post">
		<div class="periods">
 
				<div class="year"><?php echo $year; ?></div>
 
				<div class="clear"></div>
 
				<?php $dates = current($dates); ?>
 
				<?php
				$i = 0;
				foreach ($dates as $m=>$days):
				$i++;
				 ?>
 
				<div class="calendar">
 
				   <div class="month relative" id="month<?php echo $m; ?>">
				   <div class="months"><?php echo $months[$i-1]; ?></div>
				   <table>
					   <thead>
						   <tr>
							   <?php foreach ($date->days as $d): ?>
									<th><?php echo substr($d,0,3); ?></th>
							   <?php endforeach; ?>
						   </tr>
					   </thead>
					   <tbody>
						   <tr>
						   <?php $end = end($days); foreach($days as $d=>$w): ?>
 
							   <?php $time = strtotime("$year-$m-$d"); ?>
 
							   <?php if($d == 1 && $w != 1): ?>
									<td colspan="<?php echo $w-1; ?>" class="padding"></td>
							   <?php endif; ?>
 
							   <td class="<?php if($time == strtotime(date('Y-m-d'))): echo 'today'; endif; ?><?php if(isset($events[$time])): foreach($events[$time] as $e): echo ' off'; endforeach; endif; ?>">
 
									<div class="relative">
										<div class="day"><?php echo $d; ?></div>
										<div class="daycheck">
 
											<?php if($date->verifEvents("$year-$m-$d",1) == true) : ?>
												<input type="checkbox" name="days[<?php echo "$year-$m-$d"  ?>]" checked="checked"  />
											<?php else : ?>
												<input type="checkbox" name="days[<?php echo "$year-$m-$d"  ?>]"  />
											<?php endif;?>
 
										</div>
									</div>
 
							   </td>
 
							   <?php if($w == 7): ?>
								</tr><tr>								
							   <?php endif; ?>
 
						     <?php endforeach; ?>
 
						   <?php if($end != 7): ?>
 
								<td colspan="<?php echo 7-$end; ?>" class="padding"></td>
 
						   <?php endif; ?>
						   </tr>
 
					   </tbody>
				   </table>
				   </div>
				</div><!--calendar -->
				<?php endforeach; ?>
        </div>
        <div class="clear"></div>
		<div><input type="submit" name="submit" value="Envoyer" /></div>
		</form>
        <pre><?php var_dump($_POST); ?></pre>
 
 
<?php include('inc/footer.php');?>

Voila le visuel de mon calendrier si ça peut aider : http://hpics.li/fcb57f8

Merci pour votre aide.

**sabotage** · 13/09/2013, 18h35

Pour que ça marche il faudrait déjà qu'il y ait une action javascript onclick sur la cellule.

**Augustule** · 13/09/2013, 20h39

J'ai essayé mais en vain.

**sabotage** · 13/09/2013, 22h55

Montre nous ton code le mieux construit et on pourra t'aider à le finir.

**Augustule** · 14/09/2013, 11h53

Le problème c'est que je n'ai aucune idée sur la façon de faire celà.
Je suppose qu'il faut passer par jquery/ajax et que celui ci va lancer un script php qui exécute ma requete SQL.

Je suppose qu'il faudra ensuite traiter le retour.

A mon avis il faut placer un onclick sur le td :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<td class="<?php if($time == strtotime(date('Y-m-d'))): echo 'today'; endif; ?><?php if(isset($events[$time])): foreach($events[$time] as $e): echo ' off'; endforeach; endif; ?>">
	<div class="relative">
		<div class="day"><?php echo $d; ?></div>
		<div class="daycheck">
<?php if($date->verifEvents("$year-$m-$d",1) == true) : ?>
			<input type="checkbox" name="days[<?php echo "$year-$m-$d"  ?>]" checked="checked"  />
<?php else : ?>
			<input type="checkbox" name="days[<?php echo "$year-$m-$d"  ?>]"  />
<?php endif;?>
		</div>
	</div>
</td>

Je suis sur la bonne voie ?

**sabotage** · 14/09/2013, 12h03

Si tu n'as aucune idée de comment travailler avec Ajax, la première chose à faire c'est de lire des tutoriels :
http://siddh.developpez.com/articles/ajax/

Même si le sujet (listes déroulantes liées) est différent de ce que tu veux, toute la construction est la même :
Evenement Javascript -> Requête HTTP en Ajax -> Travaille sur la bdd en PHP -> Traitement du retour Ajax

**Augustule** · 14/09/2013, 13h56

Merci pour le tuto, mais je galère un peu quand même.

L'idée c'est que l'utilisateur clique sur une case, ça lance une requete qui va insérer la date choisie dans la bdd et que la cellule prenne ensuite la classe css "off" et le temps dans recharger la page si possible.

Donc j'ai ajouté un onclick sur ma cellule td, par contre comment j'y mets les variables (date cliqué et userid) que je souhaite envoyer pour être récupérées par ajax ?

Code :

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

1
2
3
4
5
<td id="cell" onclick="go()" <?php if(isset($events[$time])): foreach($events[$time] as $e): echo 'class="off"'; endforeach; endif; ?>>
	<div class="relative">
	        <div class="day"><?php echo $d; ?></div>
	</div>
</td>

Ensuite dan mon header j'ai mis (copier coller du tuto Ajax) :
Ici je dois y mettre les variables date (au format 2013-09-14) et userid (qui sera stocké en session).

Code javascript :

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
function getXhr(){
        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) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   xhr = false; 
	} 
        return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			alert(xhr.responseText);
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax-calendar.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	// ici, l'id de l'auteur
	sel = document.getElementById('auteur');
	idauteur = sel.options[sel.selectedIndex].value;
	xhr.send("idAuteur="+idauteur);
}

Et ma page ajax-calendar.php

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
<?php
require_once('classes/date.class.php');
require_once('inc/bdd.php');
 
$date = new Date();
 
$date2Add = $_GET['date2Add'];
$userid = $_GET['userid'];
 
 
if (($date->verifEvents($date2Add,$userid) != true)) : //  verifie que la date ne soit pas déjà dans la base
	$date->AddEvents($date2Add,$userid); //  ajoute la date à la bdd
endif;
 
?>

**sabotage** · 14/09/2013, 15h33

Pour la date, met la en id de chaque cellule de ton calendrier. La valeur a transmettre sera donc simplement l'id de la cellule qui a declenché l'evenement.
Pour le user, d'où vient l'info ?

**papajoker** · 14/09/2013, 15h43

salut,

tu devrais te faire des tutos ajax car tu n'as pas encore compris ajax. Si tu utilise deja jquery regarde des tutos jquery/ajax.

passe tes params à ta fonction js :

Code js :

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

go ("<?php echo $ladate.'"," '.$userid ?>")

userid pas besoin

dans ta fonction js go; passe les bons parametres a ton url ajax, et choisis bien GET ou POST (ici tu envois en post mais tu receptionnes en GET

)

dans ta fonction go avec get ecris a appel du type :

Code js :

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

xhr.open("GET","ajax-calendar.php?userid=<?php echo $userid>&date="+datepasseee_en_param_a_go,true);

dans ajax-calendar.php
fini par un

Code :

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

return '<div class="contenudelaCellDate">'.$dateEstvalideeOuNon.'</div>'

dans le fonction js go()

tu réceptionnes le result de ajax-calander.php a :

Code js :

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

1
2
3
4
5
6
if(xhr.readyState == 4 && xhr.status == 200){
//  ici en javascript tu recupere l'id d'une partie de la cellule 
// (par exemple "id2013-12-12" ) ou bien cet id peut etre passé en param de la fonction go()
// puis tu remplaces le contenu
  document.getElementById('date06-16-2013').innerHTML = leTexteResultDeAjax;
}

**Augustule** · 14/09/2013, 18h09

Envoyé par sabotage

Pour la date, met la en id de chaque cellule de ton calendrier. La valeur a transmettre sera donc simplement l'id de la cellule qui a declenché l'evenement.
Pour le user, d'où vient l'info ?

Le userid est stocké dans ma session.

**Augustule** · 14/09/2013, 21h54

Bon je patauge un peu là.
Je veux bien un peu d'aider

Ma fonction ajax qui ne risque pas de marcher à mon avis

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
			function go(){
							var xhr = getXhr()
							// On défini ce qu'on va faire quand on aura la réponse
							xhr.onreadystatechange = function(){
								// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
								if(xhr.readyState == 4 && xhr.status == 200){
									document.getElementById('+selectedDate').innerHTML = leTexteResultDeAjax;
								}
							}
 
							xhr.open("GET","ajax-calendar.php?date2Add="+selectedDate,true);
						}

La page qui contient le formulaire :

Code :

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

<td id="selectedDate" onclick="go("<?php echo $year-$m-$d;?>")" <?php if(isset($events[$time])): foreach($events[$time] as $e): echo 'class="off"'; endforeach; endif; ?>>

Merci !

**sabotage** · 14/09/2013, 21h56

selectedDate n'est pas défini dans ta fonction.

**Augustule** · 14/09/2013, 22h17

Envoyé par sabotage

selectedDate n'est pas défini dans ta fonction.

Et comment je la définie ?

**sabotage** · 15/09/2013, 00h03

Code :

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

selectedDate  = lavaleurdeladate

**papajoker** · 15/09/2013, 00h24

formulaire

Code :

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

<td id="sD<?php echo $year-$m-$d;?>"

comme ca chaque td a un id particulier

javascript

Code :

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

function go( selectedDate ){

..

Code :

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

1
2
3
var leTexteResultDeAjax= xhr.responseText;
// recupup l'id du td et remplace tout le contenu du td par chaine html returnnée par ajax
document.getElementById('sD'+selectedDate).innerHTML = leTexteResultDeAjax;

...

**Augustule** · 15/09/2013, 07h59

@papajoker
Merci pour ton aide mais je pars presque de zéro en ajax et en js.

Du coup voila ce que donne ma fonction qui ne fonctionne pas

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
			function go(selectedDate){
							var xhr = getXhr()
							var leTexteResultDeAjax= xhr.responseText;
							// On défini ce qu'on va faire quand on aura la réponse
							xhr.onreadystatechange = function(){
								// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
								if(xhr.readyState == 4 && xhr.status == 200){
									document.getElementById('sD'+selectedDate).innerHTML = leTexteResultDeAjax;
								}
							}
 
							xhr.open("GET","ajax-calendar.php?date2Add="+selectedDate,true);
			}

**sabotage** · 15/09/2013, 08h17

Tu peut être plus précis que "ça ne fonctionne pas" ?

Tu pars peut être de zéro mais tu peux debuguer aussi de ton côté :

- contrôler s'il y a des erreurs javascript dans ton navigateur
- contrôler la source HTML pour voir si les cellules ont bien leur id
- contrôler les variables javascript avec alert()
- contrôler ce qui se passe dans ajax-calendar.php (une alert() sur ton leTexteResultDeAjax peut être instructif)

**Augustule** · 15/09/2013, 08h35

Alors d’après le code source, les cellules retournent bien mes id

Code :

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

<td id="sD2013-1-5" onclick="go("2013-1-5")" >

Mon débogueur Firefox me donne comme erreur :

SyntaxError: syntax error

Dans ajax-calendar.php tout va bien à priori car j'appelle la page en direct ça fonctionne.

Le problème vient donc de ma fonction go()

**sabotage** · 15/09/2013, 09h46

Tu ne peux pas avoir les mêmes guillemets pour onclick et pour la valeur à l'intérieur :

Code :

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

onclick="go('2013-1-5')"

**Augustule** · 15/09/2013, 10h17

Bon j'avance doucement !

J'ai réussi à faire fonctionner l'appel de ma page php et l'insertion fonctionne.
Il me reste à gérer la partie retour.
Je souhaiterais qu'une fois la cellule cliquée, elle prenne une classe css spéciale.

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
			function go(selectedDate){
							var xhr = getXhr()
							var leTexteResultDeAjax= xhr.responseText;
							// On défini ce qu'on va faire quand on aura la réponse
							xhr.onreadystatechange = function(){
								// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
								if(xhr.readyState == 4 && xhr.status == 200){
									document.getElementById('sD'+selectedDate).innerHTML = leTexteResultDeAjax;
 
								}
							}
 
							xhr.open("GET","ajax-calendar.php?date2Add="+selectedDate,true);
							xhr.send();
							//alert(selectedDate);
			}

Executer requete en cliquant sur une cellule

Langage PHP

Discussions similaires

Partager

Partager