In my application, there are 3 interconnected tables: Events, Spots, and Bookings. Each Event can have multiple Spots, and each Spot can have multiple Bookings. My goal is to display the list of bookings for a specific spot using a Bootstrap calendar picker.
To achieve this, I have implemented a Bootstrap Calendar along with 3 hidden input fields (Vendor_id, Event_id, and the selected Date obtained through the changeDate event).
The challenge lies in passing these 3 inputs to retrieve the spot_id and eventually redirect to the corresponding link.
Here is a snippet of my code:
<div class="calendar">
<h2>Calendar</h2>
<div id="datepicker" data-date-format="yyyy-mm-dd" data-date="today">
</div>
<input type="hidden" id="my_hidden_input">
<input type="hidden" id="event_id" value="{{ $event->id }}">
<input type="hidden" id="vendor_id" value="{{ $event->vendor_id }}">
</div>
//JavaScript
<script type="text/javascript">
$('#datepicker').datepicker();
$('#datepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datepicker').datepicker('getFormattedDate')
);
var caldate = $('#my_hidden_input').val();
var event_id = $('#event_id').val();
var vendor_id = $('#vendor_id').val();
//console.log(abc);
//console.log(event_id);
$.get("/"+vendor_id+"/events/"+event_id +"/"+caldate, function( data )
{
console.log(data);//I get this as UNDEFINED
window.location.href="/"+vendor_id+"/events/"+event_id +"/"+data;
});
});
</script>
Controller Method
public function getspotid($vendor_id,$event_id,$date)
{
$spotid = Spot::select('id')
->where('event_id','=',$event_id)
->where('event_date','=',$date)
->first();
return response()->json(array('spotid' => $spotid));
}
While the controller and datepicker functionalities are working as expected, I am facing the challenge of returning the value back to the Javascript and redirecting to the URL: /{vendor_id}/events/{event_id}/{spot_id}.