Discussion :

[dnd888]

Bonjour à tous ,

Je dois faire un diagramme de gantt en récuperant des données depuis ma base de donnée et je craque total , je sais pas comment faire je suis complètement bloqué.

Comment je peux faire pour faire passer des données proprement dans ma vue twig depuis mon controller vers mon javascript ? ( A savoir qu'au final c'est du php que je dois utiliser dans du javascript mais comme je suis sous twig je suis perdu )

Je comprend pas comment je peux faire , j'ai vraiment besoin d'aide merci d'avance !

Voici le code que j'ai récupéré de l'exemple de jquery gantt :

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
112
113
114
115
 
$(function() {
			"use strict";
 
			$(".gantt").gantt({
				source: [{
					name: "test",
					desc: "test",
					values: [{
						from: "/Date(1320192000000)/",
						to: "/Date(1322401600000)/",
						label: "test test, 
						customClass: "ganttRed"
					}]
				},{
					name: " ",
					desc: "Scoping",
					values: [{
						from: "/Date(1322611200000)/",
						to: "/Date(1323302400000)/",
						label: "Scoping", 
						customClass: "ganttRed"
					}]
				},{
					name: "Sprint 1",
					desc: "Development",
					values: [{
						from: "/Date(1323802400000)/",
						to: "/Date(1325685200000)/",
						label: "Development", 
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Showcasing",
					values: [{
						from: "/Date(1325685200000)/",
						to: "/Date(1325695200000)/",
						label: "Showcasing", 
						customClass: "ganttBlue"
					}]
				},{
					name: "Sprint 2",
					desc: "Development",
					values: [{
						from: "/Date(1326785200000)/",
						to: "/Date(1325785200000)/",
						label: "Development", 
						customClass: "ganttGreen"
					}]
				},{
					name: " ",
					desc: "Showcasing",
					values: [{
						from: "/Date(1328785200000)/",
						to: "/Date(1328905200000)/",
						label: "Showcasing", 
						customClass: "ganttBlue"
					}]
				},{
					name: "Release Stage",
					desc: "Training",
					values: [{
						from: "/Date(1330011200000)/",
						to: "/Date(1336611200000)/",
						label: "Training", 
						customClass: "ganttOrange"
					}]
				},{
					name: " ",
					desc: "Deployment",
					values: [{
						from: "/Date(1336611200000)/",
						to: "/Date(1338711200000)/",
						label: "Deployment", 
						customClass: "ganttOrange"
					}]
				},{
					name: " ",
					desc: "Warranty Period",
					values: [{
						from: "/Date(1336611200000)/",
						to: "/Date(1349711200000)/",
						label: "Warranty Period", 
						customClass: "ganttOrange"
					}]
				}],
				navigate: "scroll",
				scale: "weeks",
				maxScale: "months",
				minScale: "days",
				itemsPerPage: 10,
				onItemClick: function(data) {
					alert("Item clicked - show some details");
				},
				onAddClick: function(dt, rowId) {
					alert("Empty space clicked - add an item!");
				},
				onRender: function() {
					if (window.console && typeof console.log === "function") {
						console.log("chart rendered");
					}
				}
			});
 
			$(".gantt").popover({
				selector: ".bar",
				title: "I'm a popover",
				content: "And I'm the content of said popover.",
				trigger: "hover"
			});
 
			prettyPrint();
 
		});

[Njörd]

Bonjour dnd888,

Alors déjà pour répondre à ta problématique de comment faire :
Pour envoyer des données PHP à du javascript, t'as pas 36 solutions. Tu dois faire un appel en Ajax, de cette façon tu pourras faire communiquer ces deux technologies.

Fais une recherche sur le forum et sur GG et tu auras plein de tutoriels et explication sur comment faire de l'Ajax.

La question du comment : soit tu renvoi du XML, soit tu renvoi du JSON
Par exemple, dans ton action du controller (appelé par ta fonction Ajax), tu fais ta requête SQL et tu récupères les données dans une variables $resultSet. Pour envoyer cette variables, rien de plus simple, il suffit de faire :

Code :

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

echo json_encode($resultSet)

Ce echo est récupéré par la fonction success (le callback) de ta fonction Ajax. Te voilà avec tes données envoyées par PHP et venant de la BD dans ton code Javascript.

A toi de faire corréler tes données du resultSet à ton jquery gantt, toujours dans la fonction success (genre un tableau initialisé tout en haut de ton fichier JS, que tu peuples, et tu récupères ce tableau dans ta fonction jquery gantt).

Enfin, Twig n'a rien à voir avec ta récupération de données dans ton javascript. La seul chose que twig fait, c'est qu'il change la syntaxe HTML de tes balises. Dans tous les cas, tu as toujours accès au sélecteurs (id, name) de tes balises depuis ton javascript.

P.S : vu que tu utilises Symfony2, regarde aussi du côté de leur API pour la réception des requêtes XMLHttpRequest.

[stephan.78]

Bonsoir,

D'accord sur le principe de l'ajax, ça fonctionne. Mais, avec twig, on génère pas que du html. Tout document peut-être généré avec twig.

Tu peux très bien créer ton fichier json avec twig, voir créer directement dans ta page les éléments json.

[Njörd]

Salut stephan.78,

Je suis d'accord, j'ai mal exprimé mon propos.

Je voulais simplement dire qu'il n'est pas obligé de passer par twig pour faire la partie javascript.

[stephan.78]

Bonjour,

Surtout que pour faire du ajax, tu vas passé quand même dans un controler a un moment.

AJAX est fait pour récupérer des valeurs en temps réel.

Est ce le cas ?