Применение jquery-selected для выбора ввода в диалоге модально выглядит плохо - PullRequest
Новая
       26

Применение jquery-selected для выбора ввода в диалоге модально выглядит плохо

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

В laravel 5.8 / Bootstrap v4.1.2 (/ jquery jQuery v3.3.1 приложение я использую Chosen, версия 1.8.7 и мне нужно открыть модальное диалоговое окно с несколькими строками и вводом текста / выбора. Последний выберите один из элементов, и я хочу сделать выбор, так как он выполняет поиск по функциональности. Мне нравится: 

var href = '/admin/show-todo-page';
$.ajax(
    {
        type: "GET",
        dataType: "json",
        url: href,
        success: function (response) {
            $("#div_show_todo_page_modal").modal({
                "backdrop": "static",
                "keyboard": true,
                "show": true
            });
            $('#div_show_todo_page_content').html(response.html)

            $(".chosen_select_box").chosen({
                disable_search_threshold: 10,
                no_results_text: "Nothing found!",
                allow_single_deselect: true,
            });

response.html имеет такой код: 

<form role="form" autocomplete="off">

    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-12 p-1">
            <input type="hidden" id="todo_id_0" name="todo_id_0" value="1" class="todo_editable_field todo_editable_field_id">
            <input type="hidden" id="todo_modified_0" name="todo_modified_0" value="" class="todo_editable_field
                            todo_editable_field_modified">
            <input class="form-control todo_editable_field todo_editable_field_text editable_field"
                   value="Write user's on using frontend application part lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut."
                   id="todo_text_0" name="todo_text_0" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task"
                   onchange="javascript:backendFooter.todoOnChange(this); ">
        </div>

        <div class=" col-3 p-1 m-0 mb-4">
            <select class="form-control todo_editable_field editable_field" id="todo_priority_0" name="todo_priority_0" data-placeholder=" -Select Is Featured- "
                    onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Priority- "></option>
                <option value="1">No</option>
                <option value="2">Low</option>
                <option value="3">Normal</option>
                <option value="4" selected="">High</option>
                <option value="5">Urgent</option>
                <option value="6">Immediate</option>
            </select>
        </div>
        <div class=" col-3 p-1">
            <select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_0" name="todo_completed_0"
                    data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Completed- "></option>
                <option value="1">Completed</option>
                <option value="0" selected="">Opened</option>
            </select>
        </div>
        <div class=" col-5 p-1">
            <select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_0" name="todo_foruserid_0"
                    data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
                <option value="" label=" -Select User- "></option>
                        ... long list ...
                <option value="5" selected="">Admin ( Soang Soang, admin@mail.com )</option>
            </select>
            <div class="chosen-container chosen-container-single" title="" id="todo_foruserid_0_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
                <span>Admin ( Soang Soang, admin@mail.com )</span><abbr class="search-choice-close"></abbr>
                <div><b></b></div>
            </a>
                <div class="chosen-drop">
                    <div class="chosen-search">
                        <input class="chosen-search-input" type="text" autocomplete="off">
                    </div>
                    <ul class="chosen-results"></ul>
                </div>
            </div>
        </div>

        <div class=" col-1 p-1">
                                                            <span class="input-group-append-btn">
                                <button class="btn btn-danger todo-btn-add" type="button">
                                    <span class="fa fa-minus"></span>
                                </button>
                            </span>
        </div>

    </div>
    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-12 p-1">
            <input type="hidden" id="todo_id_1" name="todo_id_1" value="3" class="todo_editable_field todo_editable_field_id">
            <input type="hidden" id="todo_modified_1" name="todo_modified_1" value="" class="todo_editable_field
                            todo_editable_field_modified">
            <input class="form-control todo_editable_field todo_editable_field_text editable_field"
                   value="Prepare list of user's having access to backend part lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut..."
                   id="todo_text_1" name="todo_text_1" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task"
                   onchange="javascript:backendFooter.todoOnChange(this); ">
        </div>

        <div class=" col-3 p-1 m-0 mb-4">
            <select class="form-control todo_editable_field editable_field" id="todo_priority_1" name="todo_priority_1" data-placeholder=" -Select Is Featured- "
                    onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Priority- "></option>
                <option value="1">No</option>
                <option value="2" selected="">Low</option>
                <option value="3">Normal</option>
                <option value="4">High</option>
                <option value="5">Urgent</option>
                <option value="6">Immediate</option>
            </select>
        </div>
        <div class=" col-3 p-1">
            <select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_1" name="todo_completed_1"
                    data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Completed- "></option>
                <option value="1">Completed</option>
                <option value="0" selected="">Opened</option>
            </select>
        </div>
        <div class=" col-5 p-1">
            <select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_1" name="todo_foruserid_1"
                    data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
                <option value="" label=" -Select User- "></option>
                        ... long list ...
                <option value="5">Admin ( Soang Soang, admin@mail.com )</option>
            </select>
            <div class="chosen-container chosen-container-single" title="" id="todo_foruserid_1_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
                <span>Martha Lang ( Lang Lang, nilovsergey@ukr.net )</span><abbr class="search-choice-close"></abbr>
                <div><b></b></div>
            </a>
                <div class="chosen-drop">
                    <div class="chosen-search">
                        <input class="chosen-search-input" type="text" autocomplete="off">
                    </div>
                    <ul class="chosen-results"></ul>
                </div>
            </div>
        </div>

        <div class=" col-1 p-1">
                                                            <span class="input-group-append-btn">
                                <button class="btn btn-danger todo-btn-add" type="button">
                                    <span class="fa fa-minus"></span>
                                </button>
                            </span>
        </div>

    </div>
    <div class="row entry input-group-append m-0 p-0" style="width: 100%;">

        <div class=" col-12 p-1">
            <input type="hidden" id="todo_id_2" name="todo_id_2" value="2" class="todo_editable_field todo_editable_field_id">
            <input type="hidden" id="todo_modified_2" name="todo_modified_2" value="" class="todo_editable_field
                            todo_editable_field_modified">
            <input class="form-control todo_editable_field todo_editable_field_text editable_field" value="To do line 2..." id="todo_text_2" name="todo_text_2" type="text"
                   maxlength="255" autocomplete="off" placeholder="Enter new todo task" onchange="javascript:backendFooter.todoOnChange(this); ">
        </div>

        <div class=" col-3 p-1 m-0 mb-4">
            <select class="form-control todo_editable_field editable_field" id="todo_priority_2" name="todo_priority_2" data-placeholder=" -Select Is Featured- "
                    onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Priority- "></option>
                <option value="1">No</option>
                <option value="2">Low</option>
                <option value="3" selected="">Normal</option>
                <option value="4">High</option>
                <option value="5">Urgent</option>
                <option value="6">Immediate</option>
            </select>
        </div>
        <div class=" col-3 p-1">
            <select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_2" name="todo_completed_2"
                    data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
                <option value="" label=" -Select Completed- "></option>
                <option value="1" selected="">Completed</option>
                <option value="0">Opened</option>
            </select>
        </div>
        <div class=" col-5 p-1">
            <select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_2" name="todo_foruserid_2"
                    data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
                <option value="" label=" -Select User- "></option>
                        ... long list ...
                <option value="5" selected="">Admin ( Soang Soang, admin@mail.com )</option>
            </select>
            <div class="chosen-container chosen-container-single" title="" id="todo_foruserid_2_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
                <span>Admin ( Soang Soang, admin@mail.com )</span><abbr class="search-choice-close"></abbr>
                <div><b></b></div>
            </a>
                <div class="chosen-drop">
                    <div class="chosen-search">
                        <input class="chosen-search-input" type="text" autocomplete="off">
                    </div>
                    <ul class="chosen-results">
                        <li class="active-result" data-option-array-index="1">yolanda_konopelski ( Konopelski Konopelski, yolanda.konopelski@homenick.org )</li>
                        ... long list ...
                        <li class="active-result result-selected" data-option-array-index="41">Admin ( Soang Soang, admin@mail.com )</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class=" col-1 p-1">
                                                            <span class="input-group-append-btn">
                                <button class="btn btn-success todo-btn-add" type="button">
                                    <span class="fa fa-plus"></span>
                                </button>
                            </span>
        </div>

    </div>

</form>

где select с id = "todo_foruserid_N" имеет класс "selected_select_box" и к нему прикреплена выбранная функциональность. Но в диалоговом окне я вижу очень плохой выбор, например https://imgur.com/a/aU45B5s Если при выборе не использовать класс selected_select_box, он отображается как обычный выбор select, но без функции поиска?

Как это исправить?

Модифицированный блок: Я загрузил эту часть онлайн по https://www.votes.nilov -sergey-demo-apps.tk / admin / dashboard url Вы можете войти в систему в демо-версии: credit_demo@votes.com / 654321 Всплывающее диалоговое окно открывается при открытии страницы панели инструментов.

...