У меня есть сетка продуктов, изначально показывающая список продуктов в сетке. И когда я ищу продукт по категориям по вызову ajax, я показываю только продукт, который находится в этой категории внутри этой сетки. Я не мог понять, как мне показать ответ ajax в этой сетке.
Сетка продукта:
<div class="col-sm-9"> @foreach($products as $product) <div class="col-md-4"> <div class="products-gallery"> <h4>{{$product->name}}</h4> </div> </div> @endforeach </div>
Вот моя часть javascript:
jQuery('#searchId').on('change', function() { var category_id = jQuery(this).val() searchProduct(category_id) }) function searchProduct(category_id) { $.ajax({ method: 'get', url: "{{url('searchByCategory')}}", data: {'category_id' : category_id}, success: function(html){ $(".col-sm-9").html(html) }, error: function(jqXHR, textStatus, errorThrown) { console.log(JSON.stringify(jqXHR)); console.log("AJAX error: " + textStatus + ' : ' + errorThrown); } }); }
Это мой ответ ajax:
[{…}] 0: category_id:3 created_at:"2017-09-11 20:33:19" id:4 name:"HT 400 Triplex " updated_at:"2017-09-11 20:33:19"
$(document).on('submit', 'form#yourFormID', function(event) { event.preventDefault(); $.ajax({ url: '/route/url', type: 'GET', dataType: 'html', data: {firstValue: 'foo', secondValue: 'bar'}, success: function(html){ $(".col-sm-9").html(html) //OR $(".col-sm-9").load(/route/url); } }); }); //route Route::get('/route/url', 'ControllerName@fetchDataAction'); //Controller public function fetchDataAction(Request $request){ $data = ModelName::where('foo', $request->get('firstValue'))->where('bar', $request->get('secondValue')); return view('result', ['products' => $data]); } //result.blade.php @foreach($products as $product) <div class="col-md-4"> <div class="products-gallery"> <h4>{{$product->name}}</h4> </div> </div> @endforeach
Это должно дать вам результат, который вы хотите.