2017-06-01 1 views
0

Je suis tryng pour créer un filtre de barre latérale pour un e-commerce. J'ai implémenté avec succès une pagination de défilement infinie, mais maintenant j'ai un problème avec les filtres.Filtre Ajax dynamique avec implémentation Laravel

<ul class="check-box-list"> 
     <?php $m = 1; ?> 
     @foreach($marchi as $marchio) 
      <li> 
      <input type="checkbox" id="m{{$m}}" class="marchio" name="{{ $marchio->id_produttore }}" data-marchio="{{ $marchio->brand->nome}}" value="{{ $marchio->brand->nome }}" /> 
      <label for="m{{$m}}"> 
      <span class="button"></span> 
       {{ $marchio->id_produttore }}<span class="count">({{ $marchio->total }})</span> 
      </label> 
    </li> 
<?php $m++; ?> 
    @endforeach 
</ul> 

avoir ces cases à cocher ci-dessus générées dynamiquement. Si je clique sur un de ces i peut déclencher la valeur correcte en utilisant ce js:

<script type="text/javascript"> 
$('.marchio').on('click', function() { 
     var marchio = $('.marchio:checked').val(); 
     $.ajax(
     { 
      url: '?marchio=' + marchio, 
      type: "get", 
      beforeSend: function() 
      { 
       $('.ajax-load').show(); 
      } 
     }) 
     .done(function(data) 
     { 
      if(data.html == " "){ 
       $('.ajax-load').html("No more records found"); 
       return; 
      } 
      $('.ajax-load').hide(); 
      $("#post-data").append(data.html); 
     }) 
     .fail(function(jqXHR, ajaxOptions, thrownError) 
     { 
       alert('server not responding...'); 
     }); 
}); 

Mais si je clique sur une 2ème case, la valeur ajoutée à l'URL ajax restant le même, si je décochez la première qui reste la seconde. Je dois passer à l'url plusieurs valeurs de la même classe checkbox en l'ajoutant à l'url. Et si certaines catégories peuvent avoir plusieurs filtres j'ai besoin de l'URL ajax peut accepter différents? Querystryngs par exemple en ajoutant ',' des valeurs séparées une fois que nous cliquons sur les cases à cocher. Est-ce que quelqu'un peut m'aider?

Répondre

1

Dans votre ajax appel, vous pouvez faire quelque chose comme ceci:

$('.marchio').on('click', function() { 
    var marchi = {}; 

    $('.marchio:checked').each(function() { 
     marchi[$(this).attr('name')] = $(this).val(); 
    }); 

    $.ajax({ 
     url: '', 
     type: 'get', 

     // This is the important part! 
     data: {marchi: marchi} 
    }) 
}); 

Ceci enverra une demande comme ceci:

http://example.com/?marchi[name1]=value1&marchi[name2]=value2 

En PHP, cela est tout simplement transformé en un tableau, vous peut simplement faire cela dans votre contrôleur:

foreach (Request::get('marchi') as $id_produttore => $brandNome) { 
    // This marchio has been selected. 
} 

Si vous voulez transmettre plus de valeurs, vous pouvez simplement ajouter mor e à la propriété data de l'appel $.ajax.

+0

Wow JOE, vous êtes génial. Beaucoup, beaucoup, beaucoup, beaucoup travaillent, et j'ai appris un nouveau concept important. – rubenSousa

0

Je pense qu'il serait plus facile si vous créez une forme en dehors de la boucle et passer toutes les cases au contrôleur comme un tableau nommant comme celui-ci (name = « liste [] »)

<form action='{{route('someRoute)}}' method='post'> 
    {{csrf_field()}} 
    <ul class="check-box-list"> 
     <?php $m = 1; ?> 
     @foreach($marchi as $marchio) 
      <li> 
      <input type="checkbox" id="m{{$m}}" class="marchio" name="list[]" data-marchio="{{ $marchio->brand->nome}}" value="{{ $marchio->brand->nome }}" /> 
      <label for="m{{$m}}"> 
      <span class="button"></span> 
       {{ $marchio->id_produttore }}<span class="count">({{ $marchio->total }})</span> 
      </label> 
    </li> 
<?php $m++; ?> 
    @endforeach 
</ul> 
</form> 

Et dans le contrôleur, vous pouvez passer à travers les résultats assez facile

public function controllerName(Request $data) 
{ 
    $vars=$data->input('list'); 
    foreach($vars as $var){ 
    // do somnthing 
    } 
} 
+0

Cela ne semble pas utile lors de l'utilisation ajax. Ce qui signifie qu'il aurait besoin de soumettre le formulaire et recharger la page, au lieu d'appliquer des filtres et de charger les résultats en utilisant ajax. – Joe

+0

Oui, c'est correct. Avec une forme est assez facile ... je dois passer chaque valeur de case à cocher à travers Ajax – rubenSousa