在Jsf 2.0中无法使用Ajax渲染页面

Question

I am facing very strange problem. After debugging from my side, I thought to post the same question on forum.

Problem: : I have 2 JSF Datatables say "TableA" and "TableB". I have some elements in TableB and now I want to move some articles based on criteria to move to TableA and get deleted or not visible in TableB.

I am able to add elements in TableA and can see that element has been deleted from TableB also through debugger as I printed the elements present in TableB but the same changes does not get reflected on UI.

Code is:

<div id="selectedTableId" class="ArtSlected">
<h:dataTable id="selectedArtTable" value="#{articleBean.artList1}" var="sel" width="100%" border="0" cellspacing="0"
             cellpadding="0" columnClasses="center" class="TableStyle">
  <h:column>
    <h:commandButton id="deleteArticle" image="../resources/images/Delete.png" action="#{articleBean.deleteAction}">
      <f:setPropertyActionListener target="#{articleBean.articuloPromocionVO}" value="#{sel}"/>
      <f:ajax render=":articleSelectionForm:artDescTable selectedArtTable" execute="@form"/>
    </h:commandButton>
  </h:column>
  <h:column>
    <f:facet name="header">#{msgs.mpromo_article_selection_articles_selected}</f:facet>
    #{sel.articuloNombre} - #{sel.descripcion}
  </h:column>
</h:dataTable>
</div>

Here, articleSelectionForm is the form name artDescTable refers to TableA selectedArtTable refers to TableB.

I have tried many combinations for the <f:ajax> tag, but nothing works out. Example,

<f:ajax render=":articleSelectionForm:artDescTable selectedArtTable" execute="@form" />

<f:ajax render=":articleSelectionForm:artDescTable :articleSelectionForm:selectedArtTable" execute="@form" />

<f:ajax render=":articleSelectionForm:artDescTable :articleSelectionForm:selectedTableId:selectedArtTable" execute="@form" />

Please tell me where I am wrong in understanding.

Answer 1

It must refer the client ID of the component. For starters, the easiest way to figure the proper client ID is to open the page in browser, rightclick and View Source and locate the HTML representation of the JSF component. It'll look like this

<table id="foo:bar:tableId" ...>

You need to take exactly this value and prefix it with : .

<f:ajax render=":foo:bar:tableId" ... />

If it's not prefixed with : , the default NamingContainer separator character, then it will be resolved relative to the current NamingContainer parent. Such components are <h:form> , <h:dataTable> , <ui:repeat> , composite components, etc.