Je suis dans un projet Symfony ou j'ai créé une liste de produits qui s'affiche dans un template avec en haut une liste déroulante avec des options et je souhaiterai que lorsque l'on choisi une option dans la liste déroulante, le nombre d'occurrences pour le fournisseur sélectionné s'affiche sans qu'il n'y ait de rechargement de page ou autres, que le comptage soit fait en temps réel.

Fonction dans mon SupplierRepository

public function countBySupplier($supplier)
    {
        return $this->createQueryBuilder('a')
            ->select('count(a.id)')
            ->where('a.supplier = :supplier')
            ->setParameter('supplier', $supplier)
            ->getQuery()
            ->getSingleScalarResult();
    }

Controller 

#[Route('/stock', name: 'stock')]
    public function index(ProductRepository $productRepository, PaginatorInterface $paginator, Request $request): Response
    {
        $data = $productRepository->findAll();
        $products = $paginator->paginate(
            $data,
            $request->query->getInt('page', 1),
            15
        );

        return $this->render('stock/list.html.twig', [
            'products' => $products,
        ]);

Template list.html.twig

{% block content %}
  <div class="filter">
    <div>
      <label for="supplier-selector" class="select-desc">Nombre de produit en stock pour
      </label>
        <select name="supplier-number" id="supplier-selector">
          <option value=""></option>
          <option value="carrefour">carrefour</option>
          <option value="lidl">lidl</option>
          <option value="intermarché">intermarché</option>
          <option value="aldi">aldi</option>
          <option value="all">Tous les fournisseurs</option>
        </select>
<span id='js-result'></span>
    </div>
  </div>
  <table>
    <tr class="border-top-0 tr-header">
      <th>Fournisseur</th>
      <th class="table-head-center">Type de produit</th>
      <th class="table-head-center">Référence</th>
      <th class="table-head-center">Date de péremption</th>
      <th></th>
    </tr>
    {% for product in products %}
      <tr>
        <td>{{ product.supplier.compagnyName}}</td>
        <td class="table-row-center">{{ product.productCategory.type}}</td>
        <td class="table-row-center">{{ product.reference}}</td>
        <td class="table-row-center">{{ product.expirationDate |date('d-m-Y')}}</td>
        <td class="data-modifier">
          <a href="#">Modifier</a>
        </td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}

Si quelqu'un à une idée, je suis preneur

-
Edité par maddaj 21 mai 2021 à 10:48:20

Bonjour,

Ma suggestion : au click sur une option de la liste déroulante, tu fais une requête ajax qui va compter le nombre d'occurrences.

Donc un peu de javascript ... 

A+

monkey3d a écrit:

Bonjour,

Ma suggestion : au click sur une option de la liste déroulante, tu fais une requête ajax qui va compter le nombre d'occurrences.

Donc un peu de javascript ... 

A+

Pour le javascript, tu as en gros 2 possibilités :

- la dirty qui est de mettre le code javascript dans un block javascript de la vue twig,

- la bonne qui est de mettre le code dans un fichier js que tu peux gérer avec par exemple avec webpack encore : https://symfony.com/doc/current/frontend.html

La première est nettement la plus simple mais moins pro.

Il te faut faire une nouvelle action dans ton contrôleur qui sera appelé par l'ajax du javascript avec par exemple l'id de l'option. Cette nouvelle action très simple va retourner le nombre et le javascript affichera ce nombre dans ta vue.

Ici un tuto pour faire du ajax avec jquery : https://openclassrooms.com/fr/courses/1567926-un-site-web-dynamique-avec-jquery/1569648-le-fonctionnement-de-ajax

Tu peux aussi faire sans jquery en pur javascript et ce n'est pas les tutos qui manquent sur le net.

A noter que cette technique est une base importante à maîtriser pour faire un site web avec un rendu 'user friendly'.

A+ 

monkey3d a écrit:

Il te faut faire une nouvelle action dans ton contrôleur qui sera appelé par l'ajax du javascript avec par exemple l'id de l'option. Cette nouvelle action très simple va retourner le nombre et le javascript affichera ce nombre dans ta vue.

Je comprends ce que tu veux me dire mais je ne comprends pas trop comment m'y prendre...

Tu peux me dire si mon ajax te semble correct

$('#supplier-selector').change(function() {
  var supplier = $(this).val(); 
  var dataString = "supplier="+supplier;
  $.ajax({
       url : '{{ path('product_count', {'id' : supplier.id}) }}',
       type : 'GET',
       data : dataString,
       success : function(code_html, statut){ 
         $("#js-result").html(result);
     },
       error : function(resultat, statut, erreur){
       }
    });
    return false;
});

J'ai une erreur dans la ligne 

url : '{{ path('product_count', {'id' : supplier.id}) }}',

Neither the property "id" nor one of the methods "id()", "getid()"/"isid()"/"hasid()" or "__call()" exist and have public access in class "Knp\Bundle\PaginatorBundle\Pagination\SlidingPagination".

Fonction de mon controller (je sais que ce n'est pas sa mais je n'arrive pas à comprendre comment la créer)

/**
     * @param Request $request
     * @return Response
     * @Route("/product/{id}/count",methods={"GET"},name="product_count")
     */
    public function ajaxAction(Request $request)
    {
        $response = new Response($request->get('supplier'));
        return $this->render('stock/list.html.twig', [
            'response' => $response,
        ]);
    }

Bizarre ton message d'erreur pour le premier point avec cette histoire de paginator.

Je te dis comment je fais sur mes exemples :

1) pour transmettre la route de twig à javascript, j'applique la doc : https://symfony.com/doc/current/frontend/encore/server-data.html

dans la partie twig :

<div id="js-url-brain" data-url-brain="{{ path('brain_ajax') }}"></div>

Récupération de la donnée dans lbloc jab=vascript :

var urlBrain = $('#js-url-brain').data('urlBrain');

Puis lancement de la requête ajax en passant les paramètres (utilisation de jquery) :

$.ajax({
        type: "POST",
        url: urlBrain,
        data: {
    	      id: id 
        },
        cache: false,
        success: function(data) {
            le traitement à effectuer ...
        }

Pour ton second problème, c'est une réponse de type json qu'il faut faire et non renvoyer une vue :

/**
 * @Route("/brain/ajax", name="brain_ajax")
 */
    public function ajax(Request $request)
    {
        if($request->isXmlHttpRequest())
        {
            $id = $request->get('id');
            puis ton traitement pour compter qui va aboutir à une variable ... 
            $response = new Response(json_encode($variable));
            $response->headers->set('Content-Type', 'application/json');
            return $response;
        }
    }

Et c'est le retour json que tu utilises dans la partie success du javascript.

J'espère que cela te sera utile.

A+

C'est top merci beaucoup pour ton aide 

A +