f:ajax reload content only after page reloaded - ajax

Question

So, i have code:
<h:form id="newMessages" rendered="#{not empty welcome.letters and urlBean.welcome}" styleClass="infoNotes">
**some not important code here**
<ui:repeat id="data" value="#{welcome.letters}" var="letter" varStatus="status">
<h:panelGroup rendered="#{status.index lt 3}">
<div>
<h:commandLink styleClass="noticeClose" rendered="#{letter.content.IMPORTANCE ne '2'}">
<f:ajax listener="#{welcome.onMessageNoticeClose(letter)}" event="click" render="#{cc.clientId}:newMessages newLettersCount"/>
</h:commandLink>
</div>
</h:panelGroup>
**some not important code here**
</ui:repeat>
**some not important code here**
</h:form>
method used when we "click" on close button
public void onMessageNoticeClose(Document letter) {
try (RequestContext ctx = RequestContextFactory.create()) {
DocumentEngine.getInstance().markAsRead(letter, true, ctx);
}
Utils.getRolesBean().recalcMessageCount();
loadMessages();
}
and couple of methods that recalc message count and load new messages. So if we have new unread messages we show them on main page (3 of them). So, problem is when we click close button 'styleClass="noticeClose"', we mark letter as read and didnt show it on main page. But with that code have bug, if in list we have only one message and button close clicked, this letter mark as "read" and message count recalc correct, but it still showed on main page, and don`t rendered only after page will be reloaded. So, solution is if we h:form surround with h:panelgroup like:
<h:panelGroup id="newMessages">
<h:form rendered="#{not empty welcome.letters and urlBean.welcome}" styleClass="infoNotes">
but i don`t understand how it work... Can anyone help me understand this or just explain. Thank you.