Bonjour a tous j'espère que vous aller bien aller c'est le week-end ce soir courage à  tous ce qui bosse, alors je viens vers vous car j'ai un petit soucis d'ordre général 

alors voila je créer une boutique et j'ai un petit problème de variable je veux afficher en Ajax le produit au clique d'un produits

j'ai une listes de produits et lorsque je clique sur un "td" que j'ai nommé test pour l'instant ça ne fonctionne pas car dans mon appelle en ajax je dit qu'il doit m'afficher une route avec un paramètre qui est un id je vous montre un peux mon code

déjà ma vue avec la listes des produits

{% extends 'back/base.html.twig' %}

{% block body %}
<br>
<br>
<br>
<br>
<div class="container-fluid">
        <h1 class="text-center">Listes de tous les produits</h1>

        <div id="resultat">

        </div>

        <table id="para" class="table table-hover">
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Nom du produit</th>
                <th scope="col">Publier</th>
                <th scope="col">Description</th>
                <th scope="col">Image</th>
                <th scope="col">Prix</th>
                <th scope="col">Référence</th>
                <th scope="col">Catégorie</th>
                <th scope="col">
                    <a class="btn btn-success" href="{{ path('add-product') }}">
                    Ajouter un produit
                    </a>
                </th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            {% for product in products %}
            <tr class="table-primary">
                <th scope="row">{{ product.id }}</th>
                <td>
                    <a href="{{ path('show-product', {id: product.id}) }}">
                    {{ product.name }}
                    </a>
                </td>
                <td>{% if product.isPublished == '1' %}
                        <span class="badge badge-success">Oui</span>
                        {% elseif product.isPublished == '0' %}
                            <span class="badge badge-danger">Non</span>
                    {% endif %}
                </td>
                <td>{{ product.description | truncate('50') }}</td>
                <td><img src="{{ asset('images/products/'~product.imageName) }}" alt="{{ product.imageName }}" width="50px" height="50"> </td>
                <td>{{ product.price }}€</td>
                <td>{{ product.reference }}</td>
                <td>{{ product.category}}</td>
                <td>
                    <a href="{{ path('show-product', {id: product.id}) }}" class="btn btn-info">Voir</a>
                    <a href="{{ path('edit-product', {id: product.id}) }}" class="btn btn-success">Modifier</a>
                    <a href="{{ path('delete-product', {id: product.id}) }}" class="btn btn-danger delete" data-confirm="Voulez vous vraiment supprimer cette catégorie ?">Supprimer</a>
                </td>
                <td id="sub2">test</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

</div>

<script>

    $('#sub2').on('click', function(){
        // J'initialise le variable box
        var box = $('#resultat');
        // Je définis ma requête ajax
        $.ajax({
            // Adresse à laquelle la requête est envoyée
            url: '{{ path('show-product', {id: showProduct.id}) }}',
            type: 'GET',
            // La fonction à apeller si la requête aboutie
            success: function (data) {
                // Je charge les données dans box
                box.html(data);
                document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
            },
            // La fonction à appeler si la requête n'a pas abouti
            error: function() {
                // J'affiche un message d'erreur
                box.html("Désolé, aucun résultat trouvé.");
            }
        });
    });
</script>

{% endblock %}

la variable product il l'affiche bien pas de soucis mais le problème la variable "showProduct" ne la trouve pas alors qu'elle est dans mon controller qui me permet d'afficher un produit : 

 /**
     * @Route("/produits/{id}", name="show-product", methods="GET")
     * @param int $id
     * @return Response
     */
    public function showProduct(int $id): Response {

        $product = $this->getDoctrine()->getRepository(Product::class)->find($id);

        return $this->render('back/CRUD/show-product.html.twig', [
            'title' => '',
            'showProduct' => $product
        ]);
    }

ça c'est mon controller qui affiche tout les produits

  /**
     * @Route("/listes-des-produits", name="listes-product", methods="GET")
     * @return Response
     */
    public function listesProduct(): Response {

        $repository = $this->getDoctrine()->getRepository(Product::class);
        $product = $repository->findAll();

        return $this->render('back/listes-product.html.twig', [
            'title' => 'Listes de tous les produits disponibles',
            'products' => $product
        ]);
    }

j'ai essayer ce ci pour la mettre en global mais ça ne marche toujours pas, dans mon twig.yaml : 

twig:
    paths: ['%kernel.project_dir%/templates']
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    globals:
      showProduct:

il me sort cette erreur : 

"Impossible to access an attribute ("id") on a null variable." si je met a la main un id par exemple 3 ou 7 bah il m'affiche bien le produit mais si je le met dynamiquement ça ne fonctionne pas help me pliz.

voila si vous avez une solution merci de m'en proposer une, merci à vos future réponse te bon courage ! 

-
Edité par CrownBackend 17 août 2018 à 8:23:56

Bonjour,

En ajax,tu ne dois pas passer le paramètre dans la route directement mais plutôt en utilisant l'option data:

        $.ajax({
            // Adresse à laquelle la requête est envoyée
            url: '/showProduct',
            type: 'GET',
            data: {
              id: ton_id
            }
            // La fonction à apeller si la requête aboutie
            success: function (data) {
                // Je charge les données dans box
                box.html(data);
                document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
            },

De plus, évites la syntaxe twig dans ton script js parce que tu vas devoir externaliser ce code dans un fichier à part et cela ne fonctionnera plus.

Utilises plutôt ton_elem.val pour récupérer la valeur d'un élément en JS.

Merci beaucoup pour ton retour, si je doit mettre l'url comme tu l'indique je fait comment pour passer l'id en paramettre ?

j'ai fait ça mais on me dit que l'id est inconnue (je suis pas super fort en javascript j'ai des petit notions ^^')

    $(document).ready(function () {
        $('#sub2').on('click', function(e){
            e.preventDefault();
            // J'initialise le variable box
            var box = $('#resultat');
            // Je définis ma requête ajax
            $.ajax({
                // Adresse à laquelle la requête est envoyée
                url: '/produits/id',
                type: 'GET',
                data: {
                    id: id
                },
                // La fonction à apeller si la requête aboutie
                success: function (data) {
                    // Je charge les données dans box
                    box.html(data);
                    document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
                },
                // La fonction à appeler si la requête n'a pas abouti
                error: function() {
                    // J'affiche un message d'erreur
                    box.html("<p>Désolé, aucun résultat trouvé.</p>");
                }
            });
        });
    });

id est une variable en JS qui va contenir en valeur l'id.

Pour le récupérer:

id = $('#sub2').val();

Alors la je vous cache pas je suis complètement paumé j'ai essayer ce ci mais le problème c'est que ça rentre toujours dans le else moi ce que j'ai pas très bien compris c'est comment mettre l'id dans l'url ? pourquoi il y a me chercher par exemple l'id numéro 3 

/produits/3

j'ai effectuer ce code mais ça rentre dans le else :

$(document).ready(function () {
        $('#sub2').on('click', function(e){
            e.preventDefault();
            // J'initialise le variable box
            var box = $('#resultat');
            // Je définis ma requête ajax
            $.ajax({
                // Adresse à laquelle la requête est envoyée
                url: '/produits/id',
                type: 'GET',
                data: {
                    id: $('#sub2').val()
                },
                // La fonction à apeller si la requête aboutie
                success: function (data) {
                    // Je charge les données dans box
                    box.html(data);
                    document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
                },
                // La fonction à appeler si la requête n'a pas abouti
                error: function() {
                    // J'affiche un message d'erreur
                    box.html("<p>Désolé, aucun résultat trouvé.</p>");
                }
            });
        });
    });

Quel id exactement veux-tu récupérer dans ton code HTML? Savoir ça me permettrait de te donner un code plus précis.

Avec le code donné au-dessus, je suis parti du principe que l'id que tu voulais récupérer était au même niveau que l'id sub2.

L'idée de mon code est de récupérer la valeur de ton id avec la fonction val() de jQuery.

Pour pouvoir récupérer le showProduct.id, tu dois faire ça:

 <td id="sub2" data-id="{{ showProduct.id }}">test</td>

Puis dans ton AJAX:

$(document).ready(function () {
        $('#sub2').on('click', function(e){
            e.preventDefault();
            // J'initialise le variable box
            var box = $('#resultat');
            // Je définis ma requête ajax
            var id = $('#sub2').data('id)
            $.ajax({
                // Adresse à laquelle la requête est envoyée
                url: '/produits/id',
                type: 'GET',
                data: {
                    id: id
                },
                // La fonction à apeller si la requête aboutie
                success: function (data) {
                    // Je charge les données dans box
                    box.html(data);
                    document.getElementById('para').innerHTML = "<p>Retour à la listes des produit <a href='{{ path('listes-product') }}'>ici</p></p>";
                },
                // La fonction à appeler si la requête n'a pas abouti
                error: function() {
                    // J'affiche un message d'erreur
                    box.html("<p>Désolé, aucun résultat trouvé.</p>");
                }
            });
        });
    });

Je veux récupérer mon id dynamiquement je vous explique 

lorsque je clique sur voir ici : 

 <a href="{{ path('show-product', {id: product.id}) }}" class="btn btn-info">Voir</a>

il va aller chercher l'id associer au produit donc moi ce que je veux c'est récupérer l'id dynamiquement et le code que vous m'avez proposer il ne fonctionne pas enfin il marche mais ça me retourne une erreur 500 vous penser que ça doit un problème d'url ? vue que mon url doit être comme ce ci : /produits/5 ou l'id 7 

merci pour votre aide c'est gentille ! bon courage a vous

Cela repose sur la même logique que tout à l'heure.

J'ai fait un test de mon côté et le code ci-dessous fonctionne:

Code HTML:

<p id="sub2">Test</p>

<a href="{{ path('show-product', {id: contact.id}) }}" id="show-product-link" class="btn btn-info">Voir</a>

Code JavaScript:

$(document).on('click', '#sub2', function (e) {
    e.preventDefault();

    var link = $('#show-product-link').attr('href');
    var id = link.split("/").pop();

    $.ajax({
        url: 'contact/showProduct/' + id,
        method: 'POST',
        data: {
            id: id
        }
    }).done(function (data) {
        console.log('success');
    }).fail(function (data) {
        console.log('fail');
    });
});

Code PHP:

/**
 * @param int $id
 * @Route("/contact/showProduct/{id}", name="show-product")
 */
public function showProduct(int $id)
{
    dump($id);
    die();
}