Javascript filter method for different data-filter

Question

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.

Answer 1

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>