在JSF 1.2 AJAX行为行为、JSF、AJAX

2023-09-10 21:00:27 作者:红颜妖娆了谁的青春。

我有一个selectonlistbox,我想重装一个panelGrid中每次的选择框作出选择/改变。我尽量只使用JSF 1.2。

I have a selectonlistbox and I want to reload a panelgrid everytime the selectbox selection is made/changed. I am try to use just jsf 1.2.

我知道这很容易做到使用A4J或面临2,但如果有谁知道什么好的方法在JSF 1.2中实现这一点,我真的AP preciate吧。

I know it can be done easily using a4j or faces 2, but if anyone knows any good way to achieve this in jsf 1.2, I would really appreciate it.

一个简单的例子就是有很大的帮助了。

A simple example would help a lot too.

感谢

推荐答案

您基本上需要创建一个自定义的Ajax知道的 的ViewHandler 和一个自定义XML的 ResponseWriter 和的自定义标签产生所需的JavaScript code执行 XMLHtt prequest 作品和HTML DOM操作。这也是大多数这些第三方的JSF 1.x的组件库中所做的那样。他们都是开源的,所以你可以只采取偷看在它的源$ C ​​$ C学习逐比如他们是如何做到的。这对首发毕竟但是不是一个简单的工作,因为它需要究竟怎么了HTTP,HTML DOM,JavaScript和XMLHtt prequest工程扎实的知识。稍有不慎被迅速做了,它会为首发采取的年龄找到并真正了解它。

You basically need to create a custom Ajax aware ViewHandler and a custom XML ResponseWriter and custom tags which generates the desired JavaScript code to perform the XMLHttpRequest works and HTML DOM manipulation. This is also what most of those 3rd party JSF 1.x component libraries have done. They are all open source, so you could just take a peek in its source code to learn-by-example how they did it. It's for a starter after all however not a trivial job as it requires a solid knowledge of how exactly HTTP, HTML DOM, JavaScript and XMLHttpRequest works. A little mistake is quickly made and it would for a starter take ages to find and really understand it.

您最好的选择真的是既采用了Ajax功能的部件库中的JSF 1.2(如 RichFaces的3.X 这包括Ajax4jsf的),或者只是migrating到JSF 2.0 (JSF 1.2是超过6年已经老了和JSF 2.0引入了近3年前已; JSF 1.x的基本历史)

Your best bet is really either adopting an ajax capable component library for JSF 1.2 (e.g. RichFaces 3.x which includes Ajax4jsf), or just migrating to JSF 2.0 (JSF 1.2 is over 6 years old already and JSF 2.0 was introduced almost 3 years ago already; JSF 1.x is basically history).

这个特殊的功能要求可以但也可以不AJAX做,虽然有些笨拙,当然如果表单验证起到了重要作用。这里有一个基本的开球的例子,它只是指示JavaScript在下拉列表的变化提交父窗体的问题:

This particular functional requirement can however also be done without ajax, albeit somewhat clumsy, certainly if form validation plays a role. Here's a basic kickoff example, it's a matter of just instructing JavaScript to submit the parent form on change of the dropdown list:

<h:form>
    <h:selectOneMenu value="#{bean.selected}" onchange="this.form.submit()">
        <f:selectItem itemValue="one" />
        <f:selectItem itemValue="two" />
        <f:selectItem itemValue="three" />
    </h:selectOneMenu>
    <h:panelGroup rendered="#{bean.selected == 'one'}">
        One was selected.
    </h:panelGroup>
    <h:panelGroup rendered="#{bean.selected == 'two'}">
        Two was selected.
    </h:panelGroup>
    <h:panelGroup rendered="#{bean.selected == 'three'}">
        Trree was selected.
    </h:panelGroup>
</h:form>

这将同步在下拉列表中的变化提交完整的形式,因为如果你pressed一个提交按钮。然而,正如说,如果你在其他地方以相同的形式进行验证,你必须用将在相当长的一段黑客立即=真正的 valueChangeListener 所有其他形式的元素prevent验证。另请参见填充子菜单的一些具体的例子。

This will submit the whole form synchronously on change of the dropdown list, as if you pressed a submit button. However, as said, if you're performing validation elsewhere in the same form, you'd have to bring in quite some hacks with immediate="true" and valueChangeListener to prevent validation of all other form elements. See also Populate child menus for some detailed examples.

一个完全不同的另一种方法是只呈现的所有应用于HTML响应,并使用其隐藏的CSS 显示:无,然后使用切换显示JavaScript的 element.style.display 在其中引用了一些JS功能的onchange 属性。

A completely different alternative is to just render everything to the HTML response and hide it using CSS display:none and then toggle the display using JavaScript element.style.display in some JS function which is referenced in onchange attribute.

 
精彩推荐
图片推荐