In day of my learning on PHP Laravel building application from scratch with googling help and docs.
<select class="custom-select jsUpdateOrderStatus" id="ddlTodayOrdersStatus{{$loop->index}}" name="ddlTodayOrdersStatus{{$loop->index}}"
data-orderid="{{$order->orderId}}" >
@foreach ($orderStatus as $status)
<option value="{{$loop->index}}"
{{$order->status === $loop->index ? "selected" : "" }}"
data-loopIndex=" {{$loop->index}}">{{$status}}</option>
@endforeach
</select>
To Note : $order is passed as dynamic object to the blade file in which this code will be implemented, its for just example to explain. (hint: make sure your laravel directive/code are intended properly in blade files, otherwise it might throw error to the view)
<p>Example code 1: </p>
<p>{{ Carbon\Carbon::parse($order->createdAt)->format('d-M-Y H:i:s') }}</p>
<p>Example code 2:</p>
<p>{{ Carbon\Carbon::parse($order->createdAt)->diffForhumans() }}</p>
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
</script>
<script>
// alert('javascripts section loaded test!');
$(function() {
// alert("jQuery works test!") ;
$('.jsUpdateOrderStatus').change(function(e) {
// console.log('change fired! ');
const curTargetEle = $(e.target);
const value = curTargetEle.val();
const orderId = curTargetEle.data('orderid');
const curDDLUpdatedText = curTargetEle.find('option:selected').text();
const curDDLUpdatedTextInital = curDDLUpdatedText.substring(0,1);
const curSiblingLabelEle = curTargetEle.siblings('.input-group-prepend').find('label');
if(!value || value === "") {
console.error('value not passed');
return;
}
//perform AJAX call
// console.log('jsUpdateOrderStatus fired ', value, orderId);
const payload = {
_token: $('meta[name="csrf-token"]').attr('content'),
orderId,
value
};
if(confirm("Are you sure, you want to change order status?")) {
$.ajax({
url: "{{route('update-order-status')}}",
type: "post",
cache: false,
data: payload,
// dataType: 'json',
// data:"{id:$(this).data('fid')}"
}).done(function(resp) {
//success
console.log("Order status success response: ", {resp});
if(resp && resp.success) {
curSiblingLabelEle.text(curDDLUpdatedTextInital);
const msg = `Order ${orderId} set to ${curDDLUpdatedText} succesfully`;
toastr["success"](msg || resp.message);
location.reload();
}
}).fail(function(err){
//failure
toastr["error"](err.responseText || err.status);
console.error("Order status error response: ", {err});
});
}
});
});
</script>
To note: here some ccode you won't find relevant to your need, you may remove them, this is to show a general idea of ajax JavaScript side of implementation on some html input/select field change event to dynamically handle request.
<ul class="nav nav-tabs" id="myTab" role="tablist
@if (count($todayOrders))
<li class="nav-item" role="presentation">
<a class="nav-link active" id="todayorder-tab" data-toggle="tab" href="#todayorder" role="tab" aria-controls="todayorder" aria-selected="true">Today's Order <sup class="badge badge-pill badge-dark">{{count($todayOrders)}}</sup></a>
</li>
@endif
<li class="nav-item" role="presentation">
<a class="nav-link @if (!count($todayOrders)) active @endif " id="allorder-tab"
data-toggle="tab" href="#allorder" role="tab" aria-controls="allorder" aria-selected="false">All Orders <sup class="badge badge-pill badge-dark">{{count($orders)}}</sup></a>
</li>
</ul>
To note: this is just example you can do the same with any other kind of html codes.
class="nav-link @if (!count($todayOrders)) active @endif "
HTML code example:
<a class="nav-link active" id="todayorder-tab" data-toggle="tab" href="#todayorder" role="tab" aria-controls="todayorder" aria-selected="true">Today's Order <sup class="badge badge-pill badge-dark">{{count($todayOrders)}}</sup></a>
Thanks for visiting & reading this post. Hope it help you in your way of building applications.
Break! I didn’t plan it. One day I just didn’t feel like opening Instagram—and then…
AI tools Let’s be real—AI sounds like either a robot apocalypse or something only tech…
Summer vacation is a great time for kids to explore, have fun, and learn new…
Goal: Understand transformers, large language models, and the architecture behind ChatGPT. Tutorial Suggestions: ✅ “Transformers…
Goal: Build apps or tools with ChatGPT or GPT-4 API. Tutorial Suggestions: ✅ OpenAI API…
Goal: Learn how to prompt better, write content, brainstorm, code, etc. Tutorial Suggestions: ✅ OpenAI's…