Question

这是我的观点

 <h:body>
    <div id="header"></div>
    <div id="upload">
        <h:form id="frmMain" enctype="multipart/form-data">
            <p:inputTextarea id="text" style="width: 99%" value="#{uploadfile.content}"  placeholder="What are you thinking?"></p:inputTextarea>
            <p:fileUpload auto="true" oncomplete="input()"  id="fileIdPhoto"  previewWidth="200" style="width: 100%" messageTemplate="{name}" fileUploadListener="#{uploadfile.upload}" mode="advanced" dragDropSupport="true"
                          multiple="true" update="messages"   allowTypes="/(\.|\/)(gif|jpe?g|png)$/"  />
            <p:messages id="messages" autoUpdate="true" closable="true" />
            <p:menubar  autoDisplay="false">
                <p:menuitem  />
                <f:facet name="options">
                    <p:commandButton  value="Publish" update="fileIdPhoto"  icon="ui-icon-extlink" actionListener="#{uploadfile.uploadPhoto}">
                    </p:commandButton>

                </f:facet>
            </p:menubar>
        </h:form>

    </div>
    <div id="body">
        <div id="post_container">

            <ul>
                <ui:repeat value="#{image.allpost}" var="value">
                    <h:form id="form">
                        <li>
                            <div id="post">               
                                <p:commandButton rendered="false" id="dynaButton" process="@this,form" value="Show" type="button" icon="ui-icon-extlink"/> cant not trigger it so I set render false 
                                <p:menu overlay="true" trigger="dynaButton" my="left top" at="left bottom">
                                    <p:submenu label="Ajax">
                                        <p:menuitem value="Delete" icon="ui-icon-disk"/>
                                        <p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>
                                    </p:submenu>
                                </p:menu>

                                <b>#{value.content}</b> <br/>
                                #{value.createtime} <br/>
                                <br />
                                <p:galleria value="#{image.getImgByID(value.id)}" rendered="#{not empty image.getImgByID(value.id)}" var="a" panelWidth="720" panelHeight="400" showCaption="true">
                                    <h:graphicImage value="data:image/jpeg;base64,#{a.imgUrl}"  style="width:100%;height:100% " alt="Image Description for #{a.imgName}" title="#{a.imgName}"/>
                                </p:galleria>
                                <p:rating value="#{value.rating}" stars="10" cancel="false"/>cant change those stars by clicking on it
                            </div>
                            <div id="post_ceperator"/>
                        </li>    
                    </h:form>
                </ui:repeat>
            </ul>

        </div>
    </div>
</h:body>

我要做的是更改p:rating代码和p:menu的值以触发，但看起来我的页面只提交第一个表单。另外我如何提交包含我的帖子的帖子和div会自动更新？

Answer 1

在我看来，问题是ui：repeat内部的组件在每次迭代时始终具有相同的id。

我习惯在循环中定义id的方式是根据我迭代的数据的某些字段为它们添加某种唯一的前缀或后缀：

<ui:repeat value="#{image.allpost}" var="value">
       <h:form id="form_#{value.id}">
          <li>
             <div id="post_#{value.id}">

现在，每个组件（包括很可能导致问题的表单）都会为每个循环重复提供唯一的ID。

jsf页面中的多个表单

1 个答案: