Discussion :

[pitchounvivi]

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]

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]

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]

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]

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

[pitchounvivi]

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);
 
    }