Symfony Dynamic Dependent Dropdown using Ajax

I’m trying to make depend dropdown lists using ajax on Symfony project, I tried the following but it’s not working, I think the problem is in the request call in the Controller because the value is NULL (When using var_dump()). What I’m doing wrong ?
The form in Twig file:

<form method="GET" class="search-jobs-form" id="form" 
             name="form">
          <div class="row mb-5">
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 
            mb-lg-0">
              <select class="selectpicker dynamic" data-dependent="element" name="category" id="category" data-style="btn-white btn-lg" data-width="100%" data-live-search="true" title="Séléctionner une catégorie">
                {% for category in categories %}     
                <option>{{category}}</option>
                {% endfor %}
              </select> 

             </div>
            <div class="col-12 col-sm-6 col-md-6 col-lg-3 mb-4 mb-lg-0">
              <select class="selectpicker" name="element" id="element" data-style="btn-white btn-lg" data-width="100%" data-live-search="true" title="Séléctionner un élément">

              </select>
            </div>
           </div>
         </form>

The Controller function:

    /**
 * @Route("/site", name="site", methods="GET")
 */
   public function getObjects(Request $request)
       {
          $entityManager =$this->getDoctrine()->getManager();

         $productRepository = $entityManager->getRepository(Category::class);
         $categories_list = $productRepository->findAll();

        foreach ($categories_list as $category) {
            $categories[] =  $category->getName();
        }

      $slct = $request->query->get('select');
      var_dump($slct);
      $val = $request->get('value');
      $dpnt = $request->get('dependent');
      $em = $this->getDoctrine()->getManager();
      $q= $em->createQuery(
             "SELECT ce
             FROM AppEntityCategoryElements ce WHERE ce.category=:slct AND 
             ce.element=:val"
            );
        $q->setParameter('slct', $slct);
        $q->setParameter('val', $val);
        $data=$q->getResult();

    $output = '<option value="">Select '.ucfirst($dpnt).'</option>';
    foreach($data as $row)
      {
         $output .= '<option value="'.$row->$dpnt.'">'.$row->$dpnt.'</option>';
        }
      echo $output;

        return  $this->render('site/index.html.twig', [
            'categories' => $categories,
            'wilayas' => $wilayas
            ]);
             }

The ajax code:

<script>
  $(document).ready(function(){

  $("#category").change(function(){
  if($(this).val() != '')
   {
      var select = $(this).attr("id");
      var value = $(this).val();
      var dependent = $(this).data('dependent');
      var _token = $('input[name="_token"]').val();
        $.ajax({
           url:"{{path('site')}}",
           method:"GET",
           data:{select:select, value:value, _token:_token, dependent:dependent},
           success:function(result)
             {
               $('#'+dependent).html(result);
              }

               })
            }
          });

       $('#category').change(function(){
       $('#element').val('');
       });
      });
   </script>

Source: Symfony Questions

Was this helpful?

YesNo

0 / 0