templates/jurisprudence/default.html.twig line 1

Open in your IDE?
  1. {% extends 'layout.html.twig' %}
  3. {% block layout %}
  4.     <div class="row" style="display:block; padding-left:40px">
  5.         <h2 style="text-align: center">
  6.             Chercher une jurisprudence
  7.         </h2>
  8.     </div>
  9.     <div class="row" style="padding-left:40px; padding-top:40px;">
  10.             <div class="col-sm-10 col-lg-6" id="select_category">
  11.                 <select class="form-control custom-select" id="0">
  12.                     <option value="none">Sélectionez une catégorie</option>
  13.                     {% for data in jpData[0] %}
  14.                         <option class="option-category" value="{{ data.id }}">{{ data.name }}</option>
  15.                     {% endfor %}
  16.                 </select>
  17.             </div>
  18.         <br />
  20.         <div class="col-md-10" id="jurisprudences_list" style="padding-top:20px">
  21.         </div>
  22.     </div>
  23. {% endblock %}
  25. {% block javascripts %}
  26.     {{ parent() }}
  27.     <script>
  28.         var categoryRequestId = null;
  30.         $(document).ready ( function () {
  31.             $(document).on('change', 'select', function () {
  33.                 // Get the selected element id
  34.                 var customSelectId = $(this).attr('id');
  36.                 // Get parent ID
  37.                 categoryRequestId = $(this).val();
  39.                 // Load jurisprudences
  40.                 showJurisprudences();
  42.                 // Remove next select
  43.                 for (let i = (parseInt(customSelectId)+1); i < 10; i++) {
  44.                     // Get element after the selected id
  45.                     var selectAfterCustomId = $('#'+i);
  46.                     // Remove it
  47.                     selectAfterCustomId.remove();
  48.                 }
  50.                 var newCustomSelectId = parseInt(customSelectId) + 1;
  51.                 var newSelect = '<select class="custom-select" id="'+newCustomSelectId+'" style="margin-top:10px"><option>Sélectionner une sous catégorie</option>';
  52.                 var jpDataEncode = {{ jpData|json_encode|raw }};
  54.                 var okFlag = false;
  55.                 if (jpDataEncode[newCustomSelectId] === undefined) {
  56.                     return;
  57.                 }
  59.                 // if ('Sélectionner une sous catégorie' === categoryRequestId) {
  60.                 //     newCustomSelectId = newCustomSelectId -1;
  61.                 // }
  63.                 jpDataEncode[newCustomSelectId].forEach(jpCategory => {
  64.                     if (jpCategory.parentId == categoryRequestId) {
  65.                         okFlag = true;
  66.                         var newOption = '<option class="option-category" value="'+jpCategory.id+'">'+jpCategory.name+'</option>';
  67.                         newSelect = newSelect+''+newOption;
  68.                     }
  69.                 })
  70.                 newSelect = newSelect+'</select>';
  71.                 if (okFlag === true) {
  72.                     $('#select_category').append(newSelect)
  73.                 }
  74.             })
  75.         })
  77.         function showJurisprudences() {
  78.             if (categoryRequestId == null) {
  79.                 return;
  80.             }
  82.             // Add loader
  83.             $('#jurisprudences_list').html('<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>');
  85.             var jpListUrl = "{{ path('jurisprudences_list') }}";
  86.             $.ajax({
  87.                 type: 'GET',
  88.                 url: jpListUrl,
  89.                 data: {
  90.                     'categorie': categoryRequestId,
  91.                 }
  92.             }).then(function(response) {
  93.                 $('#jurisprudences_list').html(response);
  94.             });
  95.         }
  96.     </script>
  97. {% endblock %}
  99. {% block stylesheets %}
  100.     {{ parent() }}
  101.     <style>
  102.         @media screen and (max-width: 1000px) {
  103.             .custom-select {
  104.                 font-size: 50px;
  105.             }
  106.         }
  107.     </style>
  108. {% endblock %}