тег select, созданный в запросе ajax, не отображается в файле HTML - PullRequest
Новая
       33

тег select, созданный в запросе ajax, не отображается в файле HTML

1 голос
/ 24 июня 2019

Я хочу загрузить некоторые опции через ajax-запрос и показать их в HTML-теге select. После того, как я получу данные и создаю тег выбора вручную, файл HTML не показывает тег выбора. Я использовал jquery и поместил коды в другие файлы. Я пытаюсь поместить ajax-запрос в $ (document) .ready () и функцию, но он не работает. 

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- META SECTION -->
    <title>Atlant - Responsive Bootstrap Admin Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <!-- END META SECTION -->

    <!-- CSS INCLUDE -->
    <link rel="stylesheet" type="text/css" id="theme" href="/public/css/theme-default.css"/>
    <!-- EOF CSS INCLUDE -->


</head>
<body onload="onLoadCenterName()">
<!-- START PAGE CONTAINER -->
<div class="page-container">

    <!-- PAGE CONTENT -->
    <div class="page-content ">


        <!-- PAGE CONTENT WRAPPER -->
        <div class="page-content-wrap">


            <div class="row">
                <div class="col-md-12">

                    <form id="addSiteForm" class="form-horizontal"
                          style="margin-top: 20px;margin-left: 50px;margin-right: 50px">
                        <div class="panel panel-default">
                            <div class="panel-heading ">
                                <h3 class="panel-title "><strong>Add New Site</strong></h3>

                            </div>
                            <div class="panel-body">
                            </div>
                            <div class="panel-body">


                                <div class="form-group">
                                    <label class="col-md-3 col-xs-12 control-label">Select User Type</label>
                                    <div class="col-md-6 col-xs-12">
                                        <select id="addSiteSelectCenterInput" class="form-control select">
                                        </select>
                                        <span class="help-block">Select type of the user account </span>
                                    </div>
                                </div>

                            </div>

                    </form>

                </div>
            </div>

        </div>
        <!-- END PAGE CONTENT WRAPPER -->
    </div>
    <!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->



<!-- START PRELOADS -->
<audio id="audio-alert" src="/public/audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="/public/audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->

<!-- START SCRIPTS -->
<!-- START PLUGINS -->
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap.min.js"></script>
<!-- END PLUGINS -->

<!-- START THIS PAGE PLUGINS-->
<script type='text/javascript' src='/public/js/plugins/icheck.js'></script>
<script type="text/javascript" src="/public/js/plugins/jquery/jquery.mCustomScrollbar.js"></script>


<!-- END THIS PAGE PLUGINS-->

<!-- START TEMPLATE -->
<!--        <script type="text/javascript" src="/public/js/settings.js"></script>-->

<script type='text/javascript'
        src='/public/js/plugins/validationengine/languages/jquery.validationEngine-en.js'></script>
<script type='text/javascript' src='/public/js/plugins/validationengine/jquery.validationEngine.js'></script>
<script type="text/javascript" src="/public/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type='text/javascript' src='/public/js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='/public/js/plugins/noty/themes/default.js'></script>
<script type="text/javascript" src="/public/js/plugins.js"></script>
<script type="text/javascript" src="/public/js/actions.js"></script>
<script type="text/javascript" src="/public/js/addSite.js"></script>



<!-- END TEMPLATE -->
<!-- END SCRIPTS -->
</body>
</html>

addSite.js 

function onLoadCenterName() {
    $.ajax({
        type: 'GET',
        url: '/centers/getAllCenters',
        dataType: 'json',
        contentType: 'application/json',
        success: function (data) {
            console.log("SUCCESS : ", data);


            let selectList = document.getElementById("addSiteSelectCenterInput");

            $.each(data, function (key, value) {
                console.log(key, value._id, value.centerName);

                const option = document.createElement("option");
                option.value = value._id;
                option.text = value.centerName;
                selectList.appendChild(option);


                // $('#addSiteSelectCenterInput')
                //     .append($("<option></option>")
                //         .attr("value", )
                //         .text(value.centerName));
            });

            console.log(selectList);
            noty({
                text: 'Successful load centers ',
                layout: 'topRight',
                type: 'success',
                timeout: true
            }).setTimeout(5000);
            $.mpb("update", {
                value: 100, speed: 5, complete: function () {
                    $(".mpb").fadeOut(200, function () {
                        $(this).remove();
                    });
                }
            });
        },
        error: function (e) {
            console.log("ERROR : ", e);
            noty({
                text: 'There was an error',
                layout: 'topRight',
                type: 'error',
                timeout: true
            }).setTimeout(5000);
            $.mpb("update", {
                value: 100, speed: 5, complete: function () {
                    $(".mpb").fadeOut(200, function () {
                        $(this).remove();
                    });
                }
            });

        }
    });

}

в консоли chrom, результат здесь: 

<select id="addSiteSelectCenterInput" class="form-control select" style="display: none;">
                                        <option value="5d0f86f0a2b7a41bdcd3c91f">sdf</option><option value="5d0f9c4067731820fcabf1eb">scaasdad</option></select>

1 Ответ

1 голос
/ 24 июня 2019

В соответствии с результатом вашей консоли <select> не отображается, поскольку имеет атрибут style="display: none;".

В предоставленном вами коде нет ничего, что добавило бы этот атрибут, поэтому вы, очевидно, не предоставили нам весь соответствующий код.

Так что вам нужно либо удалить этот атрибут ... либо вообще не скрывать элемент управления.

Чтобы показать его через jQuery, используйте .show() ... 

$("#addSiteSelectCenterInput").show()

Или в ванильном JS измените свойство style.display ... 

document.getElementById("addSiteSelectCenterInput").style.display = "";
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...