Javascript filter method for different data-filter-CodePudding

I just started learning javascript. I am facing a problem with filtering products while getting value from database. my javascript code is below:

  `var $grids = $(".grid").isotope({
    itemSelector : '.grid-item',
    layoutMode : 'fitRows'
});

$(".button-group").on("click", "button", function(){
    var filterValue = $(this).attr('data-filter');
    
    $grids.isotope({ filter: filterValue});
})

where as my php code is below:

 <div id="filters" class="button-group text-end">
      <button class="btn" data-filter="*">All Categories</button>
      <button class="btn" data-filter=".clothes">Clothes</button>
      <button class="btn" data-filter=".samsung">Phones</button>
      <button class="btn" data-filter=".electronics">Electronics</button>
    </div>
    
    <div class="grid">
    <?php 
            while($row = mysqli_fetch_array($result2)) {
              
              ?>
      <div  class="grid-item border border-warning " <?php echo " {$row['item_brand']}";   ?> >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src=" <?php echo " {$row['item_image']}";   ?>" alt="Calli"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                $213
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>
      <?php 
            }
      ?>

I am getting data-filter value from database column "item-brand" having the same value as mention in data-filter above. Only All categories is working perfectly. Kindly help me out in this.

CodePudding user response：

Please make sure class e.g clothes, samsung are not escaped while php echo. means try

<div class="grid-item border border-warning <?php echo " {$row['item_brand']}"; ?>" > instead of <div class="grid-item border border-warning " <?php echo " {$row['item_brand']}"; ?> >

I have not exact php code or database so not sure but i have created demo html as below in which working fine will help you.

<div id="filters" class="button-group text-end">
      <button class="btn" data-filter="*">All Categories</button>
      <button class="btn" data-filter=".clothes">Clothes</button>
      <button class="btn" data-filter=".samsung">Phones</button>
      <button class="btn" data-filter=".electronics">Electronics</button>
    </div>
    
    <div class="grid">
   
      <div  class="grid-item border border-warning clothes" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                $213
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>

      <div  class="grid-item border border-warning clothes" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                $213
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>

      <div  class="grid-item border border-warning clothes" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                $213
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>
      <div  class="grid-item border border-warning samsung" >
        <div class="item py-1" style="width: 200px;">
        
        
          <a href=""><img class="img-fluid m-1 bg-light"  src="images/Hydrangeas.jpg" alt="Calli" height="100px;"></a> 
          <div class="text-center">
              <h6>Mobile</h6>
              <div class="rating text-warning">
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="fas fa-star"></i></span>
                  <span><i class="far fa-star"></i></span>
              </div>
              <div class="price">
                $213
              </div>
              <button class="btn btn-warning">Add to Cart</button>
          
       </div>
      </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
      <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
      <script type="text/javascript">
  var $grids = $(".grid").isotope({
    itemSelector : '.grid-item',
    layoutMode : 'fitRows'
});

$(".button-group").on("click", "button", function(){
    var filterValue = $(this).attr('data-filter');
    
    $grids.isotope({ filter: filterValue});
})
      </script>