dynamically load jsf datatable after selecting button in jquery

Question

I have a datatable with item list. For some items, I will have a jquery dialog prompt with buttons. Selecting a button say 'yes' will do AJAX call and should delete the item from list in bean (which is working fine) and reload datatable list (this update is not happening). below is my code snippets .. I am using JSF 2.0

  <h:dataTable binding="#{itemBean.dataTable}" value="#{itemBean.items}" 
    var="item" columnClasses="left,right" rowClasses="row1,row2" rows="4" >
        <h:column>
            <h:outputText styleClass="label" value="#{item.product.itemNo}"/>
        </h:column>
 </h:dataTable>

// ItemBean class - @Session scoped
private HtmlDataTable dataTable; 
private LinkedList<Item> items;

deleteRow(){ } method in bean is deleting item from the items list. 

 on button click in dialog prompt, .post ajax call is made as below.
    $.post('/WebApp/PromptAjaxServlet', {data:requestData}, function(response) {
                    if(validateResponse(response)){
                        $('#dialog-form').dialog('destroy');
                        $modalMessage.dialog('destroy');
                    } else {
                        // do
                    }
            });

can someone please help with an idea on how to update datatable list after ajax call ..

Answer 1

Your dataTable needs to be rendered in the ajax response.

Without more details on how your jquery button is generating the ajax call, and since your using component binding for dataTable, I'd suggest adding code to your bean.delete().

FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add(dataTable.getClientId()); should do the trick

Answer 2

This isn't going to work without homegrowing a custom viewhandler and that's not exactly trivial (read: a lot of work). When you want an extra layer of UI/ajax fanciness in JSF, then you should really take a look at existing JSF component libraries like PrimeFaces, RichFaces and OpenFaces. For your specific case PrimeFaces has for example a <p:dialog> component.

Or if you really insist to homebrew UI/ajax fanciness with help of jQuery, then you should really look for an action based MVC framework like Spring MVC instead of a component based MVC framework like JSF.

See also:

• Which Java web framework to choose for jQuery?
• What is the need of JSF when UI can be achieved using jQuery?

---

By the way, to achieve your functional requirement with "plain vanilla" JSF you can also just grab the JavaScript's confirm() function.

<h:column>
    <h:commandButton value="Delete" action="#{bean.delete}"
        onclick="return confirm('Are you sure?')" />
</h:column>