Select2 下拉菜单间歇性加载以前的数据

问题描述 投票：0回答：0

我正在努力解决有关我创建的编辑页面的下拉列表的问题。文本字段很好并且总是加载，但是下拉列表确实是间歇性的，有时加载其中一些，有时不加载，有时加载全部。我一辈子也无法弄清楚为什么。显然我做了一些愚蠢的事情，所以如果有人能够帮助我。我做了一个测试示例并创建了一个假客户，只是为了保护数据等。如果需要更多代码，请告诉我。我只能假设问题出在我的 load_case_info_for_editing_response 中。只是为了提供额外的上下文，它在 Node.JS 服务器和用于查询的 PythonFastAPI 上运行。我已经测试了控制台记录数据，它确实提取了数据。所以我认为它必须是 HTML 或 JavaScript 端。

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Edit Case Information</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Template Universal Links-->
        <link rel="shortcut icon" href="/media/icons/Asteria_Icon_Blue.ico">
        <!--Scripts to load header and footer-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--    <script type="text/javascript" src="/js/universal_js/load_header_footer.js" defer></script>-->
        <!--Master CSS Link-->
        <link rel="stylesheet" href="css/universal_css/master.css">
        <!--Current File Links-->
        <link rel="stylesheet" href="css/edit_case.css">

        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
        <script type="text/javascript" src="/js/edit_case.js" defer></script>
        <!--Icons--->
<!--        <link href='https://css.gg/bell.css' rel='stylesheet'>-->
        <link rel="stylesheet" href="/css/fontawesome/css/all.css">
        <link rel="stylesheet" href="/css/loading_css_animations/cube_loader.css">
<!--        <link href='https://css.gg/arrow-long-up-c.css' rel='stylesheet'>-->
<!--        <link href='https://css.gg/arrow-long-down-c.css' rel='stylesheet'>-->

    </head>
    <body>
        <div id="header">
            <!--Header to be loaded in here by js-->
        </div>
        <div id="edit-case-layout-container">
            <div id="edit-case-layout" class="display-card">
                <div id="edit-title-container">
                    <h2>Edit Case</h2>
                    <button onclick="history.back()">Cancel</button>
                    <button id="edit-button-submit" onclick="submit_edit_case();">Submit</button>
                </div>
                <h4>Case Title</h4>
                <input id="edit-case-title" type="text" placeholder="A brief title of the case..." autofocus>
                <div id="edit-form-container">
                    <div id="edit-form-left-container">
                        <h4>Customer</h4>
                        <select id="edit-case-form-select-customer">
                            <option></option>
                        </select>
                        <script>
                            $(document).ready(function() {
                                $('#edit-case-form-select-customer').select2({
                                    placeholder: "Select a customer",
                                    allowClear: false,
                                    width: '100%',
                                    dropdownParent: $('#edit-form-left-container')
                                });
                            });
                        </script>
                        <div class="edit-form-row">
                            <div class="edit-form-row-item">
                                <h4>Customer Forename</h4>
                                <input id="edit-case-form-customer-forename" type="text" placeholder="e.g. John">
                            </div>
                            <div class="edit-form-row-item create-form-row-item-last">
                                <h4>Customer Surname</h4>
                                <input id="edit-case-form-customer-surname" type="text" placeholder="e.g. Smith">
                            </div>
                        </div>
                        <div class="edit-form-row">
                            <div class="edit-form-row-item">
                                <h4>Alternative Email</h4>
                                <input id="edit-case-form-alternate-email" type="text" placeholder="e.g. [email protected]">
                            </div>
                            <div class="edit-form-row-item create-form-row-item-last">
                                <h4>Alternative Phone</h4>
                                <input id="edit-case-form-alternate-phone" type="text" placeholder="e.g. 01234 567 890">
                            </div>
                        </div>
                        <div class="edit-case-form-spacer"></div>
                        <div class="edit-form-row">
                            <div class="edit-form-row-item">
                                <h4>Case Source</h4>
                                <select id="edit-case-form-select-case-source">
                                    <option></option>
                                </select>
                                <script>
                                    $(document).ready(function() {
                                        $('#edit-case-form-select-case-source').select2({
                                            placeholder: "Select a case source",
                                            allowClear: false,
                                            width: '100%',
                                            dropdownParent: $('#edit-form-left-container')
                                        });
                                    });
                                </script>
                            </div>
                            <div class="edit-form-row-item edit-form-row-item-last">
                                <h4>Case Priority</h4>
                                <select id="edit-case-form-select-case-priority">
                                    <option></option>
                                </select>
                                <script>
                                    $(document).ready(function() {
                                        $('#edit-case-form-select-case-priority').select2({
                                            placeholder: "Select a case priority",
                                            allowClear: false,
                                            width: '100%',
                                            dropdownParent: $('#edit-form-left-container')
                                        });
                                    });
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="edit-form-right-container">
                    <h4>Case Description</h4>
                    <textarea id="edit-case-form-case-description" placeholder="A description of what the case is about..."></textarea>
                    <h4>Attachments</h4>
                    <p>Attachments are under development</p>
                </div>
            </div>
        </div>
        <div id="footer">
            <!--Header to be loaded in here by js-->
        </div>
    </body>
</html>

Javascript

    case_source_dropdown = $('#edit-case-form-select-case-source'),
    case_priority_dropdown = $('#edit-case-form-select-case-priority');




/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
[Customers Dropdown Update]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
*/
function update_customer_dropdown() {
    let data = JSON.parse(this.responseText);

    for (let i=0; i<data.length; i++) {
        customer_dropdown.append(
            new Option(data[i].type_of_customer + " | " + data[i].customer_name,data[i].customer_id)
        ).trigger('change')
    }
}

let customer_dropdown_request = new XMLHttpRequest();
customer_dropdown_request.addEventListener("load", update_customer_dropdown);
customer_dropdown_request.open("POST", "/api/customers");
customer_dropdown_request.setRequestHeader('Content-Type', 'application/json');
customer_dropdown_request.send();


/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
[Case Source Dropdown Update]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
*/
function update_case_source_dropdown() {
    let data = JSON.parse(this.responseText);

    for (let i=0; i<data["data"].length; i++) {
        case_source_dropdown.append(
            new Option(data["data"][i],data["data"][i])
        ).trigger('change')
    }
}

let case_source_dropdown_request = new XMLHttpRequest();
case_source_dropdown_request.addEventListener("load", update_case_source_dropdown);
case_source_dropdown_request.open("POST", "/api/cases/case_source_data");
case_source_dropdown_request.setRequestHeader('Content-Type', 'application/json');
case_source_dropdown_request.send();





/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
[Case Priority Dropdown Update]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
*/
function update_case_priority_dropdown() {
    let data = JSON.parse(this.responseText);

    for (let i=0; i<data["data"].length; i++) {
        case_priority_dropdown.append(
            new Option(data["data"][i],data["data"][i])
        ).trigger('change')
    }
}

let case_priority_dropdown_request = new XMLHttpRequest();
case_priority_dropdown_request.addEventListener("load", update_case_priority_dropdown);
case_priority_dropdown_request.open("POST", "/api/cases/case_priority_data");
case_priority_dropdown_request.setRequestHeader('Content-Type', 'application/json');
case_priority_dropdown_request.send();



/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
[Load case for editing]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
*/
function load_case_info_for_editing() {
    let load_case_info_for_editing_request = new XMLHttpRequest();
    load_case_info_for_editing_request.addEventListener("load", load_case_info_for_editing_response);
    load_case_info_for_editing_request.open("POST", "view_case/get_case");
    load_case_info_for_editing_request.setRequestHeader("Content-Type", "application/json");

    let data = {
        case_id: new URLSearchParams(window.location.search).get('case_id')
    }

    load_case_info_for_editing_request.send(JSON.stringify(data));
}

load_case_info_for_editing()

function load_case_info_for_editing_response() {
    let current_case = JSON.parse(this.responseText)[0];
    console.log("Current Case Data:", current_case);

    document.getElementById('edit-case-title').value = current_case.case_title;

    customer_dropdown.val(current_case.customer);
    customer_dropdown.trigger('change');

    case_source_dropdown.val(current_case.case_source);
    case_source_dropdown.trigger('change');

    case_priority_dropdown.val(current_case.case_priority);
    case_priority_dropdown.trigger('change');

    document.getElementById("edit-case-form-customer-forename").value = current_case.customer_forename;
    document.getElementById("edit-case-form-customer-surname").value = current_case.customer_surname;
    document.getElementById("edit-case-form-alternate-email").value = current_case.alternate_email;
    document.getElementById("edit-case-form-alternate-phone").value = current_case.alternate_phone;
    document.getElementById("edit-case-form-case-description").value = current_case.case_description;
}
/*
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
[Send Edits to update case]
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
*/


function submit_edit_case() {
    let new_edit_case_request = new XMLHttpRequest();
    new_edit_case_request.addEventListener("load", submit_edit_case_response);
    new_edit_case_request.open("POST", "/api/cases/edit_case");
    new_edit_case_request.setRequestHeader('Content-Type', 'application/json');

    let data = {
        "case_id": new URLSearchParams(window.location.search).get('case_id'),
        "case_title": document.getElementById("edit-case-title").value,
        "customer": document.getElementById("edit-case-form-select-customer").value,
        "customer_forename": document.getElementById("edit-case-form-customer-forename").value,
        "customer_surname": document.getElementById("edit-case-form-customer-surname").value,
        "alternate_email": document.getElementById("edit-case-form-alternate-email").value,
        "alternate_phone": document.getElementById("edit-case-form-alternate-phone").value,
        "case_source": document.getElementById("edit-case-form-select-case-source").value,
        "case_priority": document.getElementById("edit-case-form-select-case-priority").value,
        "case_description": document.getElementById("edit-case-form-case-description").value,
    }

    new_edit_case_request.send(JSON.stringify(data));
}

function submit_edit_case_response() {
    let data = JSON.parse(this.responseText);

    if (data['response'] === "Success") {
        alert("Case updated successfully");
        history.back();
    } else {
        alert(data['response']);
    }
}

javascript html css jquery-select2
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.