,Good Morning everybody, In a modal window I have a select2 that is filled by ajax, using jquery I select a value which performs it perfectly but I cannot see the value of the text.
In Chrome I see that in the span select2-selection__rendered it only creates it as title but not within it:
<span class="select2-selection__rendered" id="select2-editarPasoTipoTramiteTipoTramite-container" role="textbox" aria-readonly="true" title="CIVIL JUICIO EJECUTIVO"><span class="select2-selection__clear" title="Remove all items" data-select2-id="4">×</span></span>
But when I select another value if it works
<span class="select2-selection__rendered" id="select2-editarPasoTipoTramiteTipoTramite-container" role="textbox" aria-readonly="true"><span class="select2-selection__clear" title="Remove all items" data-select2-id="44">×</span>PENAL CONTRAVENCIONES</span>
This is the jquery code that I use to select the value of the select2, and I used various options like select2.trigger.change, add the modal to the select when I instantiate it but I can’t see the text when I do it with jquery.
$(document).on("click", ".btnEditarPasoTipoTramite",function(){
var id = $(this).attr("id");
var datos = new FormData();
datos.append("id",id);
$.ajax({
url : "ajax/pasos.ajax.php",
method : "POST",
data : datos,
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(response){
/* ADD selected value to SELECT2*/
$("#editarPaso").html('<option value="'+response["paso"]+'" selected>'+response["tipo"]+'</option>');
/* tried with another scripts to add the select value but is the same problem */
//$('#editarPaso').select2({val: [{id: response["paso"], text: response["tipo"]}]});
//var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
//$("#editarPasoTipoTramiteTipoTramite").append($newOption).trigger('change');
/* tried manually add the text value to span but don't working */
$("#select2-editarPasoTipoTramiteTipoTramite-container").prepend("'"+response["paso"]+"'");
}
});
});
/* CODE to fill the Select2 with ajax*/
$('#editar').select2({
dropdownParent: $('#modalEditar'),
theme: "bootstrap4",
placeholder: 'Tipo Trámite',
minimumInputLength: 3,
ajax: {
url: SERVERURL+'ajax/select2.ajax.php',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
//results: data
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: false
},
allowClear: true,
language: "es",
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
templateResult: setTipoTramEdit,
templateSelection: setTipoTramEditSelection
});
function setTipoTramEdit (tipoTramEdit) {
if (!tipoTramEdit.id) { return tipoTramEdit.tipoTramDesc; }
var $tipoTramEdit = $("<div class='clearfix'>"+
"<div>"+
"<i class='fas fa-layer-group mr-2'></i>"+tipoTramEdit.mateCausJudi+
"</div>"+
"<div><div class='select2-result-repository__title'><strong>"+tipoTramEdit.tipoTramDesc+"</strong></div></div></div>");
return $tipoTramEdit;
};
function setTipoTramEditSelection (tipoTramEdit) {
return (tipoTramEdit.tipoTramDesc)?tipoTramEdit.tipoTramDesc.substr(0,30):tipoTramEdit.tipoTramDesc;
};
$(document).on('select2:select', '#editar', function(e) {
var tipoTramEdit = e.params.data;
});
Version Select2 4.0.13