John Davidson

Message:

Hi I am currently doing a appointment form where the user selects the date and time range he wants to book an appointment. I want to show the array of results on a modal upon clicking the search button and populate the array of results on my modal as

@forelse ($dt as $dt).

Below is my blade.php view page:

@section('content')

    <div class="card-body">

        <form action="{{ route('assistant.newappts.new') }}" method="POST">

            @method('post')

            @csrf

            <label for="select_date">Select Date:</label>

            <input type="text" id="select_date" class="form-control" name="select_date" placeholder="Select Date">

            <div class="spacer"></div>

            <div class="half-form">

                @foreach ($operatinghrs as $operatinghr)

                <div class="form-group">

                    <label for="starttime">Choose Start Time </label>

                    <br>

                    <input type="time" id="start_time" name="start_time" min="{{display24HTime($operatinghr->start_time)}}" max="{{display24HTime($operatinghr->end_time)}}" value="{{ display24HTime(old('start_time', $operatinghr->start_time))}}">

                </div>

                <div class="form-group">

                    <label for="starttime">Choose End Time</label>

                    <br>

                    <input type="time" id="end_time" name="end_time" min="{{display24HTime($operatinghr->start_time)}}" max="{{display24HTime($operatinghr->end_time)}}" value="{{ display24HTime(old('end_time', $operatinghr->end_time))}}">

                    <div class="form-update" style="float:right;">

                        <button type="button" class="btn btn-primary" data-toggle="modal" id="find_appointment_btn">Search</button>

                    </div>

                </div>

                @endforeach             

            </div>

            <div class="spacer"></div>

        </form>

    </div>

@overwrite



@section('modal')

<!-- MODAL NEW APPOINTMENT -->

<div class="modal fade" id="myModalNewAppointment">

    <div class="modal-dialog">

        <div class="modal-content">

            <!-- Modal Header -->

            <div class="modal-header">

                <h4 class="modal-title">Select Appointment</h4>

            </div>

            <!-- Modal body -->

            <div class="modal-body">

                <div class="form-group">

                    <div class="timeslots-section">

                        <div class="timeslots text-center">

                            @forelse ($dt as $dt)

                                <div class="timeslot">

                                    <input type="checkbox" class="timeslotchk" name="timeslot" value="{{$dt}}">

                                    {{$dt}}

                                </div>

                            @empty

                            <div class="empty" style="text-align: left">No appointments available.</div>

                            @endforelse

                        </div> <!-- end timeslots -->

                    </div>

                </div>

               

            </div>



            <!-- Modal footer -->

            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="new_appt_save_btn" data-loading-text="<i class='fa fa-spinner fa-spin'></i> saving..">Save</button>

                <button type="button" class="btn btn-outline-primary" id="close_btn" data-dismiss="modal">Close</button>

            </div>



        </div>

    </div>

</div>

@overwrite

Below is my javascript for the blade.php view page

<script>

    $(document).ready(function() {

        $('#select_date').datepicker({      

            dateFormat: "dd-mm-yy",

            changeMonth: true,

            changeYear: true,

            todayHighlight: true,

            toggleActive: true

        }); 



        $('#find_appointment_btn').click(function() {

            $('#myModalNewAppointment').modal({backdrop: 'static', keyboard: false});

            $('#myModalNewAppointment .modal-title').html('New Appointment');

        });

    })



</script>

Below is my controller class method for the on page load and the post request method for getting the appointment timings:

public function index()

    {

        if ($_SESSION['user_role'] != 'Assistant') {

            return "Unauthorized Access";

        }

        $workinghr = WorkingHour::where('clinic_id', $_SESSION['clinic_ID'])->where('off_day', false)->pluck('day')->toArray();

        

        $todayday = Carbon::now('Asia/Singapore')->format('l');

        $operatinghrs = $this->getWorkDayTiming($todayday);



        $data = [

            'link_menu_appt' => 'open active',

            'link_newappt' => 'active',                       

            'operatinghrs' => $operatinghrs,            

        ];



        return view('patient_appointment.available-appointment', $data);

    }



    public function filterByDate(Request $request)

    {

        $dateselected = $request->select_date;

        $starttime = $request->start_time;

        $endtime = $request->end_time;

        

        $dtarray = $this->getSelectedDate($dateselected, $starttime, $endtime);

        $dt = array_slice($dtarray, 0, 12, true);



        $todayday = Carbon::now('Asia/Singapore')->format('l');

        $operatinghrs = $this->getWorkDayTiming($todayday);

        

        $data = [

            'link_appt' => 'active',                   

            'operatinghrs' => $operatinghrs,       

            'dt' => $dt,                

        ];



        return view('patient_appointment.available-appointment', $data);



    }

---

My Answer:
To populate the array of results into the modal upon clicking the search button, you can use JavaScript to dynamically update the modal content with the array values. Here's how you can modify your JavaScript code to achieve this:

javascript
$(document).ready(function() {
$('#select_date').datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true,
todayHighlight: true,
toggleActive: true
});

$('#find_appointment_btn').click(function() {
$('#myModalNewAppointment').modal({backdrop: 'static', keyboard: false});
$('#myModalNewAppointment .modal-title').html('New Appointment');

// Populate the modal with the array values
var dtArray = {!! json_encode($dt) !!};
var timeslots = $('#myModalNewAppointment .timeslots');
timeslots.empty();

if (dtArray.length > 0) {
$.each(dtArray, function(index, value) {
var timeslot = $('

');
var checkbox = $('');
var label = $('' + value + '');

timeslot.append(checkbox);
timeslot.append(label);
timeslots.append(timeslot);
});
} else {
timeslots.append('

No appointments available.

');
}
});
});


In this code snippet, we first retrieve the array of results `$dt` from the Blade template using `json_encode` and assign it to the `dtArray` variable. Then, we iterate over the array values and dynamically create checkboxes and labels for each value, appending them to the modal's timeslots section.

Make sure to include this JavaScript code in your Blade template where the modal is defined. This way, when the search button is clicked, the modal will be populated with the array values.