[GET] récupération, redirection, utilisation

**pitchounvivi** · 19/02/2020, 15h13

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 twig :

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
<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 JS :

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
/**
 *  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

**pitchounvivi** · 19/02/2020, 17h13

Alors j'ai fait plein de tests et j'ai trouvé un truc qui ne fonction pas très bien et qui en plus niveau sécurité n'est pas top.

Vu qu'on peut changer directement les variable dans l'url

Ma question est donc la suivante :

vu que niveau sécurité c'est pas top, comment faire ce que je souhaite faire ...

- en ajax POST ? mais alors comment mettre un formulaire là où il n'y en a pas

- autrement ? un redirection directement dans la cellule ... mais même problème comment récupérer les infos ?

Je suis perdu , je ne vois pas comment faire ... je ne cherche pas une solution toute prête mais à être orienté.

Merci d'avance

**pitchounvivi** · 20/02/2020, 10h31

Bonjour,

alors j'ai avancé mais j'ai un problème d'url et de passage de passage de variable

Code JS :

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
 
//on effectue la requête ajax
    $.ajax({
        type: "GET",
        url: "/activites/arcep/acronyme",
 
        datatype: "json",
        success: function () {
            //cette ligne permet la redirection vers la page 2 (tableau de toutes les commandes)
            window.location.pathname = "/activites/arcep/acronyme"+"?annee="+year+"&mois="+month;
 
            // console.log(data);
 
 
        }
    })

Alors il me redirige bien vers ma page 2, mais j'ai un problème dans l'url. J'ai :

/activites/arcep/acronyme%3Fannee=2018&mois=3

au lieu de

/activites/arcep/acronyme?annee=2018&mois=3

De plus j'aimerai savoir si je dois faire passer tous les paramètres dans l'url pour je peux en "cacher" certains ?

**NoSmoking** · 20/02/2020, 16h33

Bonjour,
quand on lit :

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).

et en même temps :

De plus j'aimerai savoir si je dois faire passer tous les paramètres dans l'url pour je peux en "cacher" certains ?

on peut se demander pourquoi ne pas passer par un formulaire classique en POST ?

**pitchounvivi** · 20/02/2020, 16h40

J'ai un tableau. Alors je n'ai pas de form.

**pitchounvivi** · 21/02/2020, 10h39

Bonjour à tous

alors voilà où j'en suis
Il semblerait que je ne rentre jamais dans la partie success de l'ajax. Et je ne comprends pas pourquoi ?

Code JS :

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
 
function selectLine(annee, mois){
    //on n'a récupéré que l'année et le mois
    console.log(annee);
    console.log(mois);
 
    //on protège un peu l'url
    var yearURI = encodeURIComponent(annee);
    var monthURI = encodeURIComponent(mois);
 
 
    //on effectue la requête ajax
    $.ajax({
        type: "GET",
        url: "/activites/arcep/acronyme",
        data: {
            annee: yearURI,
            mois: monthURI
        },
        datatype: "json",
        success: page3,
        error: console.log("erreur d'affichage")
    })
 
    function page3(data) {
        // window.location.pathname = "/activites/arcep/acronyme";
 
        // console.log("annee tableau 1 : "+annee);
        // console.log("mois tableau 1 : "+mois);
 
        //récupération de la data
        // console.log("annee2 : "+ annee);
        // console.log("mois2 : "+ mois);
 
 
        console.log("réponse du controller : "+data);
 
 
    }
 
 
    // window.location.href = "/activites/arcep/acronyme"+"?annee="+yearURI+"&mois="+monthURI;
 
 
}

le controller

Code PHP :

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
 
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"]);
 
        //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
 
 
 
 
//retour pour affichage dans la page
        $data["annee"] = $annee;
        $data["mois"] = $mois;
        $data["sqlOperateur"] = $_SESSION['sqlOperator'];
 
        //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(data);
 
 
        //envoie de la réponse
        return $response
            ->withHeader("Content-Type", "application/json")
            ->withStatus($statusCode);
 
    }

**NoSmoking** · 21/02/2020, 15h28

Alors je n'ai pas de form.

cela ne doit pas être une fatalité

Dans ce que je comprend tu récupères les données de la ligne cliquée, tu affiches le résultat dans une « pop-in » et cette « pop-in » contient le formulaire avec les données et un bouton de confirmation d'envoi, méthode traditionnelle donc, car si à chaque clic tu envoies les données alors il est tout à fait possible d'en envoyer malencontreusement.

**pitchounvivi** · 21/02/2020, 15h50

Bonjour,

en fait, ce sujet fait suite à celui-là https://www.developpez.net/forums/d2...lule-cliquees/

Comme je bloquais sur la partie ajax, j'ai voulu essayer de régler cet autre problème que j'avais repéré après coup ...

Ca m'a permis de faire autre chose que de l'ajax, dés fois c'est mieux de changer de problème ...

Maintenant je vais pour me remettre dessus.

**NoSmoking** · 21/02/2020, 15h57

Ca m'a permis de faire autre chose que de l'ajax, dés fois c'est mieux de changer de problème ...

Passe la discussion en résolue et tiens compte de ma remarque dans l'autre discussion.

**pitchounvivi** · 21/02/2020, 16h12

En fait ici c'est pas résolu car mon problème ici c'est ajx qui fonctionne pas vraiment.

Par contre, pour l'autre, je l'ai mis en résolu et j'essaie de modifier pour n'avoir que du jquery vu que l'ajax est en jquery.

J'aimerai savoir.
Mon switch pour avoir le nom de l'acronyme ... c'est mieux de le faire où ?
dans la fonction JS ?
dans la fonction du controller ?

J'aimerai connaitre la bonne pratique.

**pitchounvivi** · 21/02/2020, 17h51

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 JS :

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
 
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 PHP :

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
 
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 ?

**NoSmoking** · 21/02/2020, 18h28

J'essaie de répondre mais c'est un peu en vrac

Alors il me redirige bien vers ma page 2, mais j'ai un problème dans l'url. J'ai :
/activites/arcep/acronyme%3Fannee=2018&mois=3
au lieu de
/activites/arcep/acronyme?annee=2018&mois=3

avec window.location.pathname = tu obtiendras la première ligne ;
avec window.location = tu obtiendras la deuxième ligne, c'est cette écriture qu'il faut choisir.

Il semblerait que je ne rentre jamais dans la partie success de l'ajax. Et je ne comprends pas pourquoi ?

Il faut observer ce qui se passe dans la console, F12, message d'erreur éventuel indiquant un soucis dans le code qui précède la fonction, onglet réseau pour voir ce qui est envoyé/reçu.

Mon switch pour avoir le nom de l'acronyme ... c'est mieux de le faire où ?

Tu pourrais également passer par un Array comme par exemple :

Code :

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

1
2
3
const DATA = [null, null,  "tous",  "Nb_ADR0", "Nb_ADRPC", "Nb_ADRVOIE", "Nb_ADRCOMP"];
const acronyme = DATA[index] || "";
console.log(acronyme);

ensuite c'est à toi de voir où la donnée est la plus simple à manipuler et apporte le plus de cohérence à ton code.

'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 ?

Code :

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

success: page3(data),

ici il te faut juste mettre la référence à la fonction ou mettre le corps de la fonction.

**pitchounvivi** · 24/02/2020, 10h14

Bonjour,

merci pour tes réponses, alors :

1) effectivement après plusieurs recherches :

j'ai fini par comprendre que window.location.href = "/activites/arcep/acronyme"+"?annee="+yearURI+"&mois="+monthURI;
serait mieux dans mon cas car pathname, c'est pour une redirection sans paramètre.

2) Pour l'ajax :

je n'ai pas de message d'erreur dans ma console à part data is not defined.
je n'ai pas de redirection vu qu'il ne rentre pas dans le success.
D'ailleurs est-ce bien nécessaire d'avoir un window.location ... vu que je l'ai déjà mis dans l'url de l'ajax ?
Ca fait double emploi non ?

3)

ici il te faut juste mettre la référence à la fonction ou mettre le corps de la fonction.

Ok, j'ai donc une erreur d'écriture ce qui a solutionné mon problème avec data.
Donc j'ai désormais :

Code JS :

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
 
$.ajax({
        type: "GET",
        url: "/activites/arcep/acronyme",
        data: {
            annee: yearURI,
            mois: monthURI,
            acronyme: acronymeURI
        },
        datatype: "json",
        success: page3,
        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);
 
 
    }

Merci pour le renseignement, pour success, je pensais que cela fonctionnait comme un appel de fonction normal.

Alors après avoir fait quelques changement et 2 tests. En réécrivant l'ajax :

- j'ai dans la partie réseau :
effectivement une redirection vers ma page 2, avec tous mes paramètres.

Il semblerait qu'il passe bien dans mon controller puisqu'il m'affiche bien le var_dump($json).
Mon problème serait donc dans le retour dans $response, car

- j'ai dans la console directement le message de error de ajax
"erreur d'affichage".

Dans mon controller, je lui renvoie bien du json et j'ai bien mis le header avec ("Content-Type, "application/json").

Code PHP :

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
 
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
//plus tard quand j'aurai un aax qui fonctionne
 
 
//On met dans un tableau
        $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);
 
    }

Dans le navigateur j'ai aussi ce message d'erreur :

SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 1560 of the JSON data

Pourtant ça c'est bien du json :

string(1566) "json : {"annee":"2018","mois":"8","sqlOperateur":"\"ici la longue liste des opérateurs\"","acronyme":"tous"}"

OOups, je viens de me rappeller que ce message est lié à la présence des var_dump ....

Bon j'ai bien du json qui s'affiche dans ma réponse Donc ça s'est bon.

Par contre pourquoi ne m'affiche-t-il pas ma page ?
même sans les résultats dedans ?

**pitchounvivi** · 24/02/2020, 11h08

Donc pour résumé :

ajax semble fonctionner en partie, car j'ai bien

- dans la partie réseau
une ligne avec mon adresse et ses 3 paramètres
dans la charge utile de la réponse un objet json

par contre
- dans la console
il m'affiche erreur affichage => donc il va dans la partie error d'ajax
mais aussi le message dans page3 => réponse du controller : [Objet Objet]

Dans ce sens là, donc c'est comme s'il faisait un premier essai qu'il n'y arrivait pas (message du error) puis passait par le controller qui lui renvoie quand même l'objet json.

Mais il n'affiche pas la page, même sans les éléments.

Edit : j'ai un doute mais j'ai ce message la console

Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à http://le localhost/favicon.ico (« default-src »).

J'ai bien trouvé des trucs sur MDN, mais le problème c'est que je ne crois pas que je suis autorisé à modifier le serveur.

**pitchounvivi** · 25/02/2020, 09h50

Bon,

je passe en résolu parce que j'étais mal parti et qu'il n'est pas possible de rediriger ET de remplir une page avec une même fonction ajax.

Je poste quand même une solution qui correspond à ce que je voulais :
- dans une page 1
- pouvoir après avoir cliqué sur une ligne d'un tableau 1
- avoir un tableau 2 qui utilise comme donnée l'année, le mois de la ligne cliquée et le nom de la colonne => pour faire sa requête SQL
- et ensuite l'afficher dans la page 2

la page 1 (partie tableau et JS)

Code twig :

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
<div class="row">
            <table class="striped sortable centered" id="table-arcep">
                <thead>
                <tr>
                    <td>Année</td>
                    <td>Mois</td>
                    <td class="cellOrders grayBackground">Nombre de commandes concernées</td>
                    <td class="cellAdr0">ADR0</td>
                    <td class="cellAdrpc">ADRPC</td>
                    <td class="cellAdrvoie">ADRVOIE</td>
                    <td class="cellAdrcomp">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 () {
            $("table tbody").on("click","td", (function (){
                var eTD     = this,
                    eTR     = eTD.parentNode,
                    ligne   = eTR.rowIndex,
                    colonne = eTD.cellIndex,
                    classCellule = eTD.className; //juste pour vérifier la présence de la classe
 
//                console.log( "ligne : " + ligne)  ;
//                console.log( "colonne : " + colonne );
//                console.log( "nomCellule : " + classCellule );
 
                if($(eTD).hasClass("selectable")){
//                    console.log("clique Page ok");
                    selectLine(ligne,colonne);
                }
            }))
        })
        
    </script>
 
 
{% endblock %}
 
{% endblock %}

le fichier tableGestion.js

Code JS :

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
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");
 
    var acronyme = colonne;
    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: listOrderAcronym,
        error:  listOrderAcronym
    })
 
    function listOrderAcronym(data) {
        if (data != null) {
            window.location.href = "/activites/arcep/acronyme" + "?annee=" + yearURI + "&mois=" + monthURI + "&acronyme=" + acronymeURI;
 
            console.log("retour ok");
        }
        else {
            console.log("erreur retour ajax");
        }
    }
}

le controller qui gère ça

Code PHP :

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
 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 1 : ".$annee." et ".$mois." et ".$_SESSION['sqlOperator']." et ".$acronyme);
 
        // On attribut le nom de l'acronyme en fonction de la position de la colonne
         switch ($acronyme){
             case 2:
                 $acronyme = "tous"; //pour la requête sql
                 $acronymDisplay = "tous"; //affiche le nom du tableau mais surtout différent de celui de la requête sql
                 break;
             case 3:
                 $acronyme = "Nb_ADR0";
                 $acronymDisplay = "ADR0";
                 break;
             case 4:
                 $acronyme = "Nb_ADRPC";
                 $acronymDisplay = "ADRPC";
                 break;
             case 5:
                 $acronyme = "Nb_ADRVOIE";
                 $acronymDisplay = "ADRVOIE";
                 break;
             case 6:
                 $acronyme = "Nb_ADRCOMP";
                 $acronymDisplay = "ADRCOMP";
                 break;
         }
 
//        var_dump("dans controller 2 : ".$annee." et ".$mois." et ".$_SESSION['sqlOperator']." et ".$acronyme);
 
 
 
 
        //faire ici un if pour gérer la requête pour tous les acronymes
 
 
 
 
 
        //on fait la requête SQL
        $result = $this->modelData->getListForSelectedAcronym($annee, $mois, $_SESSION['sqlOperator'], $acronyme);
//        var_dump($result); //on récupère bien le tableau de la réponse sql
 
 
        //faire une boucle pour la somme par ligne des acronymes
        $sumAcronymes =0;
 
 
 
        // Affichage page
        $this->view->render($response,'arcepAcronym.twig',array(
            "mois" => $mois,
            "annee" => $annee,
            "acronyme" => $acronymDisplay,
            "sqlOperatorSelected" => $_SESSION['select-all-operators'],
            "results" => $result,
            "sumAcronymes" => $sumAcronymes
        ));
 
        //envoie de la réponse
        return $response;
 
    }

La deuxième page avec le tableau 2 rempli

Code twig :

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
<div class="row">
            <div class="col m6">
                <span class="displayInformation">Liste pour : </span>
                <span id="date" class="displayInformation"> {{ mois }}/{{ annee }} </span>
            </div>
            <div class="col m6">
                <span class="displayInformation">Pour l'acronyme : </span>
                <span id="acronyme" class="displayInformation"> {{ acronyme }} </span>
            </div>
        </div>
        <div class="row">
            <div class="col m12">
                <span class="displayInformation">Pour : </span>
                <span class="displayInformation">{{ sqlOperatorSelected }}</span>
            </div>
 
        </div>
    </div>
 
    <div class="divider"></div>
 
 
    <div class="row">
        <table class="striped sortable centered" id="table-arcep">
            <thead>
                <tr>
                    <td>Opérateurs</td>
                    <td>Date de validation</td>
                    <td>Famille d'offre</td>
                    <td>Zone SI</td>
                    <td>Référence externe</td>
                    <td>Identifiant externe</td>
                    <td>Nom gestionnaire</td>
                    <td>Référence chrono</td>
                    <td>Date de Mise à Jour</td>
                    <td>Nombre d'Acronymes</td>
                    <td>ADR0</td>
                    <td>ADRPC</td>
                    <td>ADRVOIE</td>
                    <td>ADRCOMP</td>
                </tr>
            </thead>
 
            <tbody>
            {% for result in results %}
                <tr>
                    <td>{{ result.DENOMINATION_1 }}</td>
                    <td>{{ result.DATEVALIDATIONFO }}</td>
                    <td>{{ result.FAMILLEOFFRE }}</td>
                    <td>{{ result.ZONESI }}</td>
                    <td>{{ result.REFEXTERNE_1 }}</td>
                    <td>{{ result.IDEXTERNE_1 }}</td>
                    <td>{{ result.nom_gest }}</td>
                    <td>{{ result.ref_chrono }}</td>
                    <td>{{ result.DATE_MAJ }}</td>
                    <td>{{ sumAcronymes }}</td>
                    <td>{{ result.Nb_ADR0 }}</td>
                    <td>{{ result.Nb_ADRPC }}</td>
                    <td>{{ result.Nb_ADRVOIE }}</td>
                    <td>{{ result.Nb_ADRCOMP }}</td>
                </tr>
 
            {% else %}
                <tr>
                    <td colspan="12">Rien à afficher</td>
                </tr>
            {% endfor %}
            </tbody>
 
            <thead>
            <tr class="grayBackground">
                <td>Total</td>
                <td>Date de validation</td>
                <td>Famille d'offre</td>
                <td>Zone SI</td>
                <td>Référence externe</td>
                <td>Identifiant externe</td>
                <td>Nom gestionnaire</td>
                <td>Référence chrono</td>
                <td>Date de Mise à Jour</td>
                <td>Nombre d'Acronymes</td>
                <td>ADR0</td>
                <td>ADRPC</td>
                <td>ADRVOIE</td>
                <td>ADRCOMP</td>
            </tr>
            </thead>
 
        </table>
    </div>

Voilà si ça peut servir

**NoSmoking** · 26/02/2020, 09h34

Je n'ai pas l'impression que tu ais bien saisi le pourquoi on utilise la technique aJAX

Comprendre les mécanismes d'AJAX

[GET] récupération, redirection, utilisation

AJAX

Discussions similaires

Partager

Partager