2013-02-19 2 views
2

저는 지금까지 select2 플러그인을 작업 해 왔으며 지금까지는 완벽했습니다.select2 검색이 작동하지 않습니다.

데이터를로드하고 잘 작동하는 3 개의 선택 항목과 팝업 내에있는 여러 개의 선택 항목이있는 페이지가 있습니다. 그들은 좋아 보이지만 검색 필드에 쓸 수는 없습니다. 메인 페이지에서 검색이 잘 작동하여 문제가 무엇인지 파악할 수 없습니다 ..

나는 팝업을 위해 blockUI 플러그인을 사용하고 있습니다. 나는 z-index를 시도하고, blockUI 함수에 대한 콜백에서 플러그인을 파괴하고 시작했지만 아무 것도 작동하지 않고 왜 그럴지 모릅니다.

코드 :

<!doctype html> 
<html> 
<head> 
<title>ff</title> 
<link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js"> </script> 
<script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockUI.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".startselect").select2(); 

     $('#clickstartpopup').click(function() { 
      $.blockUI({ 
       message: $('#popblock'), 
       onBlock: function() { 
        $(".popupselect").select2(); 

       } 
      }); 
     }); 

    }); 
</script> 
</head> 
<body> 
<div id="maincontent1" class="maincontent mywebsitepage"> 
    <select class="startselect" id="merchantList"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select> 
</div> 
<div style="clear: both; height: 15px;"></div> 
<span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span> 
<div style="height: 300px;background-color: red;display:none;" id="popblock" > 
<select class="popupselect"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select> 
</div> 
</body> 
</html> 


어떤 제안?

+0

동일한 문제가 발생했습니다. 수정 사항을 찾았습니까? – erikcw

답변

1

동일한 문제가 여기에 있습니다. jquery.fullCalendar에 포함 된 이벤트를 클릭하면 열리는 툴팁 (qtip2)에서 select2를로드합니다. fullCalendar 자체가 div에 표시되며 응용 프로그램을 오버레이하는 blockUI 메시지로 사용됩니다.

기본적으로 select의 검색 필드가 제대로 작동하지 않습니다. JQuery와 blockUI 버전 2.57.0 (2013년 2월 17일) 배경 응용 프로그램에서 요소를 차단하고 바로 차단을 해제하여 예상대로 내가 선택 2 일의 검색 필드를 만들 수 있습니다와 :

$("#someDivInTheBg").block(); 
$("#someDivInTheBg").unblock(); 

을 호기심은, 그 해결 방법은 않습니다 jquery BlockUI 버전 2.64.0 (18.07.13)에서 더 이상 작동하지 않습니다. 무슨 일이 일어나고 있는지 파악할 수 없으며 분명히 blockUI/select2 상호 작용이라는 점을 제외하면 문제를 추적하는 방법을 찾을 수 있습니다.

가끔씩 내가 select2 검색 필드를 표시 한 직후에 입력하려고하는 첫 번째 문자가 잠기기 전에 검색 필드에 표시된다는 점에 유의하십시오. qtip을 열 때 blockUI가로드되지 않으므로 select2 코드에 의해 문제가 트리거 될 수 있습니다. 문제가 배경 응용 프로그램 (안 blockUI 메시지 내부)에 위치하고, 다른 선택 2 발생할

내가 blockUI에서 문제를보고하려고합니다 및 선택 2 githubs하지 않는 것이

* 수정 : 솔루션 * 글쎄, 문제는 사실 간단합니다.

선택 2는 2 개 부분으로 분할된다 : - 선택 2 컨테이너 바로 옆 원래 선택에 (또는 숨겨진 입력 동적으로로드 데이터 작업시) 배치 - 선택 2 드롭 단지 태그의 앞에 삽입한다 (이 요소가 있음을 유의 고유하며 각 항목을 열 때 select2에 사용됨) 입력 필드 .select2-input, select2-drop의 하위 항목입니다.

의 메시지에없는 요소에 대한 키와 마우스 이벤트, 그냥 설명서의 malsup, 작성자, 말했다 BlockUI 기본적으로 비활성화 : 당신이 키하려는 경우

// 활성화하고 마우스 이벤트가 bindEvents을 차단 된 콘텐츠를 비활성화 : 당신이 blockUI 메시지 내부에있는 필드에 선택 2를 초기화 할 때, 그래서 사실

을, 모든의 해당 키와 마우스 이벤트를 제외하고 괜찮아 입력에 사용할 수 없습니다. select2 - blockUI 메시지 안에 있지 않지만 나가는 필드 문서의 HTML의 끝 부분에면 ...

솔루션이하는 것만 큼 간단

가 :

bindEvents: false, 

유지하거나 blockUI 요소의 외부에 초점을 취할 수있는 요소주의 : 옵션으로 blockUI를 초기화하기 마우스 및 키 이벤트가 중립화되지 않기 때문입니다.

blockUI 내부의 select2 아키텍처와 관련된 약간의 개선점이있을 수 있습니다.

관련 문제