2011-11-10 3 views
1

<input>을 렌더링하는 자동 완성 JSF 사용자 정의 구성 요소를 작성했으며 텍스트를 입력하면 서버에 ajax 요청을 보냅니다. 결과는 으로 <select><option> 태그로 표시됩니다.jquery 모달 대화 상자 및 크롬 브라우저에서 동적 내용에 대한 변경 이벤트가 발생하지 않습니다.

내가 <custom:autocomplete id="findTeam"/>이있는 경우 구성 요소는 다음과 같은 구조 를 렌더링 :

<span id="findTeam> 
    <input id="findTeam_input"/> 
    <select id="findTeam_listbox"> 
    <option ...> 
    </select> 
</span> 

을 나는 항목이 가 목록에서 선택했을 때 알 수 있도록 <select>에 대한 변경 이벤트를 바인딩 jQuery를 사용 . 이것은 일반적으로 작동하지만, 변경 이벤트는 크롬 브라우저 (v15.0.874.106 m)를 사용할 때 jquery UI 1.8.16 모달 대화 상자에서 구성 요소를 사용할 때 이 실행되지 않습니다. 대화 상자가 모달이 아니고 IE8의 경우 모달 대화 상자에서 제대로 작동하면 잘 작동합니다. 따라서 <select>이 렌더링되고 내가 옵션 중 하나를 클릭하면 아무 일도 일어나지 않습니다 - 표시되어 있지만 아무 것도 선택할 수 없습니다.

js 콘솔에 오류가 표시되지 않고 다음에 무엇을 시도해야할지 잘 모르겠습니다. 여기 은 서버에서 아약스 응답의 샘플입니다) (대신 .bind의) (.live 사용하여 내가 해봤

<?xml version='1.0' encoding='UTF-8'?> 
<partial-response> 
    <changes> 
     <update id="findTeam"> 
      <![CDATA[ 
      <script> 
       jQuery(function($){ 
        com.corejsf.ajaxSetup("mojarra.ab('findTeam',event,'change',0,'addButton')"); 
        $('#findTeam').hover(com.corejsf.compFocusSet,com.corejsf.compFocusClear); 
       }); 
      </script> 
      <span id="findTeam"> 
       <input id="findTeam_input" type="text" name="findTeam_input" autocomplete="off" value="tea" /> 
       <script> 
        jQuery(function($){ 
         $('#findTeam_input').bind('keydown','#findTeam_listbox',com.corejsf.inputKeydown); 
         $('#findTeam_input').bind('blur','#findTeam',com.corejsf.compBlur); 
         $('#findTeam_input').bind('keyup',{id:'#findTeam',minChars:3},com.corejsf.inputKeyup); 
         $('#findTeam_input').bind('mousedown','#findTeam',com.corejsf.inputClick);var cid='#findTeam_input'; 
         $(cid).focus().focus().click();$(cid).val($(cid).val()); 
        }); 
       </script> 
       <select id="findTeam_listbox" name="findTeam_listbox" size="10" style="position: absolute"> 
        <option value="cfdb36cd-ebfa-49b9-941e-2a74d7b82aef">Team 5</option> 
        <option value="a206fbbc-552d-4b7b-b2d3-dc1a50f98667">Team 6</option> 
        <option value="bc5f9f1d-ef76-452f-9101-bff703efbf38">Team 7</option> 
        <option value="2a43ff65-d170-45a7-9bf0-ec237d51603d">Team 8</option> 
        <option value="7112ca7d-75ea-4957-a830-7ef7b54e18f5">Team 9</option> 
       </select> 
       <script> 
       jQuery(function($){ 
        $('#findTeam_listbox').position({my:'left top',at:'left bottom',of:$('#findTeam_input'),collision:'fit'}); 
        $('#findTeam_listbox').dropShadow({left:4,top:4,blur:1}); 
        $('#findTeam_listbox').bind('change',com.corejsf.listClick); 
        $('#findTeam_listbox').bind('blur','#findTeam',com.corejsf.compBlur); 
       }); 
       </script> 
      </span> 
      ]]> 
     </update> 
     <update id="javax.faces.ViewState"> 
      <![CDATA[8331589387080754551:-7156357472895110486]]> 
     </update> 
    </changes> 
</partial-response> 

하지만, 도움이되지 않습니다이이 보안의 일부 종류의 수 크롬 규제? 어떤 제안을 주셔서 감사합니다.

답변

0

보안상의 제한 사항이 아닙니다. 모달 상자 생성 후 다시 바인딩해야합니다!

+0

나는 dialogopen 이벤트 처리기에서 다시 바인딩을 시도했지만 여전히 아무 일도 발생하지 않습니다. 나는 dialogopen 핸들러 (호출되는)와 listClick() 핸들러 (그렇지 않은) 모두에 경고를했습니다. 어떤 아이디어? 생각해 보면 대화 상자가 열려있을 때 findTeam_listbox가 존재하지 않습니다. 일부 텍스트가 입력에 입력되고 일부 결과가 서버에서 반환되는 경우에만 나타납니다. change 이벤트는 select 태그가 렌더링 된 후에 바인딩됩니다. 귀하의 회신에 감사드립니다. – Oversteer