带有ajax的jsf2表单

Question

On complex data input forms it may happen that one needs to edit a form in a form. 在复杂的数据输入表单上，可能会发生需要编辑表单中的表单的情况。 As this is not possible in JSF2, I wonder what better solution could be found for this problem. 由于这在JSF2中是不可能的，所以我想知道对于这个问题有什么更好的解决方案。 Here's an example of what I need: 这是我需要的示例：

given: two beans: OuterBean and HobbyBean; 给定：两个bean：OuterBean和HobbyBean； a list of HobbyBeans is used in OuterBean 在OuterBean中使用HobbyBeans的列表
OuterBean is a ManagedBean (in SessionScope) OuterBean是ManagedBean（在SessionScope中）
HobbyBean contains two fields hobby and like HobbyBean包含两个字段，爱好和喜欢

I want to add HobbyBeans on the form of adding a user's name in OuterBean without submitting OuterBean but submitting new values to fill the list. 我想以在OuterBean中添加用户名的形式添加HobbyBeans，而无需提交OuterBean，而是提交新值来填充列表。 Here's the code example: 这是代码示例：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
    </h:head>
    <h:body>
        <h:form>
        <h:panelGrid columns="2">
            <h:outputText value="Name" />
            <h:inputText value="#{outerBean.name}" required="true" />
            <h:outputText value="Hobbies" />
            <h:dataTable id="ht" value="#{outerBean.hobbies}" var="h">
                <h:column>
                    <h:outputText value="#{h.hobby}" />
                    <f:facet name="footer">
                        <h:inputText value="#{outerBean.hobby}" required="true" />
                    </f:facet>
                </h:column>
                <h:column>
                    <h:outputText value="#{h.like}" />
                    <f:facet name="footer">
                        <h:inputText value="#{outerBean.like}" required="true" />
                        <h:commandButton action="#{outerBean.addHobby}" value="+" immediate="true">
                            <f:ajax render="ht" />
                        </h:commandButton>
                    </f:facet>
                </h:column>
            </h:dataTable>
        </h:panelGrid>
        </h:form>
    </h:body>
    </html>

Yes, there is no command button for the outer form, but that's not the question here. 是的，没有用于外部表单的命令按钮，但这不是这里的问题。 The commandButton is for the inner form and therefore set attribute immediate = true. commandButton用于内部形式，因此将属性设置为Instant = true。 Doing this, all fields are NOT checked to be not empty (required-Tag is ignored). 执行此操作时，不会检查所有字段是否为空（忽略必填标记）。 But also is the content of this fields ignored and not set into the ajax request. 但是，此字段的内容也会被忽略，并且不会设置为ajax请求。 How do I avoid this and send the field values of h.hobby and h.like within the ajax request to the OuterBean? 如何避免这种情况，并将ajax请求中的h.hobby和h.like字段值发送给OuterBean？

Here the beans: 这里的豆子：

    @ManagedBean
    @SessionScoped
    public class OuterBean
    {
        private List<HobbyBean> hobbies;
        private String name;
        private String hobby;
        private Integer like;

        public OuterBean()
        {
            hobbies = new ArrayList<HobbyBean>();
        }

        public String addHobby()
        {
            hobbies.add(new HobbyBean(hobby, like));
            System.out.println("hobbies: " + hobbies.toString());
            return "";
        }

        public String submit()
        {
            System.out.println("name is " + name);
            return "";
        }
    // + getter & setter
    }

    /* ------------------------------------------------------------------------ */

    public class HobbyBean
    {
        private String hobby;
        private Integer like;

        public HobbyBean(String hobby, Integer like)
        {
            this.hobby = hobby;
            this.like = like;
        }

        public String toString()
        {
            return hobby == null ? "" : hobby.concat(",").concat(like == null ? "" : like.toString());
        }
    // + getter & setter
    }

Now what happens when I add a hobby to the bean is that there is no hobby added because the bean fields hobby and like are not set (the list is empty, log is: "hobbies: []"). 现在，当我向bean添加爱好时，由于没有设置bean的爱好和类似字段（列表为空，日志为：“爱好：[]”），因此没有添加爱好。 How can I make it work? 我该如何运作？

Answer 1

Well your hobbies is empty because you don't tell the f:ajax what to submit. 好吧，您的兴趣爱好是空的，因为您没有告诉f：ajax提交什么。 IF you want to do a partial submit (i guess that's what you want) You can try the following: 如果您要部分提交（我想这就是您想要的），可以尝试以下操作：

<h:form>
    <h:panelGrid columns="2">
        <h:outputText value="Name" />
        <h:inputText value="#{outerBean.name}" required="true" />
        <h:outputText value="Hobbies" />
        <h:dataTable id="ht" value="#{outerBean.hobbies}" var="h">
            <h:column>
                <h:outputText value="#{h.hobby}" />
                <f:facet name="footer">
                    <h:inputText id="hobby" value="#{outerBean.hobby}" required="true" />
                </f:facet>
            </h:column>
            <h:column>
                <h:outputText value="#{h.like}" />
                <f:facet name="footer">
                    <h:inputText id="like" value="#{outerBean.like}" required="true" />
                    <h:commandButton action="#{outerBean.addHobby()}" value="+" >
                        <f:ajax execute="hobby like" render="ht" />
                    </h:commandButton>
                </f:facet>
            </h:column>
        </h:dataTable>
    </h:panelGrid>
</h:form>

As you can see in the code you tell f:ajax wich part of the form needs to be submitted when you push the button. 正如您在代码中看到的那样，您告诉f：ajax按下按钮时需要提交表单的一部分。 If you check your bean now you will see that only the hobby and like are added to the bean. 如果现在检查您的bean，您将看到只有嗜好和喜欢被添加到bean中。 The name part will not be submitted. 名称部分将不会提交。 You say all fields are not checked. 您说未选中所有字段。 This is because you use immediate=true this skips validation. 这是因为您使用Instant = true会跳过验证。 I would suggest not to use it. 我建议不要使用它。 Look here for more information about immediate= true http://balusc.blogspot.nl/2006/09/debug-jsf-lifecycle.html#WhenShouldIUseTheImmediateAttribute Hopes this help you. 在此处查找有关即时=真的更多信息http://balusc.blogspot.nl/2006/09/debug-jsf-lifecycle.html#WhenShouldIUseTheImmediateAttribute希望这对您有所帮助。

带有ajax的jsf2表单

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-05-24 11:21:19

带有ajax的jsf2表单

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-05-24 11:21:19

解决方案1
1 已采纳 2013-05-24 11:21:19