I have a very strange behavior only when using Google Chrome.
When I open my website (i am using primefaces) at the first time I am unable set focus on cursor.
The “workaround” will be to open another tab and suddenly I get the control back on the cursor.
Any I idea why this happen and how can I resolve it ?
(only with Chrome).
Thanks
<ui:define name="content">
<p:layout fullPage="true" >
<p:layoutUnit position="north" size="50" resizable="false" closable="false" collapsible="false">
<h:form>
<ui:include src="menu_header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<h:form id="mainForm" prependId="false">
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="30" resizable="false" closable="false" collapsible="false" style="overflow:hidden">
<div id="footer" class="ui-widget ui-widget-header ui-corner-all">
<h:outputText value="#{navMenuBean.footer}" styleClass="defualtTextSize"/>
</div>
</p:layoutUnit>
</p:layout>
</ui:define>
Related
I have a Layout consisting of a north LayoutUnit containing a banner, a west LayoutUnit containing a vertical menu, and a central Layoutunit containing the main page content.
When I open a page with the browser minimised (e.g. browser width is half of the pc screen width) then it displays as much as it can in the view. However, if I then maximise the browser, it doesn't expand the content in the central LayoutUnit (see attached picture).
The code for the Layout is as follows:
<h:body>
<p:layout style="margin: 0px; gutter: 0px !important!" fullPage="false" >
<p:layoutUnit position="north" size="80" resizable="false" closable="false" collapsible="true" gutter="0" >
<div style="background-image: url('../resources/images/veges.jpg'); height: 80px; "> </div>
</p:layoutUnit>
<p:layoutUnit position="west" size="210" resizable="false" closable="false" collapsible="false" gutter="0">
<h:form id="menuForm">
<p:menu style="width:180px">
<p:menuitem value="Home" outcome="WelcomeMember" icon="fa fa-home" />
</p:menu>
<p:menu style="width:180px" toggleable="true">
<ui:include src="menu.xhtml" />
</p:menu>
<p:menu style="width:180px">
<p:menuitem value="Sign Out" action="#{loginBean.doLogout()}" icon="fa fa-sign-out" />
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" collapsible="false" resizable="true" gutter="0" >
<ui:insert name="pageContent" >
This is the default page content
</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
Does anyone know why this is happening and what I need to do to correct it?
I would like to hide an element while a button triggered action is being performed:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI block="input" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="growl,input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panelGrid>
</h:form>
I tried with p:blockUI / pe:blockUI and with/without the onstart and oncomplete attributes.
What am I doig wrong ? I use blockUI somewhere else, and it is working fine:
The only difference is that the table is its own trigger.
I followed this tutorial.
Block the input seems to not work, you can wrap the input with a panel and block it.
PrimeFaces Extensions:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI target="panel" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
PrimeFaces:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<p:blockUI block="panel" trigger="command">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</p:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
i m working on a project. project main page has a layout with 2 layoutunits and each layoutunit have forms. when i run project page is loading correctly but one of layoutunit collapsible property does not work. when i click on it layoutunit is closing then opening again.
i m using primefaces 5.3 and i m not a elit user.
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit style=" font-size: 14px!important" position="west" collapsible="true" header="#{kullanici.adsoyadkullanici}" >
<h:form id="anamenu">
<p:panelMenu style="width: 250px; height: 600px!important">
<p:submenu label="Genel" icon="fa fa-cog">
<p:menuitem value="Ana Gösterge Tablosu 1" actionListener="#{turnPage.changePage(101)}" update="mainform:panel1" />
<p:menuitem value="Ana Gösterge Tablosu 2" actionListener="#{turnPage.changePage(102)}" update="mainform:panel1" />
</p:submenu>
<p:submenu label="Demografik Göstergeler" icon="fa fa-area-chart">
<p:menuitem value="Nüfus Piramidi" actionListener="#{turnPage.changePage(201)}" update="mainform:panel1" />
<p:menuitem value="Genel Demografik Göstergeler" actionListener="#{turnPage.changePage(202)}" update="mainform:panel1"/>
<p:menuitem value="Kırsal ve Kentsel Nüfus" actionListener="#{turnPage.changePage(203)}" update="mainform:panel1"/>
<p:menuitem value="0-14 Yaş Nüfus Oranları" actionListener="#{turnPage.changePage(204)}" update="mainform:panel1"/>
<p:menuitem value="65 Yaş Üstü Nüfus Oranları" actionListener="#{turnPage.changePage(205)}" update="mainform:panel1" />
<p:menuitem value="Toplam Yaş Bağımlılık Oranları" actionListener="#{turnPage.changePage(206)}" update="mainform:panel1" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutcenter" style="font-size: 14px" position="center" collapsible="true" >
<h:form id="mainform">
<p:outputPanel id="panel1">
<ui:include src="#{turnPage.pathpage}" />
</p:outputPanel>
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
I have a datagrid and its element is a panel and some components including a commandbutton, i load the data from the bean but the actionlistning of the commandbutton is not firing even in eclipse debug mode it does not reach the method.
<p:layout fullPage="true">
<p:layoutUnit header="Islands" position="west" closable="false" collapsed="false" collapsible="true" size="180">
<h:form>
<p:toolbar>
<f:facet name="left"><p:commandButton value="New island" icon="ui-icon-disk"></p:commandButton></f:facet>
</p:toolbar>
<p:dataGrid columns="1" value="#{empcreator.islands}" var="island">
<p:panel header="#{island.name}" style="text-align:center">
<p:toolbar>
<f:facet name="left">
<p:commandButton icon="ui-icon-disk"></p:commandButton>
<p:commandButton icon="ui-icon-trash"></p:commandButton>
</f:facet>
<f:facet name="right">
<p:commandButton value="Load" actionListener="#{empcreator.loadIsland}"></p:commandButton>
</f:facet>
</p:toolbar>
<p:panelGrid columns="2">
<p:outputLabel value="ID"></p:outputLabel>
<p:outputLabel value="#{island.id}"></p:outputLabel>
<p:outputLabel value="X"></p:outputLabel>
<p:outputLabel value="#{island.x}"></p:outputLabel>
<p:outputLabel value="Y"></p:outputLabel>
<p:outputLabel value="#{island.y}"></p:outputLabel>
<p:outputLabel value="Model"></p:outputLabel>
<p:outputLabel value="#{island.model}"></p:outputLabel>
</p:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" collapsed="false" collapsible="false" id="mainl" >
<div id="cmain" style="padding:0px" onresize="onWindowResize"></div>
</p:layoutUnit>
</p:layout>
is the problem related to the form ?
It should be nested from p:column, it worked fine
When the below dialog is opened and the user hits enter it closes. I'm assuming that I need to somehow add some attribute to the below commandButton to not allow it to submit when the user hits enter. Any idea?
<p:dialog header="#{bundle['dreamSearch.HEADER']}"
widgetVar="webSearchDlg" modal="true" styleClass="dialog dialog2"
draggable="false" resizable="false" showEffect="fade"
hideEffect="fade">
<h:form id="dreamWebSearchFrm">
<div class="dialog-top-reg"></div>
<div class="dialog-middle-reg">
<div><p:commandButton styleClass="close zoom3" onclick="webSearchDlg.hide()" /></div>
<div class="dialog-content dialog-content2">
<h1 class="dream-search">
<h:outputText value="#{bundle['dreamSearch.HEADER']}" />
</h1>
<p class="dream-search">
<h:outputText value="#{bundle['dreamSearch.SUBHEADER']}" />
</p>
<p:panel id="searchTextPnl">
<div class="dream-search-wrap">
<fieldset>
<p:inputText id="searchText" value="#{dreamSearchBean.searchText}"/>
<p:commandButton tabindex="-1" styleClass="form-btn1" value="#{bundle['dreamSearch.search.button.TEXT']}"
actionListener="#{dreamSearch.search}" update=":dreamWebSearchFrm:resultsPnl"/>
</fieldset>
</div>
</p:panel>
<p:panel id="resultsPnl">
<div class="data-grid-wrap">
<h:outputFormat escape="false" value="#{bundle['dreamSearch.imageResults.TEXT']}" rendered="#{dreamSearchBean.shouldRender}">
<f:param value="#{dreamSearchBean.searchText}" />
</h:outputFormat>
<p:dataGrid var="dream" value="#{dreamSearchBean.dreams}" rendered="#{dreamSearchBean.shouldRender}" columns="5"
rows="10" paginator="true" effect="true"
styleClass="ui-header-visibility"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="10,15,20" paginatorPosition="bottom">
<p:column>
<h:panelGrid columns="1" style="width:100%">
<p:commandLink onclick="webSearchDlg.hide();dreamEditDlg.show();" update=":dreamEditFrm:display">
<f:setPropertyActionListener value="#{dream}" target="#{dreamModifyBean.selectedDream}"/>
<f:setPropertyActionListener value="false" target="#{dreamModifyBean.editLink}"/>
<p:graphicImage value="#{dream.imageThumb}" width="100" height="100" />
</p:commandLink>
</h:panelGrid>
</p:column>
</p:dataGrid>
</div>
</p:panel>
</div>
</div>
<div class="dialog-bottom-reg"></div>
</h:form>
</p:dialog>
You could do it with Javascript. A similiar question with a variety of answers has been asked some time ago.
Primefaces has it's own (or some adapted JQuery / YUI) javascript bundled. Don't know how it interacts with self-made js. Give it a try!
In order to solve this, I had to ensure that the close button was the very last button within the form.