Multiple forms in jsf page

Question

Here is my view

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

What I am trying to do is change the value of p:rating tag and p:menu to trigger but its seem like my page is only submitting the first form. Also how can I submit a post and div that contains my post will automatically update?

Answer 1

In my opinion the problem is that your components inside of the ui:repeat have all the time the same id's for each iteration.

The way i used to define ids in loops like that was to add some sort of unique prefix or suffix to them based on some field of the data over which i am iterating:

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

Now each of your components, including the form, which is highly likely to be the cause of your problem, will have its unique id for each of the loop repetition.