[GET] récupération, redirection, utilisation
Bonjour à tous,
je suis assez novice en ajax, y a des choses que je sais faire, mais d'autre je ne comprends pas.
Alors voilà l'idée :
J'ai une page 1 avec un formulaire. A la soumission du formulaire, j'ai un tableau qui s'affiche en dessous.
J'ai fais une petite fonction jquery pour que lorsqu'on clique sur une ligne, on puisse récupérer toutes les valeurs des champs de la ligne (ça, c'est ok).
En même temps qu'on clique, il y a une redirection vers une page 2 qui contient un autre tableau (la redirection c'est ok).
Pour l'instant, je bloque parce que lors du clique il n'envoie pas les données récupérées à la page 2.
****
le fichier twig de la page 1 (sans le formulaire)
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| <div class="row displayInformation">
<span>Tableau pour les opérateurs : </span><span>{{ sqlOperator }}</span>
</div>
<div class="row">
<table class="striped sortable centered" id="table-arcep">
<thead>
<tr>
<td>Année</td>
<td>Mois</td>
<td class="grayBackground">Nombre de commandes concernées</td>
<td>ADR0</td>
<td>ADRPC</td>
<td>ADRVOIE</td>
<td>ADRCOMP</td>
<td class="grayBackground">Total Acronymes</td>
</tr>
</thead>
<div class="divider"></div>
<tbody>
{% for tableAcronyme in tableAcronymes %}
<tr>
<td class="cellYear">{{ tableAcronyme.annee }}</td>
<td class="cellMonth">{{ tableAcronyme.mois }}</td>
<td class="cellOrders grayBackground selectable">{{ tableAcronyme.numberOrders }}</td>
<td class="cellAdr0 selectable">{{ tableAcronyme.numberADR0 }}</td>
<td class="cellAdrpc selectable">{{ tableAcronyme.numberADRPC }}</td>
<td class="cellAdrvoie selectable">{{ tableAcronyme.numberADRVOIE }}</td>
<td class="cellAdrcomp selectable">{{ tableAcronyme.numberADRCOMP }}</td>
<td class="cellSumAdr grayBackground">{{ tableAcronyme.numberTotalAcronymes }}</td>
</tr>
{% else %}
<tr>
<td colspan="12">Rien à afficher</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="grayBackground">
<td colspan="2">Total</td>
<td>{{ tableSumAcronymes.sumOrders }}</td>
<td>{{ tableSumAcronymes.sumADR0 }}</td>
<td>{{ tableSumAcronymes.sumADRPC }}</td>
<td>{{ tableSumAcronymes.sumADRVOIE }}</td>
<td>{{ tableSumAcronymes.sumADRCOMP }}</td>
<td>{{ tableSumAcronymes.sumTotalAcronymes }}</td>
</tr>
</tfoot>
</table>
</div>
</div>
{% block script %}
{#Pour l'affichage de l'input select#}
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
{#Pour le tableau#}
{#<script type="text/javascript" src="{{ base_url() }}/js/sortable.js"></script>#}
<script type="text/javascript" src="{{ base_url() }}/js/tableGestion.js"></script>
{#Pour le bouton checkbox : Tous#}
<script type="text/javascript" src="{{ base_url() }}/js/selectAll-None.js"></script>
{#Activation des fonctions au lancement de la page#}
<script>
window.onload = function() {
eventListenerSelect();
}
</script>
<script>
$(document).ready(function () {
$("tr").click(function () {
//on récupère la ligne sélectionnée
var ligne = $(this);
//on l'utilise dans la fonction
selectLine(ligne);
})
})
</script>
{% endblock %}
{% endblock %} |
**************
le fichier tableGestion.js
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
| /**
* Permet une gestion dynamique des tableaux
*/
function selectLine(ligne){
//on récupère les données de la ligne
var year = ligne.find(".cellYear").text();
var month = ligne.find(".cellMonth").text();
var orders = ligne.find(".cellOrders").html();
//les acronymes
var adr0 = ligne.find(".cellAdr0").html();
var adrpc = ligne.find(".cellAdrpc").html();
var adrvoie = ligne.find(".cellAdrvoie").html();
var adrcomp = ligne.find(".cellAdrcomp").html();
var sumAdr = ligne.find(".cellSumAdr").html();
// OK on récupère bien que les champs de la ligne du tableau
console.log(year+"/"+month+"/"+orders+"/"+adr0+"/"+adrpc+"/"+adrvoie+"/"+adrcomp+"/"+sumAdr);
// var yearJson = encodeURIComponent(year);
// console.log(yearJson);
//on effectue la requête ajax
$.ajax({
type: "GET",
url: "/activites/arcep/acronyme",
data: {
annee: year,
mois: month,
orders: orders,
adr0: adr0,
adrpc: adrpc,
adrvoie: adrvoie,
adrcomp: adrcomp,
sumAdr: sumAdr
},
datatype: "application/json",
contentType: "application/json",
success: function (data) {
//cette ligne permet la redirection vers la page 2 (tableau de toutes les commandes)
window.location.pathname = "/activites/arcep/acronyme";
console.log(data);
}
})
} |
Apparemment, il ne les mets pas les valeurs des différents champs dans le data.
Peut-on m'expliquer pourquoi il ne semble pas les mettre dans le data de la requête AJAX ?
Merci d'avance :)
Après quelque changement dans mon code
J'ai testé différentes choses depuis tout à l'heure mais je ne comprends pas pourquoi il me répond que json est non défini ?
ma fonction js
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
|
function selectLine(ligne,colonne){
// on n'a récupéré que l'année et le mois
var annee = $("tr").eq(ligne).find("td").eq(0).html();
var mois = $("tr").eq(ligne).find("td").eq(1).html();
// on n'a récupéré que l'année et le mois
console.log(annee);
console.log(mois);
// console.log("clique Fonction ok");
switch (colonne){
case 2:
var acronyme = "tous";
break;
case 3:
var acronyme = "Nb_ADR0";
break;
case 4:
var acronyme = "Nb_ADRPC";
break;
case 5:
var acronyme = "Nb_ADRVOIE";
break;
case 6:
var acronyme = "Nb_ADRCOMP";
break;
}
console.log(acronyme);
//on protège un peu l'url
var yearURI = encodeURIComponent(annee);
var monthURI = encodeURIComponent(mois);
var acronymeURI = encodeURIComponent(acronyme);
//on effectue la requête ajax
$.ajax({
type: "GET",
url: "/activites/arcep/acronyme",
data: {
annee: yearURI,
mois: monthURI,
acronyme: acronymeURI
},
datatype: "json",
success: page3(data),
error: console.log("erreur d'affichage")
})
function page3(data) {
// window.location.pathname = "/activites/arcep/acronyme";
// window.location.href = "/activites/arcep/acronyme"+"?annee="+yearURI+"&mois="+monthURI;
console.log("réponse du controller : "+data);
}
} |
Mon controller
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
|
public function arcepTableOneRow(Request $request, Response $response, $args){
// $this->logger->info("Accès à Activites/Arcep/Acronyme");
//permet de voir le tableau des paramètres GET
var_dump($request->getQueryParams());
// on decode les différentes variables
$annee = urldecode($_GET["annee"]);
$mois = urldecode($_GET["mois"]);
$acronyme = urldecode($_GET["acronyme"]);
//Pour vérifier ce qui est transmis à la page 3
var_dump("dans controller : ".$annee." et ".$mois." et ".$_SESSION['sqlOperator']);
//on fait la requête SQL
// //Test pour afficher pas => fonctionne seulement dans l'outil réseau dans reseau
// // Affichage page
// $this->view->render($response,'arcepAcronym.twig',array(
// "mois" => $mois,
// "annee" => $annee,
// "sqlOperator" => $_SESSION['sqlOperator'],
// "acronyme" => $acronyme
// ));
//
// //envoie de la réponse
// return $response;
$data["annee"] = $annee;
$data["mois"] = $mois;
$data["sqlOperateur"] = $_SESSION['sqlOperator'];
$data["acronyme"] = $acronyme;
//On transforme tout en json
$json = json_encode($data);
var_dump("json : ".$json);
//valeur que doit rendre la reponse de la requête http
$statusCode = 200;
//passage de l'objet json au body de la requête http
$response->getBody()->write($json);
//envoie de la réponse
return $response
->withHeader("Content-Type", "application/json")
->withStatus($statusCode);
} |
data c'est pas ce qui est renvoyé par le controller ?
