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
Related
Am using JSF and Primefaces .. And i need when i focus on the outlabel the input text gets background color
This is my code :
<p:panelGrid columns="2" layout="grid" style="border:0px none;background:none" styleClass="ui-panelgrid-blank ">
<p:outputLabel value="#{msg.PurchaseReturns_Txt_Document_NO}" />
<p:inputText readonly="true" value="#{quotationMB.instance.object.quotationid}"/>
</p:panelGrid>
<p:panelGrid styleClass="datePick ui-panelgrid-blank " columns="2" layout="grid" style="border:0px none;background:none">
<p:outputLabel value="#{msg.RequestForQuotation_Txt_Date}" />
<p:calendar value="#{quotationMB.instance.object.validto}" locale="de" navigator="true" pattern="yyyy-MMM-dd" showOn="button" />
</p:panelGrid>
*************************JAVA Script*******************************
I have tried this code .. It worked but on the whole input texts that i have in my page :
$('.ui-outputlabel').click(function() {
$(this).find('.ui-inputtext').css('background-color', 'red');
});
There are a few things wrong in your question.
To start off, you cannot focus a p:outputLabel (which is rendered as an HTML label). Clicking the label will focus the linked field. Which brings us to the second issue.
In order for an p:outputLabel to work as specified in the showcase (validation errors, error styling, required indicator, etc.), you need to use the for attribute to link it to the input component (as in regular HTML).
So, if you add for to your labels, you can simply style the input fields using the :focus CSS selector.
Technically you could get your click listener working like this (but that would not make sense):
$("label").click(function(){
document.getElementById(this.htmlFor).style.backgroundColor = "red";
});
It would make more sense to add a focus and blur listener to input fields and use the listeners to toggle a CSS class on the corresponding label. For example:
$("input").focus(function(){
$("label[for=\""+ this.id +"\"]").addClass("focus");
});
$("input").blur(function(){
$("label[for=\""+ this.id +"\"]").removeClass("focus");
});
See also:
Anyway to have a label respond to :focus CSS
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
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>
<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
I have a jsf datatable inside my form like this.
<h:form id="personId">
<h:dataTable id="hdatatable" value="#{Person.personList}"
border="0" cellpadding="10" cellspacing="5"
var="per" styleClass="order-table"
headerClass="order-table-header"
rowClass="order-table-odd-row,order-table-even-row"
syle="width: 950px" >
<h:column id="tcoulm">
<f:facet name="header">Action</f:facet>
<h:commandLink id="editLink" value="Edit" action="#{person.editAction(per)}"/>
<h:commandLink id="cancelLink" value="Undo" action="#{person.undoAction()}"/>
</h:column>
</h:datatable>
</h:form>
In the above table i am trying to access Edit and Undo actions using javascript.So, I assigned them Ids.But when I see Id of those elements in the html source it's like this.Here there mean i guess third row of the table. I am able to see column Id in the source.
personId:hdatatable:3:editLink
If i give only Id to command Link and give 'prependId="false" in form still I am seeing Id of the commdndLink as below
j_id1267631877_14a2c285:editLink
If i use only form Id and commandLink Id
formId:j_id1267631877_14a2c285:editLink
How to exactly access the elements inside the datatatble column?
Just use
var editLink = document.getElementById("personId:hdatatable:3:editLink");
?
If you don't want to access them individually, but you want to access them all, then much easier is to give them a style class
<h:commandLink ... styleClass="editLink" />
so that you can select them by class name instead (assuming jQuery)
var $editLinks = $(".editLink");