Render java map with in jsf, but the result cannot be consistent with the map in controller

Question

I tried to iterate a map in jsf page. But after the map data modified, I found that always the last item was be removed on the page. The specific steps are as below：

Before clicking delete button:

After clicking delete button:

After refreshing page:

---

Before clicking delete button:

After clicking delete button:

After refreshing page:

jsf:

<h:panelGroup id="myPanel" layout="block">
        <c:forEach var="entry" items="#{myController.myMap}">
                <div class="col-md-2">
                    <h:outputText value="#{entry.key.date}" >
                        <f:convertDateTime pattern="dd/MM/YYYY" timeZone="GMT+8" />
                    </h:outputText>
                </div>
                <div class="col-md-1">
                    <h:commandLink>
                        <i id="delete-holiday" class="glyphicon glyphicon-trash"></i>
                        <f:ajax event="click" listener="#{myController.delete(entry.key)}" render="myPanel"></f:ajax>
                    </h:commandLink>
                </div>
        </c:forEach>
</h:panelGroup>

java code:

public void delete(Object date){
    myMap.remove(date);
}

Answer 1

I resolved it, the reason is that java Map used in jsf foreach rendering. I do not have a deep knowledge of jsf render mechanism. But I estimate that it just got the Map's size as Map modified and jsf being rendering the Map, but did not get the Map content. it is a consistency problem. It might be jsf mechanism issue or is there more perfect solution to solve it. I do not know. But I've adapted the solution that using List but not Map to render data, it works well. If you know why does not map work, or have a better solution for this. Please kindly let me know.

Answer 2

I found another solution may be better. Add one more f:ajax tag within component tag like below:

<h:commandLink>
    <i id="delete-holiday" class="glyphicon glyphicon-trash"></i>
    <f:ajax event="click" listener="#{myController.delete(entry.key)}" render="myPanel" />
    <f:ajax event="click" render="myPanel" />
</h:commandLink>