JSF- <f:ajax> can't render datatable - ajax

Question

I have a datatable which has a "delete" button at each row,
and I want to re-render the table when the data at the row is deleted.
But I can not make f:ajax work properly.
Here is the datatable at facelet page:
<h:form>
<h:dataTable value="#{adminPanelBean.activitiesList}" var="activityItem" id="allActivities"
styleClass="datatable" cellpadding="2" cellspacing="4"
columnClasses="ColName,colType,colTime,colPlace,colSummary" >
<h:column>
<f:facet name="header">
<h:outputText value="Etkinlik"/>
</f:facet>
<h:outputText value="#{activityItem.name} "/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Türü"/>
</f:facet>
<h:outputText value="#{activityItem.type}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Tarih "/>
</f:facet>
<h:outputText value="#{activityItem.time}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Yer "/>
</f:facet>
<h:outputText value="#{activityItem.place}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Açıklama "/>
</f:facet>
<h:outputText value="#{activityItem.summary}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value=" "/>
</f:facet>
**<h:commandButton value="Delete activity" onclick="if(confirm(' Delete #{activityItem.name} ?'))return true; else return false;" action="#{adminPanelBean.deleteActivity(activityItem.id)}">
<f:ajax event="click" render="allActivities" execute="#all" immediate="true"/>
<f:param name="activityId" value ="#{activityItem.id}" />
</h:commandButton>**
</h:column>
</h:dataTable>
</h:form>
When I refresh the page, I see the row is deleted. But I want it to be done dynamically.

Answer 1

In the action method you need to remove the item from the list as well (and thus not only from the DB). I'd suggest to pass the whole item instead of only the ID so that you can utilize List#remove() method.
action="#{adminPanelBean.deleteActivity(activityItem)}">
So that you can do
public void deleteActivity(Activity activity) {
activitiesList.remove(activity);
// ...
}
Unrelated to the concrete problem, they way how you used confirm() is pretty clumsy.
onclick="if(confirm(' Delete #{activityItem.name} ?'))return true; else return false;"
That function returns a boolean already. You do not need to test the obtained boolean within an if in order to return another boolean. Just simplify it as follows:
onclick="return confirm('Delete #{activityItem.name}?')"