• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

wczytywanie jednych danych z backendu na podstawie innych w formie listy option

VPS Starter Arubacloud
0 głosów
216 wizyt
pytanie zadane 14 grudnia 2021 w JavaScript przez TheDarkSide Użytkownik (930 p.)

Jak zrobić żeby lista DEVICE/DEVICES była wczytywana na podstawie wybranego statku i numeru raportu ? 

Stawiam flaszkę za rzetelność :)

<!DOCTYPE html>

<head>
    <title>NaviServ - Remarks</title>
</head>
{% extends "base.html" %}
{% block title %}
<h1>NAVISEV REMARKS</h1>
{% endblock %}
{% block content %}


<body>
    <style>
        .btn-scroll {
            right: 10px;
            position: fixed;
            bottom: 10px;
            width: 100px;
        }
    </style>
        <div id="content" style="text-align: center;">

            <div class="containter block mr-5 pr-4">
                <div class="row">
                    <div class="col-lg-4 col-md-12">
                        <select class="custom-select" id="owners" name="owners" onchange="loadShips()">
                            <option value="error">no results</option>
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <select class="custom-select" id="ship" name="ship" onchange="loadReport()">
                            <option value="error">no results</option>
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <select class="custom-select" id="report" name="report" onchange="loadRemarksData()">
                            <option value="error">no results</option>
                        </select>
                    </div>
                    <div class="col-lg-4 col-md-12">
                        <select class="custom-select" id="device" name="device" onchange="loadDevices()">
                            <option value="error">no results</option>
                        </select>
                    </div>
                </div>
                <br>
                <div id="buttons-block" class="mb-3">

                </div>
                <div><input type="text" class="form-control form-control-sm" id="search_input"
                        placeholder="Search device" onkeyup="search_device(this)">

                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <div class="row" id="device-row">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="senior-alert" id="alert" role="alert">
                    <strong>Confirmation required </strong>
                    <i class="fa fa-times cross" aria-hidden="true" onclick="turnOff()"></i>
                    <hr>
                    <div class="row">
                        <div class="col-12">
                            <p>Do you want to remove the sent flag and feedback? </p>
                        </div>
                        <div class="col-6">
                            <button class="btn" onclick="turnOff()">Back</button>
                        </div>
                        <div class="col-6" id="update_button_div">
                        </div>
                    </div>

                </div>
            </div>
            <button type="button" name="button" class="btn btn-scroll" onclick="scroll_up()">Scroll <i
                    class="fa fa-level-up" aria-hidden="true"></i></button>
    <div class="senior-alert-delete-remarks" id="alert-delete-remarks" role="alert"></div>

</body>
<script>
    function scroll_up() {
         $('html,body').scrollTop(0);
     }
 
     function search_device(input) {
         var keyword = input.value.toUpperCase();
         var device_row = document.getElementById("device-row");
         dev_list = device_row.getElementsByClassName('device_elemnt')
         remark_list = device_row.getElementsByClassName('remark_elemnt')
         feedback_list = device_row.getElementsByClassName('feedback_elemnt')
         hr_list = device_row.getElementsByClassName('hr_element')
 
         for (var i = 0; i < dev_list.length; i++) {
             var txt = dev_list[i].innerText.toUpperCase();
             if (!txt.match(keyword)) {
                 $(dev_list[i]).attr('disabled', 'disabled').hide();
                 $(remark_list[i]).attr('disabled', 'disabled').hide();
                 $(feedback_list[i]).attr('disabled', 'disabled').hide();
                 $(hr_list[i]).attr('disabled', 'disabled').hide();
             } else {
                 $(dev_list[i]).removeAttr('disabled').show();
                 $(remark_list[i]).removeAttr('disabled').show();
                 $(feedback_list[i]).removeAttr('disabled').show();
                 $(hr_list[i]).removeAttr('disabled').show();
             }
         }
     }
 
     let parent_select = document.getElementById('owners');
     let ship_select = document.getElementById('ship');
     let report_select = document.getElementById('report');
     let device_select = document.getElementById('device');

    loadOwners()
    function loadOwners() {
        $.ajax({
            url: '/load_owners',
            contentType: 'application/json;charset=UTF-8',
            type: 'POST',
            success: function (response) {
                owners = response.owners
                let optionHTML = ''
                for (let owner of owners) {
                    optionHTML += '<option value="' + owner.owner_id + '">' + owner.owner_name + '</option>';
                }
                parent_select.innerHTML = optionHTML;
                loadShips()
            },
            error: function (error) {
                createAlerts('danger', 'Error while loading owner list')
            }
        });
    };
 function loadShips() {
        owner_id = parent_select.options[parent_select.selectedIndex].value
        $.ajax({
            url: '/load_ships',
            data: JSON.stringify({
                owner_id: owner_id,
            }),
            contentType: 'application/json;charset=UTF-8',
            type: 'POST',
            success: function (response) {
                ships = response.ships
                let optionHTML = ''
                for (let ship of ships) {
                    optionHTML += '<option value="' + ship.ship_id + '">' + ship.ship_name + '</option>';
                }
                ship_select.innerHTML = optionHTML;
                loadReport()
                loadDevices()
            },
            error: function (error) {
                createAlerts('danger', 'Error while loading ship list')
            }
        });
    };
    function loadReport() {
        ship_id = document.getElementById('ship').value
        $.ajax({
            url: '/load_reports',
            data: JSON.stringify({
                ship_id: ship_id,
            }),
            contentType: 'application/json;charset=UTF-8',
            type: 'POST',
            success: function (response) {
                reports = response.report_list
                let optionHTML = ''
                for (let report of reports) {
                    optionHTML += '<option value="' + report.id + '">' + report.report_number + '</option>';
                }
                report_select.innerHTML = optionHTML;
                // loadRemarksData()
            },
            error: function (error) {
                createAlerts('danger', 'Error while loading report list')
            }
        });
    }
    function loadDevices() {
            ship_id = ship_select.options[ship_select.selectedIndex].value
            $.ajax({
                url: '/load_devices',
                data: JSON.stringify({
                    ship_id: ship_id,
                }),
                contentType: 'application/json;charset=UTF-8',
                type: 'POST',
                success: function (response) {
                    devices = response.devices_list
                    let optionHTML = ''
                    for (let device of devices) {
                        optionHTML += '<option id="' + device.device_id + '" value="' + device.device_id + '">' + device.device_name + '</option>';
                    }
                    device_select.innerHTML = optionHTML;
                    // loadPointDevices()
                },
                error: function (error) {
                    createAlerts('danger', 'Error while loading device list')
                }
            })
        }

</script> 
{% endblock %}

</html>

BACKEND:

@app.route('/load_devices', methods=["POST"])
@login_required
def load_devices():
    JSON = request.json
    ship_id = JSON["ship_id"]
    json_data = LoadLists().load_device_list(ship_id)
    return json_data

@app.route('/load_ships', methods=["POST"])
@login_required
def load_ship_list():
    JSON = request.json
    owner_id = JSON["owner_id"]
    json_data = LoadLists().load_ship_list(owner_id)
    return json_data

@app.route('/load_owners', methods=["POST"])
@login_required
def load_owner_list():
    json_data = LoadLists().load_owner_list()
    return json_data

@app.route('/load_reports', methods=["POST"])
@login_required
def load_reports():
    JSON = request.json
    ship_id = JSON["ship_id"]
    json_data = LoadLists().load_report_list(ship_id)
    return json_data

 

komentarz 14 grudnia 2021 przez TheDarkSide Użytkownik (930 p.)
@app.route('/load_device_list_by_report', methods=["POST"])
@login_required
def load_device_list_by_report():
    JSON = request.json
    raport_id = JSON["raport_id"]
    print('start load')
    json_data = LoadLists().load_device_list_by_report(raport_id)
    return json_data

JEST JESSZCZE TO

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
3 odpowiedzi 158 wizyt
pytanie zadane 20 czerwca 2021 w HTML i CSS przez Zawoj11 Użytkownik (850 p.)
0 głosów
2 odpowiedzi 402 wizyt
pytanie zadane 31 lipca 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 p.)
+1 głos
2 odpowiedzi 463 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...