Définir les données dans Select2 après insertion avec AJAX
j'utilise le Select2 avec AJAX (le code ci-dessous):
$(".select2-ajax").select2({
placeholder: "Search user",
minimumInputLength: 1,
ajax: {
url: $('#url-search-client').val(),
dataType: 'json',
type: 'post',
data: function (term, page) {
return {
filter: term
};
},
results: function (data, page) {
return {results: data};
}
},
width : '50%',
formatInputTooShort: function () {return 'Informe mais caracteres'; },
formatResult: formatResultSelectAjax, // omitted for brevity, see the source of this page
formatSelection: formatSelectAjaxValue, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
});
Eh bien, si le client n'est pas trouvé, l'utilisateur peut utiliser un bouton pour ouvrir un modal et ajouter le nouveau client, est-il possible d'utiliser le retour(json avec id et namae) du nouveau client et de mettre les données (comme nom) dans le select2 comme sélectionné?
$('.btn-form-client').click(function() {
$.ajax({
url: $('#frm-client').attr('action'),
dataType: 'json',
type: 'post',
data: $('#frm-client').serialize()
}).done(function (data) {
$('#modal-client').modal('hide')
});
return false;
});
2 réponses
à partir de v4.x, select2 n'utilise plus le champ caché input
. Au lieu de cela ,vous créer un nouveau Option
et l'ajouter à votre select
élément:
var newOption = new Option(data.name, data.id, true, true);
$(".select2-ajax").append(newOption).trigger('change');
la combinaison des arguments true
et trigger('change')
fera en sorte que votre nouveau <option>
sera automatiquement sélectionné après avoir été ajouté.
Voir mon codepen pour un exemple de travail complet.
j'ai réussi à le faire fonctionner. Après avoir posté dans jQuery, j'obtiens un JSON avec les nouvelles données et je mets l'input caché et le select ('.select2-ajax')
$('#client=id').val(data.id);
$('#modal-solicitante').modal('hide'); //This is my
$(".select2-ajax").select2('data', {id: data.id, name: data.name, email: data.email});