Плагин select2 отлично работает, когда он не находится в модальном диалоговом окне jquery.

Я использую плагин select2 внутри диалогового окна jquery, но не работает. При опускании фокус перемещается на элемент управления вводом, но сразу же выходит из него, не позволяя мне ничего печатать.

Это 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;
        });

У меня есть этот же код на другой странице, и он работает.

Любая помощь будет оценена,

спасибо Хайме


dialog jquery-select2
person jstuardo    schedule 06.06.2013    source источник

Ответы (11)


arrow_upward
25
arrow_downward

Ссылка jstuardo хороша, но на этой странице есть что просмотреть. Вот код, который вам нужен:

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

Просто добавьте его рядом с тем, где вы устанавливаете раскрывающийся список select2.

person Jeremy Knight    schedule 22.08.2013
comment
В более поздних версиях select2 (я тестировал на 4.0.3) замените «.select2-drop» на «.select2-dropdown». - person shimizu; 03.01.2017

arrow_upward
10
arrow_downward

Простой способ:

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

добавьте это после того, где вы установите select2

person Ali7091    schedule 17.10.2016

arrow_upward
5
arrow_downward

Или попробуйте это из: Select2 не работает при внедрении в Модальное окно начальной загрузки

Удалить tabindex="-1" из модального блока

person Umair    schedule 05.11.2013

arrow_upward
3
arrow_downward

Я нашел этот обходной путь. https://github.com/ivaynberg/select2/issues/1246

Ура Джейм

person jstuardo    schedule 06.06.2013
comment
Эта ссылка содержит множество различных предлагаемых решений/обходных путей. Трудно понять, какое из них лучшее решение. (Никакого голосования, как на SO). Не могли бы вы поделиться тем, что конкретно сработало для вас? - person Jeremy Knight; 22.08.2013
comment
Ни одно из этих решений не сработало для меня. Можете ли вы сказать мне, какой из них вы опробовали [или в сочетании с] сработали? - person Exegesis; 08.10.2013

arrow_upward
2
arrow_downward

Есть новая версия исправления для select2 4.0 из потока проблем github об этой проблеме< /а>:

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 этого исправления в действии

person Gavin.Paolucci.Kleinow    schedule 19.08.2015

arrow_upward
2
arrow_downward

Лучшим решением, которое я нашел, было просто сделать диалог не модальным, удалив modal:true. Как только вы это сделаете, страница будет функционировать так, как вы хотите.

Через некоторое время борьбы с этим я нашел другой вариант, который позволяет вам сохранить диалог как модальный. Если вы измените css для select2 на что-то вроде следующего:

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

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

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

имейте в виду, что это работает, однако, если вы откроете много диалогов на одной странице, он в конечном итоге превысит указанный z-индекс, однако в моем случае использования эти числа выполнили свою работу.

person abuss    schedule 08.09.2014

arrow_upward
1
arrow_downward

Недостаточно репутации, чтобы прокомментировать предыдущий пост, но я хотел добавить этот фрагмент кода:

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

person THammons    schedule 08.09.2014

arrow_upward
1
arrow_downward

Добавьте это после объявления select2().

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

arrow_upward
0
arrow_downward

Я успешно использовал следующее исправление:

$.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();
            }
        });
    }
person d.grassi84    schedule 07.05.2014

arrow_upward
0
arrow_downward

Я мог бы исправить это, удалив опцию: 'modal: true' из параметров диалога.
Все работало нормально.

person Tariq    schedule 27.05.2015

arrow_upward
0
arrow_downward

Для тех, кто натыкается на это с помощью Select2 v4.0.12

Я использовал параметр Select2 dropdownParent.

я установил значение dropDownParent, и проблема все еще была.

dropdownParent: $("#ReportFilterDialog")

Что исправило это для меня, так это установить значение, чтобы выбрать внешний слой модального диалога:

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

person Saku    schedule 13.03.2020