web-dev-qa-db-ja.com

select2プラグインは、jqueryモーダルダイアログ内にない場合は正常に機能します

Jqueryダイアログ内でselect2プラグインを使用していますが、が機能しません。ドロップダウンすると、フォーカスは入力コントロールに移動しますが、すぐに入力コントロールから外れ、何も入力できなくなります。

これはHTMLです：

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

そして、これは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;
        });

私は他のページにこれと同じコードを持っていて、それは機能します。

どんな助けでもありがたいです、

ありがとう、Jaime

dialogjquery-select2
18
jstuardo

この回避策を見つけました。 https://github.com/ivaynberg/select2/issues/1246

乾杯ジェーム

3
jstuardo

jstuardoのリンクは良いですが、そのページをふるいにかけることがたくさんあります。必要なコードは次のとおりです。

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

Select2ドロップダウンを設定する場所の横に追加するだけです。

25
Jeremy Knight

簡単な方法：

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

select2を設定した場所の後にこれを追加します

9
Ali7091

または、これを試してください： bootstrap modal に埋め込まれた場合、Select2は機能しません

削除する tabindex="-1"モーダルdivから

5
Umair

私が見つけた最善の解決策は、modal：trueを削除して、ダイアログをモーダルダイアログではないようにすることでした。これを行うと、ページは必要に応じて機能します。

これとしばらく戦った後、ダイアログをモーダルとして維持できる別のオプションを見つけました。 select2のcssを次のように変更した場合：

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

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

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

これは機能しますが、同じページで多くのダイアログを開くと、最終的に指定されたz-indexを超えることに注意してください。ただし、私の使用例では、これらの数値で問題は解決しました。

2
abuss

github issue thread about this problem からselect2 4.0の修正の新しいバージョンがあります：=：

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);
    };
}

Select2を含むモーダルダイアログが作成される前に、これを実行するだけです。

この修正のJSFiddleの動作

1
Gavin.Paolucci.Kleinow

これをselect2（）宣言の後に追加します。

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

以前の投稿にコメントするには評判が十分ではありませんが、次のコードを追加したいと思います。

 $('#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();

現在、JQueryおよびSelect2の新しいバージョンへの更新は、アプリケーションのオプションではありません。 （JQueryUI v1.8およびSelect2 v1を使用）

1
THammons

ダイアログオプションからオプション： 'modal：true'を削除することで、これを修正できます。
問題なく動作しました。

0
Tarek

私は成功して次の修正を使用しました：

$.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

Select2 v4.0.12でこれを試してみる人のために

Select2オプションを使用していました dropdownParent

dropDownParent値を設定しましたが、まだ問題がありました。

_dropdownParent: $("#ReportFilterDialog")
_

私にとってそれを修正したのは、モーダルダイアログの外層を選択するために値をに設定することでした：

dropdownParent: $("#ReportFilterDialog").parent()

0
Saku