Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to remove a row <h:datatable> programaticaly
    text
    copied!<p>I have a form like the following picture. </p> <p><img src="https://i.stack.imgur.com/4txzw.jpg" alt="enter image description here"></p> <p>In the above picture you can see a green add button. When i click on it, it create a new row in a datatable via send a <code>&lt;f:ajax&gt;</code> to backing bean and render . </p> <p><img src="https://i.stack.imgur.com/JPzJD.jpg" alt="enter image description here"></p> <p>Until now all thing is good. But i Except when i click on a cross button inside of each row, that row removed. but it have a bug. for example when i click on the third row cross button, it remove this row from backing bean but not from my ui.</p> <p>in the following you can see my backing bean and .xhtml file. </p> <pre><code>@ManagedBean(name = "AddPollContorler") @ViewScoped public class AddPollControl { private List&lt;Answer&gt; answers = new ArrayList&lt;Answer&gt;(); @PostConstruct public void init(){ answers.add(new Answer()); answers.add(new Answer()); } public List&lt;Answer&gt; getAnswers() { return answers; } public void setAnswers(List&lt;Answer&gt; answers) { this.answers = answers; } public void addAnswer() { answers.add(new Answer()); } public void removeAnswer() { String index=FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("index"); if (StringUtil.isNumber(index)) answers.remove(Integer.parseInt(index)); } } </code></pre> <p>.xhtml : </p> <pre><code>&lt;div class="panel panel-success rgt"&gt; &lt;div class="panel-heading rgt"&gt; &lt;div style="float: left;"&gt; &lt;h:commandLink styleClass="btn btn-success table-button" action="#{AddPollContorler.addAnswer}"&gt; &lt;h:graphicImage library="img" name="add.png" styleClass=" table-icon" /&gt; &lt;f:ajax execute="answers" render="answers"&gt;&lt;/f:ajax&gt; &lt;/h:commandLink&gt; &lt;/div&gt; &lt;h4&gt;&lt;h:outputText value="#{msg['protected.poll.add.answers']}"/&gt;&lt;/h4&gt; &lt;/div&gt; &lt;div class="form-margin"&gt; &lt;h:dataTable value="#{AddPollContorler.answers}" var="answer" id="answers" style="width:100%;"&gt; &lt;h:column &gt; &lt;div class="input-group poll-answer" style="margin: 5px;"&gt; &lt;span class="input-group-addon no-left-radius"&gt;&lt;h:outputText value="#{CounterControler.index+1}" /&gt;&lt;/span&gt; &lt;h:inputText value="#{answer.text}" styleClass="form-control no-radius"/&gt; &lt;div class="input-group-addon no-right-radius poll-answer-remove" &gt; &lt;h:commandLink action="#{AddPollContorler.removeAnswer}"&gt; &lt;h:graphicImage library="img" name="cross.png" /&gt; &lt;f:param name="index" value="#{CounterControler.last}" /&gt; &lt;f:ajax render="answers answers" /&gt; &lt;/h:commandLink&gt; &lt;/div&gt; &lt;/div&gt; &lt;/h:column&gt; &lt;/h:dataTable&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>update: 2013/06/12</strong> </p> <pre><code>@ManagedBean(name="CounterControler") public class CounterControl { private int index=0; public int getIndex(){ return index++; } public int getLast(){ return index-1; } } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload