web-dev-qa-db-fra.com

le plugin select2 ne fonctionne pas dans la boîte de dialogue modale jQuery

J'utilise le plugin select2 dans une boîte de dialogue jquery mais cela ne fonctionne pas. Lors de la descente, la cible se déplace sur le contrôle d’entrée mais en sort immédiatement, ne me permettant pas de taper quoi que ce soit.

C'est le HTML:

<div id="asignar_servicio" title="Asignar servicios a usuarios">
    <input type="hidden" class="bigdrop" id="a_per_id" />
</div>

Et voici le code javascript:

        $( "#asignar_servicio" ).dialog({
            autoOpen: false,
            height: 500,
            width: 450,
            modal: true,
            buttons: {
                "Cancelar": function () {
                    $('#asignar_servicio').dialog('close');
                }
            }
        });
        $("#a_per_id").select2({
            placeholder: "Busque un funcionario",
            width: 400,
            minimumInputLength: 4,
            ajax: {
                url: "@Url.Action("Search", "Personal")",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        q: term,
                        page_limit: 10,
                    };
                },
                results: function (data, page) {
                    return { results: data.results };
                }
            }
        }).on("change", function (e) {
            var texto = $('lista_personal_text').val().replace(/ /g, '');
            if (texto != '')
                texto += ',';
            texto += e.added.text;

            var ids = $('lista_personal_id').val().replace(/ /g, '');
            if (ids != '')
                ids += ',';
            ids += e.added.id;
        });

J'ai ce même code dans une autre page et cela fonctionne.

Toute aide serait appréciée,

merci Jaime

dialogjquery-select2
18
jstuardo

J'ai trouvé cette solution de contournement. https://github.com/ivaynberg/select2/issues/1246

Vive Jame

3
jstuardo

le lien de jstuardo est bon, mais il y a beaucoup à parcourir sur cette page. Voici le code dont vous avez besoin: 

$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

Ajoutez-le simplement à côté de l'endroit où vous définissez le menu déroulant select2. 

25
Jeremy Knight

Un moyen facile:

$.ui.dialog.prototype._allowInteraction = function (e) {
    return true;
};

ajoutez ceci après ou vous avez choisi select2 

9
Ali7091

Ou essayez ceci à partir de: Select2 ne fonctionne pas lorsqu'il est intégré à un modal d'amorçage

Supprimer tabindex="-1" du div modal

5
Umair

La meilleure solution que j'ai trouvée consistait simplement à faire en sorte que le dialogue ne soit pas un dialogue modal en supprimant modal: true. Une fois que vous faites cela, la page fonctionnera comme vous le souhaitez.

Après un moment de lutte avec cela, j'ai trouvé une autre option qui vous permet de garder le dialogue comme modal. Si vous modifiez le css pour select2 comme suit:

 .select2-drop {
    z-index: 1013;
}

.select2-results {
    z-index: 999;
}

.select2-result {
    z-index: 1010;
}

gardez à l'esprit que cela fonctionne. Toutefois, si vous ouvrez de nombreux dialogues sur la même page, ils dépasseront éventuellement l'index z spécifié, mais dans mon cas d'utilisation, ces chiffres ont permis d'accomplir cette tâche.

2
abuss

Il existe une nouvelle version du correctif pour select2 4.0 à partir du fil de discussion github concernant ce problème :

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function(e) {
        if ($(e.target).closest('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    };
}

Il suffit d’exécuter cette opération avant de créer les boîtes de dialogue modales contenant select2.

JSFiddle de ce correctif en action

1
Gavin.Paolucci.Kleinow

Ajoutez ceci après votre déclaration select2 ().

$.ui.dialog.prototype._allowInteraction = function (e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length;
};
1
Safiya P

Pas assez de réputation pour commenter un post précédent, mais je voulais ajouter ce bout de code:

 $('#dialogDiv').dialog({
                title: "Create Dialog",
                height: 410,
                width: 530,
                resizable: false,
                draggable: false,
                closeOnEscape: false,
                //in order for select2 search to work "modal: true" cannot be present. 
                //modal: true,
                position: "center",
                open: function () { },
                close: function () { $(this).dialog("distroy").remove(); }
            });
$("#displaySelectTwo")select2();

La mise à jour vers les versions plus récentes de JQuery et Select2 n’est pas une option dans notre application pour le moment. (en utilisant JQueryUI v1.8 et Select2 v1)

1
THammons

Je pourrais résoudre ce problème en supprimant l'option "modal: true" des options de la boîte de dialogue.
Cela a bien fonctionné.

0
Tarek

J'ai utilisé le correctif suivant avec succès:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    }
0
d.grassi84