Develop Reference

PrimeFaces p:focus on p:dataTable Element

I am currently trying to setup an editable data table that uses ajax to maintain focus when a user edits a cell using either JavaScript or a backing bean, because when a cell edit occurs data in other parts of the table will need to be updated, thus the table should be redrawn, unfocusing the focused element. Currently I'm trying to do this using a p:focus, using a CellEditEvent listener to get the component id. Unfortunately, assigning to the variable for the focused component id is not changing which element is focused on the page.
Here is the relevant HTML:
<h:form id="addForm">
<p:focus id="focusID" for="#{beanView.focus}" />
<h:panelGroup id="entrypg">
<p:commandButton id="updateButton" widgetVar="updateButton" update="addForm:myDT" />
<p:dataTable id="myDT" widgetVar="myDT" var="iter" value="#{beanView.valList}"
editable="true" editMode="cell">
<p:ajax event="cellEdit" listener="#{beanView.onCellEdit}" oncomplete="$('#addForm\\\:updateButton').click();"/>
<p:column headerText="X">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{iter.x}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{iter.x}" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:panelGroup>
</h:form>
And the cell edit handler in the view:
public void onCellEdit(CellEditEvent edit) {
if(edit.getNewValue() != null) {
focus = edit.getColumn().getChildren().get(0).getClientId();
}
}
I am also open to better ways one could do this, as I'm unsureif p:focus is designed for this purpose.
Thanks!

Ok I've gotten it to work using widgets:
function forceFocus(index) {
var widget = PF('myDT');
widget.showCellEditor($('[role="gridcell"].ui-editable-column:eq(' + index + ')'));
}
The showCellEditor does pretty much exactly what I need, it highlights a cell and focuses it allowing immediate editing. It also seems to preserve focus between ajax calls.
More logic would be needed if you wanted to do this to a table with more than 1 editable column.
Edit: Ok it seems like its not storing the focus between table redraws, but it should be doable to grab the focus before the table is redrawn and restore it after its redrawn with the above function

Display a chronometer, setInterval, in a primefaces datatable

I just started on a Primefaces program. I want to display chronometer in a Datatable. I want to use setInterval for displaying a "real time chronometer". I got a Date object in the attribute synopticBean.enteredTime which I use for start counting.
But I don't know how to call a JavaScript function for displaying the chronometer.
<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
<p:column headerText="Family">
<h:outputText value="#{synopticBean.family}" />
</p:column>
<p:column headerText="id">
<h:outputText value="#{synopticBean.brNumber}" />
</p:column>
<p:column headerText="Target Time">
<h:outputText value="#{synopticBean.referenceTime}" />
</p:column>
<p:column headerText="Δ">
<h:outputText value="setInterval(function(){ alert("Hello"); }, 3000);" />
</p:column>
<p:column headerText="Elapsed Time">
<h:outputText value="#{synopticBean.enteredTime}" />
</p:column>
</p:dataTable>
The result I want it's a datatable where the two last columns display realtime chronometer that decrease and increase :
My datas are available with a java bean. The "Elapsed Time" column get a java Date like "Mon Jan 21 15:26:40 CET 2019". I don't know how to display a real time chronometer in each cell for the column. How can I set my java date to a setInterval method and display the "result" in a cell that I don't know the html's id?

To convert your above code into a working example you would do something like this,
<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
<p:column headerText="Famille">
<h:outputText value="#{synopticBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticBean.brNumber}" />
</p:column>
<p:column headerText="Temps cible">
<h:outputText value="#{synopticBean.referenceTime}" />
</p:column>
<p:column headerText="Δ">
<script type="text/javascript">
//<![CDATA[
setInterval(function(){ console.log("Hello"); }, 3000);
//]]>
</script>
<!-- You can add any HTML code needed to display the chronometer here -->
</p:column>
<p:column headerText="Temps Accumulé">
<h:outputText value="#{synopticBean.enteredTime}" />
</p:column>
</p:dataTable>
As stated in the comments you don't use h:outputText value for this - that's intended for fetching a backing bean value.
Also note that this will call setInterval for each and every cell in the Δ column - which I guess is what you want. Just replace the console.log call with the call for updating your chronometer and it should work.
As as side note - it might be prefered to update all chronometers with just one setInterval call instead of having one for every cell in the Δ column. In the end it depends on what you want to accomplish here.

The solution by #Kukeltje, I used the Primefaces extension, but I don't know how to start my counter by a value. I can have a date object or a millisecond as long type but I don't know how to use one of these two values can be the start value of my counter.
I add the following include to my JSF page :
xmlns:pe="http://primefaces.org/ui/extensions"
and to my pom.xml file :
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>6.0.0</version>
</dependency>
So the table :
<p:dataTable var="synopticBean" value="#{synopticLocationBean.synopticBeans}">
<p:column headerText="Family">
<h:outputText value="#{synopticBean.family}" />
</p:column>
<p:column headerText="BT">
<h:outputText value="#{synopticBean.brNumber}" />
</p:column>
<p:column headerText="Target time">
<h:outputText value="#{synopticBean.referenceTime}" />
</p:column>
<p:column headerText="Δ">
<pe:timer
style="color:grey;"
forward="true"
format="HH:mm:ss"/>
</p:column>
<p:column headerText="Elapsed time">
<h:outputText value="#{synopticBean.enteredTime}" />
</p:column>
</p:dataTable>

Call js from within h:dataTable

I'm trying to use the count up feature of a script found here inside of a <h:dataTable>
Using JSF, I have an <h:dataTable> which displays timestamps from a database (this works). For each column, I want to display the timestamp and the time passed since that timestamp (using the script). I have the library loaded correctly but the counting is never displayed. I'm trying to use jquery as suggested.
<h:dataTable value="#{bean.list}" var="_item">
<h:column>
<f:facet name="header">
<h:outputText value="Column 1"/>
</f:facet>
<h:outputText value="_item.alertTime"/>
<div id="timethis">
</div>
<rich:jQuery name="timerstuff"
selector="#timethis"
query="$(#localform\\:timethis).countdown({since: _item.alertTime});">
</rich:jQuery>
</h:column>
</h:dataTable>

JSF Check all checkboxes

<h:dataTable id="merchantDataTable"
value="#{merchantManagementBean.merchants}" first="0"
rows="#{merchantManagementBean.rowsPerPage}" var="merchant"
styleClass="dataTable"
columnClasses="users-colMerchant, users-colMerchantDescr, nostyle"
rowClasses="oddRow, evenRow">
<h:column>
<f:facet name="header">
<h:panelGrid columns="1">
<h:selectBooleanCheckbox />
</h:panelGrid>
</f:facet>
<h:selectBooleanCheckbox value="#{merchant.selected}"/>
</h:column>
</h:datatable>
Yea so I have this code part and I need to make the main checkbox to make them all checked I can use Probably only Javascript based solution since communication with bean is going to server side.

Please have a look at the following posts:
How to create effective "select all" checkbox in JSF
how to create selectAll checkbox in JSF-2
Or you can approach this problem witj jQuery to select all checkboxes:
http://www.sanwebe.com/2014/01/how-to-select-all-deselect-checkboxes-jquery

How to combine JSF togglePanel to trigger visibility of some other div/element/?

I was looking through a number of websites, but i couldn't find out how to use a toggle panel to change the visibility of another element. Please see the example..
<rich:togglePanel switchType="client"
stateOrder="panelOneOff, panelOneOn">
<f:facet name="panelOneOff">
<rich:toggleControl>
<h:outputText value="Start"/>
</rich:toggleControl>
</f:facet>
<f:facet name="panelOneOn">
<rich:toggleControl switchToState="panelOneOff">
<h:outputText value="Close"/>
</rich:toggleControl>
</f:facet>
</rich:togglePanel>
<rich:effect name="hideDiv" for="toggleAccordingToTheTogglePanel" type="Fade" />
<rich:effect name="showDiv" for="toggleAccordingToTheTogglePanel" type="Appear" />
<div id="toggleAccordingToTheTogglePanel">
please show me on start and hide me on Close
</div>
What listeners will work to call the hideDiv() or showDiv() javascript functions so the DIV-Element at the end will appear or fade out?
update It be run on jboss 5.1 using richfaces 3.3.2

<rich:toggleControl onclick="hideDiv()">