In laravel 5.8 / Bootstrap v4.1.2 (/ jquery jQuery v3.3.1 application I use Chosen, Version 1.8.7 and I need to open dialog modal with several rows and text / select inputs. Last select a of items and I want to make chosen, as it search search functionality. I do like:
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 has code like:
<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>
where select with id="todo_foruserid_N" has "chosen_select_box" class and chosen functionality is attached to it. But on the dialog form a I see very poor select input like https://imgur.com/a/aU45B5s If do not use chosen_select_box class in selection, it is rendered as ordinary select input, but without search functionality?
How to fix it?
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire