bundle.js

async function getChargeType(charge_id) {
    // Charge Type API GET request
    let url = "/api/charge_types/" + charge_id + "/";

    // Await the response of the fetch call
    const response = await fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Token ' + window.localStorage.getItem('token'),
        }
    })
    // Only proceed once its resolved
    return await response.json();
}

function editChargeTypeModal() {
    // Edit Charge Type Modal
    $(document).on('click', '.edit-record', async function (e) {
        e.preventDefault();
        let charge_id = $(this).attr('data-id');
        let url = "/api/charge_types/" + charge_id + "/";
        let form = $('#editChargeTypeForm');
        // Show the modal with the data from the API.
        await getChargeType(charge_id).then(data => {
            chargeTypeModal.modal('show');
            // change the form action to url
            form.attr('action', url);
            chargeTypeModal.find('#chargeTypeModalTitle').text('Edit Charge Type');
            chargeTypeModal.find('#charge_type_name').val(data.name);
            chargeTypeModal.find('#charge_type_description').val(data.description);
        })
    })
}