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

Я использую plug2 в диалоговом окне 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;
        });

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

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

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

Ответы

Ответ 2

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

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

Просто добавьте его рядом с тем местом, где вы устанавливаете drop2.

Ответ 3

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

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

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

Ответ 5

Лучшее решение, которое я нашел, просто заставило диалог не быть модальным диалогом, удалив модальный: true. После этого страница будет работать по желанию.

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

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

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

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

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

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

Появилась новая версия исправления для select2 4.0 из github issue thread об этой проблеме:

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

Ответ 9

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

$.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();
            }
        });
    }

Ответ 10

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