step-1: HTML
<div class="row">
<div class="col-lg-12">
<div class="card mb-0">
<div class="tab-content card-body p-0 pt-2">
<div class="tab-pane fade active show">
<div class="card-body pt-0">
<div class="card-table table-responsive shadow-0 mb-0 wait">
<div id="load_data"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
step-2: Javascript Link
<script src="{{ asset('/website/assets/wait-me/waitMe.min.js')}}"></script>
step-3: Ajax function
$('.get_data_btn').on('click', function(){
get_data();
});
function get_data(){
var base = '{{url('/')}}';
var product_life_id =$('.product_id').val();
var from_date = $('.from_date').val();
var to_date = $('.to_date').val();
if(product_life_id){
$('.wait').waitMe({effect : 'facebook', text : 'Please wait...'});
$.ajax({
method: 'GET',
url: base+'/backoffice/report/product-life-cycle/filter',
data: {'from_date' : from_date, 'to_date' : to_date, 'product_life_id' : product_life_id},
success: function(data){ // What to do if we succeed
//console.log(response);
$('#load_data').html(data);
},
error: function(jqXHR, textStatus, errorThrown) { // What to do if we fail
console.log(JSON.stringify(jqXHR));
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
}).always(function(){
$('.wait').waitMe("hide");
});
}else{
alert('Please first type product name');
}
}
step-4: Create load_data.blade.php
public function product(Request $request){
return view ('load.load_data');
}