select2 플러그인이 jquery 모달 대화 상자 안에 있지 않을 때 잘 동작합니다.

Question

jquery 대화 상자에서 select2 플러그인을 사용하고 있는데 작동하지 않습니다. 드롭 다운 할 때 포커스는 입력 컨트롤로 이동하지만 즉시 입력 컨트롤에서 빠져 나와 아무 것도 입력 할 수 없습니다.

이

는 HTML입니다 :

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

그리고 이것은 자바 스크립트 코드 :

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

나는이 같은 코드가 다른 페이지와 그것을 작동합니다.

어떤 도움을 이해할 수있을 것이다,

감사 제이미

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

select2 드롭 다운을 설정하는 위치 옆에 추가하기 만하면됩니다. 내가 찾은 가장 좋은 해결책은 단지 만들고 있었다

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

또는에서이 시도 이 대화 상자는 모달을 제거하여 모달 대화 상자가 될 수 없습니다 : true. 이렇게하면 페이지가 원하는대로 작동합니다.

잠시 후이 대화 상자를 모달로 유지할 수있는 또 다른 옵션을 발견했습니다.

이

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

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

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

당신이 그것을 결국 지정된 Z- 인덱스를 초과 동일한 페이지에 대화를 많이 열면이 그러나 작동하는 것을 명심 그러나에 : 당신은 다음과 같이 뭔가 선택 2의 CSS를 수정하는 경우 나의 사용 사례는이 숫자가 일을 마쳤다.

Answer 4

모달 DIV에서 tabindex="-1"을 제거

Answer 5

: Select2 doesn't work when embedded in a bootstrap modal

내가 성공 다음 수정을 사용했습니다

Answer 6

충분하지 않습니다 명성 이전 게시물에 언급,하지만 난 코드의이 비트를 추가하고 싶었 : JQuery와 및 선택 2의 새 버전

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

업데이트하면이 시점에서 우리의 응용 프로그램에서 옵션을 선택하지 않습니다 . (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

github issue thread about this problem에서 선택 2 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); 
    }; 
} 

그냥 그들을 생성에 선택 2을해야합니다 모든 모달 대화 상자하기 전에이 작업을 실행합니다.

JSFiddle of this fix in action

Answer 10

쉬운 방법 :

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

당신이 그 링크가 다른 제안 된 솔루션/해결 방법을 많이 가지고 선택 2를