Best practices for making an AJAX call to fetch information from a database

Question

Best practices for making an AJAX call to fetch information from a database

I have a database containing a single table. The table includes columns for Company and Time, among others, with Company and Time being crucial. Users can make appointments by filling out a form. Within the form, there are 2 <select> elements - one for selecting a Company and another for selecting a Time slot. Once both selections are made, the user clicks a button to store the form in the database. How can I utilize AJAX to retrieve all booked Time slots and disable them accordingly? For instance, if an appointment is made with Nokia at 9:30, that specific Time slot should be disabled to prevent overlapping bookings.


function MakeApp() {

    var AppWith = $("#CompanySelect").val();
    var AppTime = $("#TimeSelect").val();
    var Yritys = $("#YritysNtext").val();
    var Henkilonimi = $("#HenkilonimiText").val();
    var Asema = $("#AsemaText").val();
    var PuhelinNR = $("#PuhelinText").val();
    var EMail = $("#EMailText").val();
    var Keskustelun = $("#KeskustelunText").val();
    var app = { AppWithYritys: AppWith, AppTime: AppTime, YritysN: Yritys, Henkilonimi: Henkilonimi, Asema: Asema, PuhelinNR: PuhelinNR, EMail: EMail, Keskustelun: Keskustelun }

        var request = $.ajax({
            type: "POST",
            data: JSON.stringify(app),
            url: "/api/Appointments",
            contentType: "application/json",
            dataType: "html"
        });
        request.done(function (podaci) {
            if (podaci != -1) {
                alert("You Have successfully made an appointment");
                location.assign("BookAppointment.html");
            }
            else {
                $("#p1").html("Greska pri unosu");
            }
        });

        request.fail(function (gr) {
            $("#p1").html(gr.statusText);
        });
};

javascript c#jquery html ajax

Answer 1

Answer №1

In reality, it is the responsibility of your server to manage data and databases. AJAX simply provides a method for sending information to a server asynchronously. One approach you could take is to use AJAX to retrieve only the occupied times when the page loads. Then, you can disable those options in your select menu. When the server receives a request, it checks if there are any available slots for the company and times.

Unfortunately, I don't have specific code to provide since the concept seems pretty clear. However, if you need further assistance, feel free to ask, and I will do my best to help.

Edit

Below are a few lines of code outlining the main algorithm, though it's not complete as some details are missing.

Your server:

{GET}
public void getUnavailable() {
    // Retrieve all times from the database for today's date.
    // Encode them in JSON format.
    // Return the unavailable times.
}

Assuming your JSON data looks like this:

[
{
    "company": "Nokia",
    "times": [
        "9:30",
        "10:00",
        "10:30"
    ]
}
]

You'll need to fetch and parse this JSON data to disable certain selections in the dropdown list:

$(document).ready(function(){
$.ajax({
    'url': API_URL + 'event/getUnavailable',
    'method': 'GET',
    'success': function(data) {
        $.each(data.data, function($index, $company){
            var select = /* .. Get the Select of the current company .. */
            $.each($company.times, function($index, $times){
                select./*.. Find the time associate with $time .. */.setDisable(true); // You may need to verify if setDisable is the correct function to use.
            })
        })
    },
    'error': function(error) {
        console.error(error.data);
    }
});

$('.myForm').submit(function(){
    // Submit your data to the server here.
    $.ajax({
        'url': API_URL + "event/create",
        'method': 'POST',
        'data': /* your data */,
        'success': function(){
            console.log('success');
        },
        'error': function(error) {
            console.error(error);
        }
    })
});
})

This is the extent of what I can provide based on the information given.

Answer 2

In reality, it is the responsibility of your server to manage data and databases. AJAX simply provides a method for sending information to a server asynchronously. One approach you could take is to use AJAX to retrieve only the occupied times when the page loads. Then, you can disable those options in your select menu. When the server receives a request, it checks if there are any available slots for the company and times.

Unfortunately, I don't have specific code to provide since the concept seems pretty clear. However, if you need further assistance, feel free to ask, and I will do my best to help.

Edit

Below are a few lines of code outlining the main algorithm, though it's not complete as some details are missing.

Your server:

{GET}
public void getUnavailable() {
    // Retrieve all times from the database for today's date.
    // Encode them in JSON format.
    // Return the unavailable times.
}

Assuming your JSON data looks like this:

[
{
    "company": "Nokia",
    "times": [
        "9:30",
        "10:00",
        "10:30"
    ]
}
]

You'll need to fetch and parse this JSON data to disable certain selections in the dropdown list:

$(document).ready(function(){
$.ajax({
    'url': API_URL + 'event/getUnavailable',
    'method': 'GET',
    'success': function(data) {
        $.each(data.data, function($index, $company){
            var select = /* .. Get the Select of the current company .. */
            $.each($company.times, function($index, $times){
                select./*.. Find the time associate with $time .. */.setDisable(true); // You may need to verify if setDisable is the correct function to use.
            })
        })
    },
    'error': function(error) {
        console.error(error.data);
    }
});

$('.myForm').submit(function(){
    // Submit your data to the server here.
    $.ajax({
        'url': API_URL + "event/create",
        'method': 'POST',
        'data': /* your data */,
        'success': function(){
            console.log('success');
        },
        'error': function(error) {
            console.error(error);
        }
    })
});
})

This is the extent of what I can provide based on the information given.

Answer 3

Answer №2

The best approach to tackling this issue is to utilize the web technology powering /api/Appointments to fetch and display available appointments. It seems that the variable names used may be confusing, so take some time to comprehend the code snippet provided below.

$.get( "/api/Appointments", JSON.stringify(app) )
  .done(function( data ) {
    // Take note that the "data" variable contains the list of available appointments
    // You can return a JSON document listing available appointment times to filter your selection


    // An example of the JSON structure could be like this
    // { "availableAppointments": ["9:30 AM", "10:00 AM"] }


    // Proceed to iterate through each available appointment and populate your selection dropdown
    for(var i = 0; i < data.availableAppointments.length; i++){
         $('#yourSelectId').append($('<option>', {
           value: '930',
           text: data.availableAppointments[i]
         }));
    }

  });

Please bear in mind that this code snippet might not be entirely accurate from a syntax perspective.

Below are some helpful links that guided me in providing this solution, in case you find them useful as well.

Adding options to a <select> using jQuery?

https://api.jquery.com/jquery.get/

Answer 4

The best approach to tackling this issue is to utilize the web technology powering /api/Appointments to fetch and display available appointments. It seems that the variable names used may be confusing, so take some time to comprehend the code snippet provided below.

$.get( "/api/Appointments", JSON.stringify(app) )
  .done(function( data ) {
    // Take note that the "data" variable contains the list of available appointments
    // You can return a JSON document listing available appointment times to filter your selection


    // An example of the JSON structure could be like this
    // { "availableAppointments": ["9:30 AM", "10:00 AM"] }


    // Proceed to iterate through each available appointment and populate your selection dropdown
    for(var i = 0; i < data.availableAppointments.length; i++){
         $('#yourSelectId').append($('<option>', {
           value: '930',
           text: data.availableAppointments[i]
         }));
    }

  });

Please bear in mind that this code snippet might not be entirely accurate from a syntax perspective.

Below are some helpful links that guided me in providing this solution, in case you find them useful as well.

Adding options to a <select> using jQuery?

https://api.jquery.com/jquery.get/

Best practices for making an AJAX call to fetch information from a database

Answer №1

Edit

Answer №2

Similar questions

When working with Angular 12, the target environment lacks support for dynamic import() syntax. Therefore, utilizing external type 'module' within a script is not feasible

Are you able to develop a customized TestNG Listener to cater to your specific requirements?

creating a nested JavaScript object within another object

Having issues with regEX functionality in an Angular form

Generating dynamic divs in parallel

Using placeholders with inputs in an Angular2 table generated by ngFor

jquery form submission issue unresolved

Is it possible to trigger the onNewRequest property when the onBlur event is fired for AutoComplete in Material-UI?

Mastering the art of grouping by a key and generating sub-objects from a plain array of key-value pairs in JavaScript ES5 without relying on third-party libraries

Is there a way to implement the adjacent selector in combination with the :before selector?

Tips for updating form tag details within the same blade file upon reloading

Tips on customizing the CSS responsiveness of your Bootstrap carousel

Tips for integrating jwt token into axios request

Utilizing jQuery Ajax to submit multiple forms using a single selector in one go

Using jQuery to set the background-image on the body's after pseudo-element with CSS

Tips for organizing dynamic table data following an append operation

Display various v-dialog boxes with distinct contents in a vue.js environment

The MongoClient object does not possess the 'open' method

angular trustAsHtml does not automatically insert content

Data binding in Vue.js seems to be malfunctioning