Ad

Select Tag Created In Ajax Request Doesn't Be Shown In HTML File

I want to load some options via ajax request and show them into select tag HTML. After I get data and create a select tag manually, the HTML file doesn't show the select tag. I used jquery and put the codes in other files. I try to put ajax request in both $(document).ready() and function but it doesn't work.

<!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" target="_blank" rel="nofollow noreferrer" href="favicon.ico" type="image/x-icon"/>
    <!-- END META SECTION -->

    <!-- CSS INCLUDE -->
    <link rel="stylesheet" type="text/css" id="theme" target="_blank" rel="nofollow noreferrer" 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();
                    });
                }
            });

        }
    });

}

in chrom console, result is here:

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

Answer

According to your console result, the <select> is not visible because it has the attribute style="display: none;".

There is nothing in the code that you have provided that would add that attribute, so you obviously haven't given us all the relevant code.

So you either need to remove that attribute... or don't hide the control in the first place.

To show it via jQuery use .show()...

$("#addSiteSelectCenterInput").show()

Or in vanilla JS change the style.display property...

document.getElementById("addSiteSelectCenterInput").style.display = "";
Ad
source: stackoverflow.com
Ad