Discussion :

[nic0145]

Bonjour,

Voilà mon problème:
Je fais un appel ajax pour passer un statut 0 à un statut 1 (0 = mon article n' est pas prêt, et 1 = mon article est prêt), ça fonctionne mais le statut s' applique à toute ma liste d' articles (il passent tous à 1...) logique tout est dans la boucle. Mais je ne trouve pas comment contourner le problème, je souhaite avoir que l' article que je clique à 1.
Merci d' avance pour votre aide.
Voici ma vue twig:

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
{% for panier in array %}
        {% for article in panier%}
 
            <a id="envoyer" href="">Click</a>
 
            <div class="col-lg-1 col-sm-1">
                <script>
                    $("#envoyer").ready(function(){
 
                        $.ajax({
                            url : '{{ path('validArticleNoel', {'articleId': article.id})  }}',
                            type : 'GET'
                        })
                    });
                </script>
            </div>
 
 
 
            <div class="col-lg-2 col-sm-2">
                {{ article.article.nom |truncate(20) }}
            </div>
            <div class="col-lg-1 col-sm-1">
                {{ article.nombre }}
            </div>
            <div class="col-lg-1 col-sm-1">
                {% if article.quantite %}
                {{ article.quantite }} kg
                    {% endif %}
            </div>
            <div class="col-lg-2 col-sm-2">
                {% if article.preparation != 'RAS' %}
                {{ article.preparation }}
                    {% endif %}
            </div>
            <div class="col-lg-2 col-sm-2">
                {{ article.remarques }}
            </div>
        </div>
        {% endfor %}
    <hr>
    {% endfor %}

Mon contrôleur:

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
/**
 * Class ValidArticleNoelController
 * @package App\Controller\Noel
 * @Route("validArticleNoel/{articleId}", name="validArticleNoel")
 */
class ValidArticleNoelController extends AbstractController
{
    public function __invoke($articleId, Request $request)
    {
        $article = $this
            ->getDoctrine()
            ->getManager()
            ->getRepository(ArticleVendu::class)
            ->find($articleId);
 
        $article->setFait(1);
 
        $manager = $this->getDoctrine()->getManager();
        $manager->persist($article);
        $manager->flush();
 
       // return $this->redirect($_SERVER['HTTP_REFERER']);
    }
}

Et une capture de ma vue:

[Séb.]

Code :

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

1
2
3
4
5
6
 
            <a id="envoyer" href="">Click</a>
 
            <div class="col-lg-1 col-sm-1">
                <script>
                    $("#envoyer").ready(function(){

Tu as le même ID pour tous tes liens "Click", il faudrait personnaliser chacun d'eux, avec l'ID de l'article par exemple.

[nic0145]

Bonjour, non pourtant dans ma console j ' ai bien chaque id qui est envoyé à tour de rôle et dans ma bdd ils sont bien tous persisté.

[grunk]

Tu ne procède pas de la bonne façon.
Ton lien devrais contenir l'id qui t'intéresse, par exemple avec un attribut data- :

Code twig :

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

<a class="envoyer" href="" data-id="{{article.id}}">Click</a>

Ensuite , il ne faut surtout pas enregistrer un événement de click à chaque tour de boucle , mais plutôt le faire une fois pour tous les éléments concernés à la fin de ta page :

Code twig :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
        $(document).ready(function(){
                $(document).on('click','.envoyer',function(){ // Sur tous les éléments ayant une class "envoyer"
                    const id = $(this).data('id'); // récupération de l'id courant
                        $.ajax({
                                url : '{{ path('validArticleNoel', {'articleId': id})  }}',
                                type : 'GET'
                        })
                });
        });
</script>

J'ai pas fait de jquery depuis longtemps donc la syntaxe est peut être pas exacte , mais l'idée générale est là

[nic0145]

Bonjour,

Merci de m'aider.

J'ai compris le principe, mais je n'arrive pas à récupérer mon id dans data-id="{{article.id}}".
J'essaie de débuguer en faisant:

Code HTML :

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

1
2
3
4
5
6
                <script>
                    $(document).click(function ()
                    {
                        alert($(this).data('id'));
                    });
                </script>

Mais j'obtiens une variable id vide. Qui pourtant existe bien dans {{ dump(article.id) }}.
J'ai l'impression que {{ article.id }} n'est pas pris en compte par data-id...

[grunk]

Dans le code HTML généré est ce que l'attribut à bien une valeur du genre : data-id="12".


Pourquoi faire un $(document).click(function ()).
Un événement doit s'attacher sur un élément précis ET avec la méthode on() comme montré dans mon code précédent et non pas sur la totalité du document comme tu le fais.

[armel18]

J' ai compris le principe, mais je n' arrive pas à récupérer mon id dans data-id="{{article.id}}".

parce que ton événement click ne cible pas le sélecteur de classe .envoyer mais cible plutôt toute la page. Essaie de reproduire ce qui a été proposé précémment.
Dans la vue twig:

Code twig :

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

<a class="envoyer" href="" data-id="{{article.id}}">Click</a>

dans le script JS

Code JavaScript :

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

1
2
3
4
5
6
7
8
<script type="text/javascript">
        $(document).ready(function(){
                $(document).on('click','.envoyer',function(){ // Sur tous les éléments ayant une class "envoyer"
                    const id = $(this).data('id'); // récupération de l'id courant
                    alert( id )    
                });
        });
</script>

[nic0145]

C'est ce que j'ai fait en 1er (copié le code).

Mais quand j'essaye ça j'ai bien mon Id :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
                    $(document).ready(function(){
                        $(document).on('click','.envoyer',function(){ // Sur tous les éléments ayant une class "envoyer"
                            const id = $(this).data('id'); // récupération de l'id courant
                            //alert( id )
 
                        });
                    });
                </script>

Mais avec ça mon Id n'existe pas :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
                    $(document).ready(function(){
                        $(document).on('click','.envoyer',function(){ // Sur tous les éléments ayant une class "envoyer"
                            const id = $(this).data('id'); // récupération de l'id courant
                            $.ajax({
                                url : '{{ path('validArticleNoel', {'articleId': id})  }}',
                                type : 'GET'
                            })
                        });
                    });
                </script>

J'ai trouvé la solution grâce à vous, merci.
Voici le code:

Code twig :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<a class="envoyer" href="" data-path='{{ path('validArticleNoel', {'articleId': article.id})  }}'>Click</a>
 
                <script type="text/javascript">
                    $(document).ready(function(){
                        $(document).on('click','.envoyer',function(){ // Sur tous les éléments ayant une class "envoyer"
                            var path = $(this).attr("data-path");
                            $.ajax({
                                type : 'GET',
                                url : path
                            })
                        });
                    });
                </script>

[nic0145]

Mon code marche bien comme je voulais.
Par contre ma page est rechargé à chaque fois, ce qui me fait remonter tout en haut....

Je souhaitais rester au même endroit lorsque je clique d' ou l' utilisation d' ajax.

Comment se fait il qu elle se recharge?

Je suis parti d' un template déjà fait, est ce que ça peut venir de là?

[grunk]

C'est parce que tu n'inhibe pas l'événement du click sur le lien.
Donc tu traite l'événement puis il se propage et le navigateur suit le lien.

Il faut donc dire à javascript de stopper la propagation de l'événement

Code :

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

1
2
3
4
$(document).on('click','.envoyer',function(event){ // Sur tous les éléments ayant une class "envoyer"
    event.preventDefault();
    const id = $(this).data('id'); // récupération de l'id courant
});

[nic0145]

Ok merci mais ca me renvoie une 500, faut il que mon contrôler renvoie quelque chose du coup?

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
/**
 * Class ValidArticleNoelController
 * @package App\Controller\Noel
 * @Route("validArticleNoel/{articleId}", name="validArticleNoel")
 */
class ValidArticleNoelController extends AbstractController
{
    public function __invoke($articleId, Request $request)
    {
        $article = $this
            ->getDoctrine()
            ->getManager()
            ->getRepository(ArticleVendu::class)
            ->find($articleId);
 
        if ($article->IsFait() == 0) {
            $article->setFait(1);
        }
        else{
            $article->setFait(0);
        }
 
        $manager = $this->getDoctrine()->getManager();
        $manager->persist($article);
        $manager->flush();
 
    }
}

Si je rajoute

Code :

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

return $this->redirect($_SERVER['HTTP_REFERER']);

J' obtient bien un code 200. Mais mon résultat n' est pas rafraichi.