Why ajax loaded content is not showing properly?

I am trying to show products of a particular category when it is clicked by using jquery ajax i.e without reloading the page.

Now when the products load with Ajax it seems that their CSS is disturbed or maybe some jQuery events not loading. I have checked, all the CSS classes are well placed as in original file and also i ave tried the ".on" method as suggested in some other answers but it doesn't do anything. can you please help me find what the problem is?

original look : [this is what the look should be like][1]

After Ajax loaded content : [and this look is after the ajax loading][2]

    //this is my_js file: my_js.js
    
        $(document).on('click', '.cat', function() {
    
    
          $.ajax({
            url: 'http://localhost/cart_test/user/get_cats',
            type: 'POST',
            data: {
              cat: $(this).attr('id')
            },
    
            success: function(data) {
              d = JSON.parse(data);
              var container = $('#prod_container');
              container.empty();
              container.append(d);
            },
    
            error: function() {
              alert('error');
            }
          });
    
    
        });

below is products.blade.php

    //this is original file
        <div class="product_grid">
          <div class="product_grid_border"></div>
    
          <div id="prod_container">
            @foreach($products as $product)
            <!-- Product Item -->
    
            <div class="product_item is_new">
              <div class="product_border"></div>
              <div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="/public/uploads/images/" alt=""></div>
              <div class="product_content">
                <div class="product_price">$</div>
                <div class="product_name">
                  <div><a href="/user/product/" tabindex="0"></a></div>
                </div>
              </div>
              <div class="product_fav"><i class="fas fa-heart"></i></div>
              <ul class="product_marks">
                <li class="product_mark product_discount">-25%</li>
                <li class="product_mark product_new">new</li>
              </ul>
            </div>
    
    
            @endforeach
          </div>
    
    
        </div>

below is the blade template to be loaded via ajax: ajax_products.blade.php:

@foreach($products as $product)
<!-- Product Item -->

<div class="product_item is_new">
  <div class="product_border"></div>
  <div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="/public/uploads/images/" alt=""></div>
  <div class="product_content">
    <div class="product_price">$</div>
    <div class="product_name">
      <div><a href="/user/product/" tabindex="0"></a></div>
    </div>
  </div>
  <div class="product_fav"><i class="fas fa-heart"></i></div>
  <ul class="product_marks">
    <li class="product_mark product_discount">-25%</li>
    <li class="product_mark product_new">new</li>
  </ul>
</div>


@endforeach

and below is the controller frontController.php

```php

public function get_cats(Request $request)
{
    $id = $request->input('cat');
    $products = product::where('category_id','=',$id)->get();
    $prods = view('frontend.modules.ajax_products',compact('products'))->render();

    echo json_encode($prods);
}

```
----------


  [1]: https://ift.tt/2OOhNvj
  [2]: https://ift.tt/2pdPUBW

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/33udxVR
via IFTTT