Multiple forms in jsf page - jsf

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.