Appel ajax dans une boucle twig

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:
Pièce jointe 582171

Code:

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.

27/10/2020, 08h49
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é.

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:

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

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à

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:

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

28/10/2020, 17h04
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.

Citation:

Envoyé par nic0145

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:

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

dans le script JS
Code:

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>

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

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

Code:

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:

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:

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>

29/10/2020, 15h22
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à?

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:

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

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

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

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

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