[AJAX] Afficher un formulaire à partir d'un événement

Bonjour amis développeur,

Je me lance dans un projet de réservation de salle/véhicule pour mon entreprise.

Pour le moment je commence le php et mysql donc j'y vais doucement, j'ai trouvé un calendrier modulable(fullcalendar) à la façon de l'agenda google pour les événements. Ma bdd pour les événements est en accord avec le calendrier. Ce que je cherche à faire est d'intégrer un formulaire en html pour la réservation à tel jour.

Voici mon code(entier) :

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
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
 
	$(document).ready(function() {
 
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
 
		var calendar = $('#calendar').fullCalendar({
		header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: "http://localhost/fullcalendar/events.php",
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
			 var title = prompt('Event Title:');
			 if (title) {
			 start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
			 end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
			 $.ajax({
			 url: 'http://localhost/fullcalendar/add_events.php',
			 data: 'title='+ title+'&start='+ start +'&end='+ end ,
			 type: "POST",
			 success: function(json) {
			 alert('OK');
			 }
			 });
			 calendar.fullCalendar('renderEvent',
			 {
			 title: title,
			 start: start,
			 end: end,
			 allDay: allDay
			 },
			 true
			 );
			 }
			 calendar.fullCalendar('unselect');
			}
 
		});
 
	});
 
</script>
<style>
 
	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
 
	#calendar {
		width: 900px;
		margin: 0 auto;
		}
 
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>

et voici la partie evenement :

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
		var calendar = $('#calendar').fullCalendar({
		header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: "http://localhost/fullcalendar/events.php",
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
			 var title = prompt('Nom de l evenement :');
			 if (title) {
			 start = $.fullCalendar.formatDate(start, "dd-MM-yyyy HH:mm:ss");
			 end = $.fullCalendar.formatDate(end, "dd-MM-yyyy HH:mm:ss");
			 //envoie des données title, start et end à la bdd
			 $.ajax({
			 url: 'http://localhost/fullcalendar/add_events.php',
			 data: 'title='+ title+'&start='+ start +'&end='+ end ,
			 type: "POST",
			 success: function(json) {
			 alert('OK');
			 }
			 });
			 calendar.fullCalendar('renderEvent',
			 {
			 title: title,
			 start: start,
			 end: end,
			 allDay: allDay
			 },
			 true
			 );
			 }
			 calendar.fullCalendar('unselect');
			}
 
		});

j'ai créé un fomulaire :

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
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
</head>
 
<FORM method=post action="cgi-bin/script.pl">
Réservation salle de réunion :
<TABLE BORDER=0>
<TR>
	<TD>Nom</TD>
	<TD>
	<INPUT type=text name="nom">
	</TD>
</TR>
 
<TR>
	<TD>Prénom</TD>
	<TD>
	<INPUT type=text name="prenom">
	</TD>
</TR>
 
<TR>
	<TD>Choix de la salle</TD>
	<TD>
	<SELECT name="Nom de salle">
		<OPTION VALUE="vide"></OPTION>
		<OPTION VALUE="brognard">Brognard</OPTION>
		<OPTION VALUE="malsaucy">Malsaucy</OPTION>
		<OPTION VALUE="r18">R18</OPTION>
		<OPTION VALUE="r19">R19</OPTION>
	</SELECT>
	</TD>
</TR>
 
<TR>
	<TD>Commentaires</TD>
	<TD>
	<TEXTAREA rows="3" name="commentaires">
	</TEXTAREA>
	</TD>
</TR>
 
<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" value="Envoyer">
	</TD>
</TR>
</TABLE>
</FORM>

j'aurais voulu savoir s'il était possible d'inclure ce fichier qui permettrait l'envoie des données à la bdd, bien sûr il n'est pas correct je sais mais j'aimerais juste l'inclure dans mon code, pour quand je clique sur un jour de mon calendrier, le formulaire s'affiche à la place de la requête ajax.

Dans l'attente d'une réponse, bonne journée à vous !

Bonsoir,

C'est assez simple, dans ta fonction tu as var title =prompt('Event Title:'); C'est cela qui faudra modifier :

Le code de ton formulaire, tu le met dans une popin que tu va gérer avec jQuery UI par exemple, tu pourra voir un exemple ici.
Tu fait une fonction qui remplace le prompt et qui appellera ta popin avec ton formulaire.
Le bouton valider de ta popin devra lancer l'appel ajax avec les nouveaux éléments.

C'est une façon de faire. Tout le reste c'est du technique, si tu as besoin d'aide dans la mise en oeuvre reviens nous voir.

Bonjour Golgotha,

Je te remercie pour ta réponse, je voulais savoir pour ce que tu m'as donné. Je devrais utiliser function addUser() pour mon cas et réajuster pour mes besoins et pourrais-tu m'expliquer ce qu'est une popin ?

Bonne journée !