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

Primefaces Mobile - DataTable - select row, before event taphold occurs

I have a problem in PrimeFaces Mobile with the DataTable and the event taphold.
problem:
If I use the event taphold in a datatable, the event occurs, before the row can be selected.
the desired behaviour:
the click or finger touch selects the row (visually through a different background color for the row too). The event taphold occurs, if I press long enough, additionally.
first ideas, to solve the problem
I think, the problem is, that for row selection the .mouseup()-event is responsible and not the mousedown()-event for example. So, I have to change the event, to select the row, before the taphold-event occurs. But I don't know how.
current source code:
<p:dataTable id="music_songs" var="music" value="#{musicPlayerBean.musicSongs}" selectionMode="single"
selection="#{musicPlayerBean.selectedMusicSong}" rowKey="#{music.id}" style="background: white;"
paginator="true" rows="25" tableStyleClass="ui-table-columntoggle" emptyMessage="keine Musik-Songs vorhanden">
<p:ajax event="taphold" oncomplete="alert('Hallo');"/>
<p:column headerText="Interpret" priority="1" sortBy="#{music.interpret}">
<h:outputText value="#{music.interpret}"/>
</p:column>
<p:column headerText="Titel" priority="1" sortBy="#{music.title}">
<h:outputText value="#{music.title}" />
</p:column>
<p:column headerText="Dauer" priority="2" sortBy="#{music.duration}">
<h:outputText value="#{music.durationAsString}"/>
</p:column>
<p:column headerText="Album" priority="2" sortBy="#{music.album}">
<h:outputText value="#{music.album}"/>
</p:column>
</p:dataTable>
Examples for mobile data tables on PrimeFaces-Website
Versions:
JSF 2.2
Java 1.7
Glassfish 4
PrimeFaces 5.2

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>

Dynamically change h:dataTable value in JSF

How can i dynamically change the value of a h:dataTable? I have the following code (just a snippet):
<h:dataTable value="#{DataProvider.mapValues}" var="o" border="1">
<h:column>
<h:outputText value="#{o.key}"></h:outputText>
</h:column>
<h:column>
<h:outputText value="#{o.value}"></h:outputText>
</h:column>
</h:dataTable>
<h:selectOneMenu>
<f:selectItem itemLabel="Choose Language.."></f:selectItem>
<f:selectItem itemLabel="DE"></f:selectItem>
<f:selectItem itemLabel="CZ"></f:selectItem>
<f:selectItem itemLabel="EN"></f:selectItem>
<f:selectItem itemLabel="FR"></f:selectItem>
<f:selectItem itemLabel="ES"></f:selectItem>
<f:selectItem itemLabel="PT"></f:selectItem>
</h:selectOneMenu>
So, basically, when I choose a language from the SelectOneMenu, the dataTable should use different values (like "#{DataProvider.mapValues(en)"). To be clear: everytime I select a value from the Combobox, the dataTable should reload with an other value.
I guess this would work with JavaScript, but I don't know how exactly it has to be done.
Any help would be appreciated. Thanks!
EDIT: I have to use JSF1.2, so I can't use any built-in AJAX features.

Make DataProvider.getMapValues something like this:
private String selectedLanguage; // + getter and setter
private Map getMapForLanguage(String language)
{ ... }
public Map getMapValues(){
return getMapForLanguage(selectedLanguage);
}
bind the selectedLanguage to your h:selectOneMenu selected value and do an ajax update of h:dataTable upon selection like this:
<h:dataTable id="myTable" ... >
...
<h:selectOneMenu value="#{DataProvider.selectedLanguage}">
...
<f:ajax render="myTable"/>
</h:selectOneMenu>

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()">