Как заполнить материализовать выбранный элемент с опциями из вызова API - PullRequest
Новая
       23

Как заполнить материализовать выбранный элемент с опциями из вызова API

0 голосов
/ 15 марта 2019

Моя проблема в том, что когда моя страница загружена, элемент select не заполняется параметрами, которые я извлекаю из моего API, поэтому элементы параметров не отображаются. Если я обновлю страницу, варианты будут ...

Как бы вы решили эту проблему?

Должен ли я создать все элементы выбора и опции после получения ответа от API или есть более разумный способ сделать это?

Заранее спасибо! 

<div id="header"></div>

<h2 id="page-title">Create Item</h2>


<div id="create-customer-form" class="row">
    <form id="form" action="/create-item" method="POST" class="col s4 offset-m4">
        <div class="row">
            <div class="input-field col s12">
                <select name="collection" id="myDropdown" class="materialSelect">
                    <option disabled selected>Choose Season</option>
                </select>
                <label>Collection</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input placeholder="Type" name="type" type="text" class="validate">
                <label class="label" for="type">Type</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input placeholder="Model" name="model" type="text" class="validate">
                <label class="label" for="model">Model</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input placeholder="Color" name="color" type="text" class="validate">
                <label class="label" for="color">Color</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input placeholder="Price" name="price" type="number" class="validate">
                <label class="label" for="price">Price</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <textarea placeholder="Short Description" name="description" type="text"
                    class="materialize-textarea validate"></textarea>
                <label class="label" for="description">Short Description</label>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <input placeholder="Barcode" name="barcode" type="number" class="validate" data-length="9">
                <label class="label" for="barcode">Barcode</label>
            </div>
        </div>
        <div id="submit-btn">
            <a id="submit-link" class="waves-effect waves-light btn create-btn"><i
                    class="material-icons left">add</i>create</a>
        </div>
    </form>
</div>
<script src="../main.js"></script>
<script src="scripts/jQuery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<script>
    $(document).ready(function () {
        $.ajax({
            url: '/collections',
        }).then(function (options) {
            $.each(options, function (key, value) {
                var $newOpt = $("<option>").attr("value", value.name_year).text(value.name_year);
                $("#myDropdown").append($newOpt);
            });
            $("#myDropdown").trigger('contentChanged');
        });
    });

    $('.materialSelect').formSelect();
    $('.materialSelect').on('contentChanged', function () {
        $(this).formSelect();
    });

    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('select');
        var instances = M.FormSelect.init(elems);
    });

    document.getElementById("submit-link").onclick = function () {
        document.getElementById("form").submit();
    }
</script>

...