<script type="text/javascript">
function sellectAll(datatable) {
var checked = $(document).find(":checkbox")["5"].checked; ///Find checkbox header and verify if checkbox is checked
if (checked === true) {
PF(datatable).selectAllRows(); // if true, selectAllRows from datatable
} else {
PF(datatable).unselectAllRows(); //
}
}
</script>
data table
<p:dataTable value="#{itemCardWithoutCostBean.warehousesList}" widgetVar="warehouseList" selection="#{itemCardWithoutCostBean.selectedWarehouses}" rowKey="#{warehouse.warehouseCode}"
rows="10" paginator="true"
styleClass="ui-datatable-hor-scroll" scrollWidth="100%" paginatorPosition="bottom" var="warehouse">
<p:ajax event="toggleSelect" oncomplete="sellectAll(warehouseList)" />
select all is working if there are only one datatable, but if the page have more than one datatable deselect all not work after i deselect datatable which i have checked first
Related
I have a button to display an edit dialog form with a selectOneMenu that holds prefix number values in it and, after selecting one of those prefix values, three selectCheckboxMenu are loaded with employees data. This is workinkg fine.
<p:outputLabel value="prefix" for="prefixo" />
<h:panelGroup>
<p:selectOneMenu id="prefixo" value="#{demandasController.selected.prefixo}" converter="prefixosConverter" filter="true" filterMatchMode="contains">
<f:selectItem itemLabel="#{adeBundle.SelectOneMessage}" itemValue="#{null}" />
<f:selectItems value="#{prefixosController.items}"
var="prefixoItem"
itemValue="#{prefixoItem}"
itemLabel="#{prefixoItem.prefixo} - #{prefixoItem.nomePrefixo}"
/>
<p:ajax event="valueChange" update="uorPosCollection uorPosCollection1 uorPosCollection2" listener="#{demandasController.changePrefixo}"/>
</p:selectOneMenu>
</h:panelGroup>
<p:outputLabel value="Executivo(s)" for="uorPosCollection" />
<p:selectCheckboxMenu id="uorPosCollection" value="#{demandasController.selected.uorPosCollection}" label="Executivo(s)" multiple="true" converter="uorPosConverter" filter="true" filterMatchMode="contains" >
<f:selectItems value="#{demandasController.availableExecutivos}"
var="uorPosCollectionItem"
itemValue="#{uorPosCollectionItem}"
itemLabel="#{uorPosCollectionItem.matricula} - #{uorPosCollectionItem.nome} (#{uorPosCollectionItem.prefixo.prefixo})" />
</p:selectCheckboxMenu>
<!-- analogous code ommited -->
The Listener:
public void changePrefixo(AjaxBehaviorEvent event) {
availableExecutivos = LoadExecutivosListCombo(super.getSelected().getPrefixo());
//analogous methods ommited
}
The methods to load the employees lists:
private List<UorPos> LoadExecutivosListCombo(Prefixos prefixos) {
List<SelectItem> listExecutivosCombo = new ArrayList<>();
List<UorPos> listExecutivos = uorPosFacade.findUorPosExecutivosByPrefixo(prefixos);
for (int i = 0; i < listExecutivos.size(); i++) {
listExecutivosCombo.add(new SelectItem(listExecutivos.get(i)));
}
return listExecutivos;
}
//analagous methods ommited
Native queries to retrieve database:
public List<UorPos> findUorPosExecutivosByPrefixo(Prefixos prefixo) {
return (List<UorPos>) getEntityManager().createNativeQuery("SELECT * FROM UorPos WHERE prefixo=9951", UorPos.class).setParameter(1, prefixo.getPrefixo()).getResultList();
}
//analagous methods ommited
But when editing a register that already has prefix and employee values (saved earlier by some user), the 3 selectCheckboxMenu are loaded showing (undesired) id's entity class name on its labels value and empty dropdowns:
e.g.: in the figure above, when the edit form was loaded, it shows the values saved earlier by some user: the prefix 9882 (displayed as expected) and the three (empty) dropdowns for employees (displayed with the undesired class names in it). If I select a different value than 9882, the dropdowns are (ajax) filled as expected and if I select 9882 again, the employees are displayed as expected (without the class names):
I'm trying to resolve it by activating the ajax as below, but don't know how to call it in the function:
<p:dialog onShow="CallAjaxFunction()" modal="true" >
<script>
function CallAjaxFunction() {
<!-- how to call the ajax here ? -->
alert("displaying after form was loaded.")
}
</script>
...
</p:dialog>
Does anyone knows how to trigger ajax to load nested dropdowns after loading a form?
Or if someone has any other solution to display the values in the labels (without the class name) and automattically load the nested dropdowns, I appreciate that.
Thanks in advance.
After researching, I've used the listener to update the combos, using for this the open ajax event in the dialog:
<p:dialog onShow="PF('prefixowv').selectValue(':selected').click();" update= DemandasEditForm:uorPosCollection DemandasEditForm:uorPosCollection1 DemandasEditForm:uorPosCollection2 />
And changed the ajax event to selectItem, instead of valueChange:
<p:selectOneMenu id="prefixo" value="#{demandasController.selected.prefixo}" converter="prefixosConverter" filter="true" filterMatchMode="contains">
<f:selectItem itemLabel="#{adeBundle.SelectOneMessage}" itemValue="#{null}" />
<f:selectItems value="#{prefixosController.items}"
var="prefixoItem"
itemValue="#{prefixoItem}"
itemLabel="#{prefixoItem.prefixo} - #{prefixoItem.nomePrefixo}"
/>
<p:ajax event="selectItem" update="uorPosCollection uorPosCollection1 uorPosCollection2" listener="#{demandasController.changePrefixo}"/>
</p:selectOneMenu>
Regards,
I try to get the rowindex from the actual selected Column to unselect it with:
public void rowSelect(SelectEvent event) {
MyDataView selected = (MyDataView) event.getObject();
if (!selectedData.remove(selected)) {
selectedData.add(selected);
} else {
RequestContext.getCurrentInstance().execute("PF('datatTable').unselectRow(rowindex);");
}
}
}
I know it is easy to unselect a row with the UnselectEvent and press "crtl" but my Customers want to unselect a row with one click.
<p:dataTable widgetVar="datatTable" id="idDataTable" value="#{bean.dataview}" var="data" scrollable="true" scrollHeight="150"
rowSelectMode="add" selectionMode="multiple"
selection="#{sendGroupSmsSimple.selectedReceivers}" rowKey="#{bean.id}" filteredValue="#{data.filterData}" rowIndexVar="dataRowIndex">
<p:column id="recColumn" headerText="Name" filterBy="#{bean.fullname}" filterFunction="#{data.filterData}">
<h:outputText value="#{bean.fullname}"/>
</p:column>
<p:ajax event="rowSelect" listener="#{sendGroupSmsSimple.rowSelect}" process="#this" update="mainForm:updatePanel"/>
</p:dataTable>
I don't want to update my whole Form because I want the actual state of my scrollbar.
My actual Primefaces Version is 6.0.
Scope of my Bean is GroupedConversationScoped.
Thanks
I have a Highcharts working fine, and Primefaces PanelGrid working fine, but i need refresh or update or recall Higcharts with update event of button.
The code:
<h:panelGrid id="pnlStatus" columns="2" >
<p:editor id="txtStatus" height="400" value="#{Reports.emailTxt}" style="width: 100%" />
<div id="chartEmailReport" style="width: 600px; height: 400px"></div>
</h:panelGrid>
<p:commandButton update="pnlStatus" value="Ver reporte" icon="ui-icon-document"
actionListener="#{Reports.emailStatusReport}"/>
When i press the commandButton the Highcharts just disappear...
I need redisplay Higcharts with any event of commandButton.
Update: The same happens with a plain jsf h:commandButton with an f:ajax inside it but not with out ajax, so it seems ajax related
Iam noob sorry for my English...
instead of
<script src="resources/js/chartEmailReport.js">
Use the Omnifaces onLoadScript tag
I have my javascript inline within the .xhtml file so it looks like this:
<o:onloadScript>
var chart1= new Highcharts.Chart( {
chart: {
renderTo: 'rollupId:rollup'
}
...
series : #{controller.chartData}
} );
</o:onloadScript>
perhaps you can do
<o:onloadScript>
<h:outputScript name="js/chartEmailReport.js" />
</o:onloadScript>
Then when you click a commandButton to update your JSF components, the onloadScript will also trigger an update on your javascript
I am using JSF and Primefaces to develop a JavaEE application. Each time I press a button(Authenticate), a BUTTON (Button) and a message(Message) must be shown.
The problem is that the message is shown, but not the button. What could I do to show the button?
Here is my code:
ManagedBean IdCertificateManagedBean.java
String m_strRoute;
String m_strMessageRegister;
boolean m_bRegistrationCorrect;
//Getters and Setters
//Constructor
public IdCertificateManagedBean()
{
m_strMessageRegister = "";
m_strRoute = "";
m_bRegistrationCorrect = false;
}
public void authenticateUser()
{
try
{
int a=5;
if (a ==5)
{
m_strMessageRegister = "hello";
m_bRegistrationCorrect = true;
m_strRoute = "/admin/menuadmin";
}
else
{
m_strMessageRegister = "ERROR";
}
}
catch ( Exception e)
{
m_strMessageRegister = "Error";
}
}
}
Facelet
<p:commandButton value="Authenticate">
<p:ajax listener="#{IdCertificateManagedBean.authenticateUser()}" update="Message, Button" />
</p:commandButton>
<h:outputText id="Message" value="#{IdCertificateManagedBean.MessageRegister}" />
<p:commandButton id="Button" value="Go" action="#{IdCertificateManagedBean.route}" rendered=" {IdCertificateManagedBean.registrationCorrect}" />
You must wrap your <h:commandButton /> inside a container as <h:panelGroup /> and then refresh the container.
The problem is that on first page load your button is not rendered so it is not inserted inside the DOM of the page. On page refresh you're trying to refresh it but you can't do it because the button isn't on the page.
A solution could be this
<h:panelGroup layout="block" id="buttonDiv">
<h:commandButton ... />
</h:panelGroup>
and then in your ajax you have to refresh buttonDiv
I have used column picklist to customize columns of table on page and I want to show dialog message (Atleast one column should be enabled) if user disables all the columns from picklist. That means user should keep atleast one column in enable box.
<p:dialog id="pickListDialog" header="Customize View"
widgetVar="dlg">
<h:panelGrid>
<p:pickList id="columnPickList"
value="#{Class_Name.columns}" var="col"
itemLabel="#{Class_Name.columnPickList.columnsDisplayMap.get(col)}"
itemValue="#{col}">
<f:facet name="sourceCaption">Disabled</f:facet>
<f:facet name="targetCaption">Enabled</f:facet>
</p:pickList>
<p:commandButton value="Submit"
actionListener="#{Class_Name.columnPickList.saveColumns}" onclick="return disableClick();"
ajax="false" />
</h:panelGrid>
</p:dialog>
Javascript method -
function disableClick(){
if (document.getElementById("form:columnPickList_target").value == ""){
alert("Please Select Atleast One Field");
return false;
}
}
Here I have used Javascript for this. But I want to do this by JSF .
can anyone please tell me ?
Case 1 : Using required attribute
<p:pickList id="columnPickList" required="true" requiredMessage="Atleast one column should be enabled"
value="#{Class_Name.columns}" var="col"
itemLabel="#{Class_Name.columnPickList.columnsDisplayMap.get(col)}"
itemValue="#{col}">
<f:facet name="sourceCaption">Disabled</f:facet>
<f:facet name="targetCaption">Enabled</f:facet>
</p:pickList>
Case 2 : Opening dialog from backing bean
public void saveColumns()
{
validateColumns();
//doSomthing
}
public void validateColumns() {
//check if picklist target is empty
if(columns.getTarget().size()==0)
{
//open dialog
message="Atleast one column should be enabled";
RequestContext.getCurrentInstance().execute("validationDialog.show()");
}
}
private String message; //getter and setter
dialog :
<p:dialog id="valid" widgetVar="validationDialog">
<p:outputLabel value="#{yourbean.message}" />
</dialog>