Блог

Я написал пользовательский компонент автозаполнения JSF, который отображает <input> и при вводе текста отправляет ajax-запрос на сервер. Результаты отображаются в виде <select> с <option> тегами.

Если у меня есть <custom:autocomplete id="findTeam"/> , компонент будет отображать структуру, подобную этой:

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

Я использую jQuery для привязки события изменения к <select> , чтобы я знал, когда запись имеет
выбрано из списка. Обычно это работает нормально, но событие изменения не
срабатывает, когда я использую компонент внутри модального диалогового окна jquery ui 1.8.16 при использовании
браузер Chrome (версия 15.0.874.106 m). Это работает нормально, если диалоговое окно не является модальным, и в IE8
это нормально работает с модальным диалоговым окном. Итак, когда <select> отображается, и я нажимаю на
один из вариантов, ничего не происходит — он остается отображаемым, но я ничего не могу выбрать.

Я не вижу никаких ошибок в консоли js, и я не совсем уверен, что попробовать дальше. Вот пример ответа ajax от сервера:

 <?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>
  

Я пробовал использовать .live () вместо .bind (), но это не помогает, может ли это быть каким-то
какое-то ограничение безопасности в Chrome? Спасибо за любые предложения.

Это не ограничение безопасности. Вы должны выполнить повторную привязку после создания модального окна!