In my laravel app, I have a div on a blade to display total number of daily orders.
<div class="row mt-3" id="shopify_row1">
<div class="col-md-2" id="shopify_widget1">
<div class="jumbotron bg-dark text-white">
<img class="img-fluid pull-left" src="https://cdn0.iconfinder.com/data/icons/social-media-2092/100/social-35-512.png" width="32" height="32">
<h6 class="text-secondary mt-2 px-4">Shopify</h6>
<hr class="border border-white">
<h5 class="text-white">Total Orders</h5>
<span class="tot_o" id="tot_o">{{ $tot_o }}</span>
</div>
</div>
</div>
I get this $tot_o
via controller.
Following is my index()
in the controller
if($request->has('selected_date')){
$selected_date=$request->selected_date;
$url = "https://[email protected]/admin/api/2022-10/orders/count.json?status=any&created_at_max=".$selected_date."";
}else{
$selected_date = date('Y-m-d');
$url = "https://[email protected]/admin/api/2022-10/orders/count.json?status=any&created_at_min=".$selected_date."";
}
$curl = curl_init( $url );
curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$json_response = curl_exec($curl);
curl_close($curl);
$result_1 = json_decode($json_response, TRUE);
$tot_o = $result_1['count'];
return view('dashboard.index', ['sum' => $sum,
'tot_o' => $tot_o]);
Now I’m trying to implement a date picker, so does the value of $tot_o should be changed according to the picked date, on change.
This is my date picker.
<td>
<input id="date" class="date form-control" type="date">
</td>
And this is my JavaScript.
<script>
$(document).on('change', '#date', function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'GET',
url : '/home',
data : {selected_date : $('#date').val()},
success:function(data){
$('#tot_o').empty();
var total_orders = JSON.parse("{{ json_encode($tot_o) }}")
console.log(total_orders);
},
timeout:10000
});
});
</script>
But here when I console.log my output it always gives me 0, even though the total is greater than the 0…
How can I correct my JS to display the value inside the <span class="tot_o" id="tot_o"></span>
correctly…
2
Answers
In the controller AJAX
So in AJAX
Span should be (
id="tot_o"
)You can use
.text()
or.html()
to write dataIn the controller, write this:
In ajax request’s success callback:
Finally, add an id named
tot_o
to the span element: