x-editable + select2 + ajax submit work with no results found in search box (or not click any item from list)
Closed this issue · 0 comments
Hello.
I have this code:
<a href="" data-name="parent_id" data-type="select2" data-pk="66" data-url="/update_ajax" data-value="6" data-title="Оберіть корпус" data-source="/categories" data-placeholder="Оберіть корпус" class="update-select editable editable-click" style="">Text</a>
$('.update-select').editable({
tpl: '<select></select>',
mode: 'inline',
select2: {
ajax: {
data: function (params) {
var query = {
term: params.term,
type: 'query'
}
return query;
}
},
dropdownParent: '.editable-inline',
width: '200px',
theme: 'bootstrap4'
},
display: function(value, response) {
//return false; //disable this method
},
success: function (response, newValue) {
$(this).text(response.title);
if(response.statusCode == 500) return response.msg;
}
});
When I try to search non existing value and click submit button it send empty data to server.
When I use array for source it works fine, because in this situation I have data in input and .select2-selection__rendered and it submited to server.
The problem is that when ajax source enabled it use select tag without option before you choose one.
<select data-select2-id="152" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"></select>
after choose
<select data-select2-id="191" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="66" data-select2-id="207">nmbmnbmn</option>
</select>
with array source you have input with value
<input type="hidden" value="66" data-select2-id="289" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
Also .select2-selection__rendered didn't get data from x-editable and use placeholder to set text for .select2-selection__placeholder.
Array source:
<input type="hidden" value="1" data-select2-id="273" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
...
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-7mp8-container" aria-owns="select2-7mp8-results" aria-activedescendant="select2-7mp8-result-0eca-68">
<span class="select2-selection__rendered" id="select2-7mp8-container" role="textbox" aria-readonly="true" **title="nmbmnbmn">nmbmnbmn**</span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
</span>
Ajax source:
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-xt0e-container" aria-owns="select2-xt0e-results">
<span class="select2-selection__rendered" id="select2-xt0e-container" role="textbox" aria-readonly="true">
<span class="select2-selection__placeholder">**Оберіть корпус**</span></span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span>
So in 'array mode' it use current data for submit it.
In ajax it has no data before choose one, and if not it submit empty.
1 Solution: is to disable submit button if no option found.
2 Solution: set current data from as option. Placeholder will be not needed.
How can I do this?
UPD
This problem can be found if you just open select box and click submit.
As I understand in ajax mode select2 didn't get data-value (or value: ).
How to fix it?
Found some solution here https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2
How to implement it in my code?
UPD2
Found easy solution. Just add validate for empty values.
validate: function(value) {
var value = $.trim(value);
if(value == '') {
return 'Choose one';
}
},
The problem with placeholder still exists.
How to put in placeholder current data?