select2 плагин прекрасно работает, когда не внутри мода jQuery мода

Question

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

Это HTML:

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

И это Java-код:

 $("#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

Answer 1

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

Приветствия Jame ссылка

Answer 2

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

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

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

Answer 3

Или попробуйте это из: Select2 doesn't work when embedded in a bootstrap modal

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

Answer 4

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

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

Answer 5

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

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

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

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

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

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

Answer 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 и выбор2 не вариант в нашем приложении в это время , (с использованием JQueryUI v1.8 и Select2 v1)

Answer 7

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

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

Answer 8

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

Answer 9

Там новая версия исправления для выбор2 4.0 из github issue thread about this problem:

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

Просто запустите это перед любыми модальными диалогами, которые будут иметь ВЫБ.2 в них созданы.

JSFiddle of this fix in action

Answer 10

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

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

добавить это после того, везде, где вы установили ВЫБ.2