adding row to rich:datatable for a few seconds (notification)

Question

I'm working with richFaces - rich:dataTable. I need to delete some rows and then show a notification for few seconds as new row (after thead) and then it (row with notification) will disappear.

In JSF I can't give unique ID or name to my table, so I don't know how to find it in the DOM. Maybe then I can add some jQuery row code.

Answer 1

As I have stated, you can do something like this:

<h:form id="myForm">
    <h:dataTable id="dtMyData" value="#{bean.lstData}" var="data">
        <!-- column definitions -->
    </h:dataTable>
</h:form>

The HTML rendered would be like

<form id="myForm">
    <table id="myForm:dtMyData">
        <!-- rows auto generated -->
    </table>
</form>

And you can find it in your DOM by using the simplest JS

document.getElementById('myForm:dtMyData')

Also, you can use <rich:dataTable> tag component instead of <h:dataTable> and there would be no problems.

You can "remove" the rows by your own using JavaScript/jQuery or just by removing the items in the list and rerendering the datatable using an <a4j:commandButton render="dtMyData"> (instead of commandbutton you can use <a4j:commandLink>).

To show messages to the user after firing an ajax action, you can use this richfaces code:

<a4j:status onstop="Richfaces.showModalPanel('mdpMessage')" />
<rich:modalPanel id="mdpMessage" resizeable="false" zindex="5000"
        minHeight="30" minWidth="10" height="70" width="150">
        <f:facet name="header">
            <h:outputText value="Operation Results" />
        </f:facet>
        <h:outputText value="Messages" />
        <!-- you can add your h:messages here -->
        <a4j:commandButton value="Close"
            onclick="Richfaces.hideModalPanel('mdpMessage')" />
</rich:modalPanel>