Почему загруженный ajax контент не отображается должным образом? - PullRequest
Новая
       1

Почему загруженный ajax контент не отображается должным образом?

0 голосов
/ 13 октября 2019

Я пытаюсь показать продукты определенной категории, когда на нее нажимают, используя jquery ajax, т.е. без перезагрузки страницы.

Теперь, когда продукты загружаются с помощью Ajax, кажется, что их CSS нарушен или, возможно, некоторыеСобытия jQuery не загружаются. Я проверил, все классы CSS хорошо размещены, как в оригинальном файле, а также я попробовал метод .on, как предложено в некоторых других ответах, но он ничего не делает. Можете ли вы помочь мне найти причину проблемы?

оригинальный вид: вот как должен выглядеть

После загрузки Ajax-контента: и этовзгляд после загрузки ajax

all_products.php (оригинальный файл) 

<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="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
              <div class="product_content">
                <div class="product_price">${{$product->price}}</div>
                <div class="product_name"><div><a href="{{URL::to('')}}/user/product/{{$product->id}}" tabindex="0">{{ucwords($product->name)}}</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>

ajax_products.blade.php (будет добавлен через ajax) 

@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="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
                  <div class="product_content">
                    <div class="product_price">${{$product->price}}</div>
                    <div class="product_name"><div><a href="{{URL::to('')}}/user/product/{{$product->id}}" tabindex="0">{{ucwords($product->name)}}</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

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');
      }
    });
});

frontController.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);
}

shop.css 

.product_grid
{
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	-ms-transform: translateX(-20px);
	-o-transform: translateX(-20px);
	transform: translateX(-20px);
	width: calc(100% + 40px);
}
.product_grid_border
{
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 3px;
	height: 100%;
	background: #FFFFFF;
	z-index: 1;
}
.product_item
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 20%;
	background: #FFFFFF;
	cursor: pointer;
	padding-top: 40px;
	padding-bottom: 24px;
	text-align: center;
}
.product_border
{
	display: block;
	position: absolute;
	top: 52px;
	right: 1px;
	width: 1px;
	height: calc(100% - 71px);
	background: #e5e5e5;
}
.product_image
{
	width: 100%;
	height: 115px;
}
.product_image img
{
	display: block;
	position: relative;
	max-width: 100%;
}
.product_content
{
	width: 100%;
}
.product_price
{
	font-size: 16px;
	font-weight: 500;
	margin-top: 25px;
}
.product_item.discount
{
	color: #df3b3b;
}
.product_price span
{
	position: relative;
	font-size: 12px;
	font-weight: 400;
	color: rgba(0,0,0,0.6);
	margin-left: 10px;
}
.product_price span::after
{
	display: block;
	position: absolute;
	top: 6px;
	left: -2px;
	width: calc(100% + 4px);
	height: 1px;
	background: #8d8d8d;
	content: '';
}
.product_name
{
	margin-top: 4px;
	overflow: hidden;
}
.product_name div
{
	width: 100%;
	
}
.product_name div a
{
	font-size: 14px;
	font-weight: 400;
	color: #000000;
	white-space: nowrap;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_name div a:hover
{
	color: #0e8ce4;
}
.product_fav
{
	position: absolute;
	top: 33px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: #FFFFFF;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
	border-radius: 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_fav:hover
{
	box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.product_fav i
{
	display: block;
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	color: #cccccc;
	line-height: 36px;
	pointer-events: none;
	z-index: 0;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_fav.active i
{
	color: red;
}
.product_item:hover .product_fav
{
	visibility: visible;
	opacity: 1;
}
.product_marks
{
	display: block;
	position: absolute;
	top: 33px;
	left: 24px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.product_mark
{
	display: inline-block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #FFFFFF;
	text-align: center;
	line-height: 36px;
	font-size: 12px;
}
.product_new
{
	display: none;
	background: #0e8ce4;
	visibility: hidden;
	opacity: 0;
}
.product_discount
{
	display: none;
	background: #df3b3b;
	visibility: hidden;
	opacity: 0;
}
.product_item.is_new .product_new,
.product_item.discount .product_discount
{
	display: inline-block;
	visibility: visible;
	opacity: 1;	
}
shop.js (это также не работает после ajax) 

function initIsotope() {
  var sortingButtons = $('.shop_sorting_button');

  $('.product_grid').isotope({
    itemSelector: '.product_item',
    getSortData: {
      price: function(itemElement) {
        var priceEle = $(itemElement).find('.product_price').text().replace('$', '');
        return parseFloat(priceEle);
      },
      name: '.product_name div a'
    },
    animationOptions: {
      duration: 750,
      easing: 'linear',
      queue: false
    }
  });

  // Sort based on the value from the sorting_type dropdown
  sortingButtons.each(function() {
    $(this).on('click', function() {
      $('.sorting_text').text($(this).text());
      var option = $(this).attr('data-isotope-option');
      option = JSON.parse(option);
      $('.product_grid').isotope(option);
    });
  });

}

/* 

	8. Init Price Slider

	*/

function initPriceSlider() {
  if ($("#slider-range").length) {
    $("#slider-range").slider({
      range: true,
      min: 0,
      max: 1000,
      values: [0, 580],
      slide: function(event, ui) {
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
      }
    });

    $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
    $('.ui-slider-handle').on('mouseup', function() {
      $('.product_grid').isotope({
        filter: function() {
          var priceRange = $('#amount').val();
          var priceMin = parseFloat(priceRange.split('-')[0].replace('$', ''));
          var priceMax = parseFloat(priceRange.split('-')[1].replace('$', ''));
          var itemPrice = $(this).find('.product_price').clone().children().remove().end().text().replace('$', '');

          return (itemPrice > priceMin) && (itemPrice < priceMax);
        },
        animationOptions: {
          duration: 750,
          easing: 'linear',
          queue: false
        }
      });
    });
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...