Try using AJAX for Appointment class

[TungKimProgrammer]

Try using AJAX to update pages dynamically

[crex424]

@TungKimProgrammer Depending, we may want to update all of our controllers/models to use this as well. I am wanting to add a search function for all the list of customers, doctors, etc. to allow the users/admins an easier ability to find the information they need. Most likely going to be quite difficult, but at the very least we will need AJAX for it. Of course, I will make the changes to them once we figure out AJAX. What do you think?

[TungKimProgrammer]

Sounds like a great idea. But I am still struggling with the dynamic stuff.

[TungKimProgrammer]

@crex424 I have created 3 branches to work on this issue. It seems I am on the right track on the branch: tungkim-issue#95-3-try-using-ajax The AJAX looks like working: The "TimeSlots of selected Doctor" select list is showing when a doctor is selected. But somehow it's showing blank. There might be something not right. I created a method in the CustomerAppointment Controller:

public async Task<List<TimeSlot>> GetTimeSlotsByDoctorId(int DoctorId)
        {
            CustomerAppointmentCreateViewModel viewModel = new();
            viewModel.TimeSlotsByDoctorId = await _context.TimeSlot
                                                        .Where(ts => ts.DoctorId == DoctorId && ts.TimeSlotStatus == TimeslotStatus.Available)
                                                        .OrderBy(ts => ts.TimeSlotDate)
                                                        .ToListAsync();

            return viewModel.TimeSlotsByDoctorId;
        }

and it works properly. Can be check by typing the direct URL in the browser: https://localhost:7229/CustomerAppointments/GetTimeSlotsByDoctorId?DoctorId=123

AJAX Debugging: using your browser's developer tools to inspect the AJAX request and response. In the "Network" tab, you can see the details of the request and response every time you select a doctor.

[crex424]

@TungKimProgrammer Amazing work. I was having a lot of issues trying to understand AJAX and here you are getting it. Even if the drop-down menu is blank, that is still a step forward. When I check the browser developer tool, I find 2 errors related to the AJAX: Uncaught ReferenceError: data is not defined at HTMLSelectElement. (Create:142:41) at HTMLSelectElement.dispatch (jquery.min.js:2:43090) at v.handle (jquery.min.js:2:41074)

Not sure if this helps or not, but I will try looking into it to find the issue if possible.

[crex424]

@TungKimProgrammer I did some tinkering and got the dropdown list to at least display something. It comes out with this:

I made the following changes to line 87 on the Create view page.

timeSlotDropdown.append(/*new Option(*/"<option value='" + timeSlot.TimeSlotId + "'>" + timeSlot.TimeSlotDate + " " + timeSlot.StartTime + " " + timeSlot.EndTime + "</option>")/*)*/;

Let me know whether you think this is better, or if I have just made it worse.

[TungKimProgrammer]

It is a big step. It's showing something, better than blank. At least we know we are on the right track, just a few codes away from success. Thanks @crex424!

[crex424]

@crex424 Here is a stack overflow post trying to achieve the same thing we are. Just in case it helps any. https://stackoverflow.com/questions/28627421/better-way-to-load-2-dropdown-in-mvc

[crex424]

@TungKimProgrammer I have fixed the issue where the drop down list would be populated with undefined. Here is the code I changed:

timeSlotDropdown.append("<option value='" + timeSlot.timeSlotId + "'>" + timeSlot.timeSlotDate + " " + timeSlot.startTime + " " + timeSlot.endTime + "</option>");

It seems that JavaScript will switch the model names from pascal casing to camel casing. In other words, TimeSlotDate in javascript will now be timeSlotDate. So the problem was that I was not taking this into account and was trying to grab the specific data using pascal instead of camel casing.

[TungKimProgrammer]

Awesome! Now we have to figure how to display the TimeSlot dropdown list nice and short .

[crex424]

Indeed. I think we should place the start time and end time in their own dropdown list which appears when the date is selected. Seeing as there is too much data in that single dropdown. Let me know what you think.

[TungKimProgrammer]

I am done retouching the dropdown list, let me finish the Create view and the Create functionality to see if it works and then we could improve the view. Or you can work on it now as you want. We can go parallel

[TungKimProgrammer]

@crex424 Would you mind to take a look at [HttpPost] of Create(CustomerAppointmentCreateViewModel customerAppointment)? For some reason, I can't make it work yet. My idea is: Grab all info from Create view, [HttpGet], and create new appointment and also change the TimeslotStatus of the chosen TimeSlot from Available to Booked.

https://github.com/crex424/EasyAppointmentManager/tree/tungkim-issue%2395-3-try-using-ajax

[crex424]

@TungKimProgrammer So far, from debugging. The create button is not calling the [HttpPost] create function at all. I have a breakpoint set at the [HttpPost] create function and when I click the create button it does not call the function at all. I do not know why as of yet. I will continue looking into it.

[crex424]

If we are unable to fix the problem by tonight, I think we should merge it with main, and roll with it since Joe did say that some functions do not need to work.

[TungKimProgrammer]

If we are unable to fix the problem by tonight, I think we should merge it with main, and roll with it since Joe did say that some functions do not need to work.

We dont have to merge if not done. Tmr just the presentation. We have the final later.

[crex424]

That is true. I am good with trying to figure that out for the final.

[crex424]

@TungKimProgrammer Where do I find the employee login information, or do I need to create my own? Just so I can access all the pages for tomorrow.

[TungKimProgrammer]

You could find the Admin in IdentityHelper.cs