JSF自定义组件失去了关注ajax更新的输入

时间:2011-08-22 20:53:43

标签: javascript ajax jsf custom-component

我正在编写一个自动完成自定义组件作为JSF的学习练习 2.1.3。这个想法(可能非常熟悉)是输入一些文字 和输入组件并显示具有匹配值的列表框。这个想法是 在输入上有一个keyup javascript事件调用jsf.ajax.request() 更新组件。到目前为止,我有一个我可以包含的组件 这样:

<mycc:autocomplete id="myauto" searchMethod="#{bean.doSearch}"/>

这会呈现如下的HTML:

<span id="myauto">
  <input type="text" id="myauto_input" name="myauto_input"
    onkeyup="com.myco.ajaxRequest(this, event)"/>
  <select id="myauto_listbox" name="myauto_listbox">
    <option value="1st">First</option>
    <option value="2nd">Second</option>
  </select>
</span>

com.myco.ajaxRequest()javascript函数(keyup)执行此操作:

jsf.ajax.request(comp, null, {
                 execute: 'myauto',
                 render: 'myauto'
                 });

因为我想用建议重建并重新呈现列表框 列表,我正在重新渲染自定义组件'myauto'。通过指定执行: 'myauto'的decode()方法执行,我可以得到输入值。通过 指定render:'myauto',编码...()方法执行重新生成 html。

这很好但是因为我正在渲染myauto_input的父级 组件每次keyup事件触发时都会丢失输入焦点。

如果我指定像渲染这样的东西:'myauto_listbox'(我真的很想 毕竟重新放回列表框)问题是编码...()方法 不执行,因为它们是整个自定义组件,而不仅仅是 列表框。它将在我重建的一个encode ...()方法中 包含建议的列表框。

组件扩展了UIInput,我在单独的渲染器中生成标记 encodeEnd()方法中的(componentFamily =“javax.faces.Input”)(所以这个 总是在任何提供的转换器之后运行 - 尚未实现)。我想 从javascript强制焦点是一个可怕的黑客,并被避免。

我有点不确定该去哪里,但我怀疑我所看到的 表明我以某种方式以错误的方式接近这个。如果有人 会很好地指出我正确的方向,我会非常感激 它

1 个答案:

答案 0 :(得分:1)

我花了一些时间研究这个以及失去焦点的一般问题 ajax更新相当普遍,并在Jim Driscoll的blog中有所描述(参见 &#39;保持专注&#39;)。

对于我的自定义组件,我(我想......)必须更新自定义组件 本身就是输入的父母,因此我将失去焦点 ajax更新,这就是它的方式。因此,我看了一下需要做什么 完成恢复焦点,似乎在我的渲染器编码我只需要 强制恢复焦点到输入,但仅在响应jsf.ajax.request从onkeyup事件发送的POST时。我使用jQuery并且只是调用.focus()isn&#t; t 因为你还必须将光标位置放到任何现有的位置 输入。下面的代码似乎工作正常:

<script>
  jQuery(function($){var cid='#myauto_input';$(cid).focus().focus().click();$(cid).val($(cid).val());});
</script>

(注意:.focus()。focus()。点击()IE8所需,只需.focus()适用于Chrome ...)

所以看起来可怕的黑客已经挽救了这一天。我确实想知道是否会有 如果我使用jQuery ajax例程而不是jsf ajax库但是有任何区别 我不认为它会有任何不同。