i use primefaces 5.2 and i want to add a commandbutton to a tab inside a tabview.
Code to test:
<p:tabView>
<p:tab>
<f:facet name="title">
<h:outputText value="Error Log"/>
<p:commandButton icon="fa fa-refresh" id="fetcherror" update="form:msg errorlogpane" style="margin-left: 12px;"/>
</f:facet>
<p:scrollPanel id="errorlogpane" style="height: 300px">
</p:scrollPanel>
</p:tab>
</p:tabView>
I want a label and at the right a button inside the tab to reload the tab content. The Button does not need any text, just an icon to show the functionality.
But if i deploy the above code the icon is not correct in place as you can see in the following picture
The Resulting html code is:
<li class="ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true">
<a href="#form:j_idt29:j_idt30" tabindex="-1">Error Log<button id="form:j_idt29:fetcherror" name="form:j_idt29:fetcherror" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" style="margin-left: 12px;" type="submit">
<span class="ui-button-icon-left ui-icon ui-c fa fa-refresh"></span>
<span class="ui-button-text ui-c">ui-button</span>
</button>
</a>
</li>
What is the problem with this tab design? How can i fix it? Any suggestion helps :)
Related
I am trying to upload an image in jsf am using primefaces. However am facing challenges or even stack on how to show Image Preview after a user browse the image on a click of a preview button.
Here is my design
And here is my code snippet
public StreamedContent getImage()throws Exception {
//no idea how to get the uploaded file before submit
}
<div class="row" style="margin-top: 4px">
<div class="col-md-2">
<p:outputLabel for="fleet_insure" value="Fleet Insurance" />
</div>
<div class="col-md-3">
<p:fileUpload id="fleet_insure"
mode="simple"
accept=".png,.PNG,.JPEG,.jpeg,.JPG,.jpg"
validatorMessage="Only images accepted"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
value="#{rider.insurance}"
oncomplete="#{rider.onChange(this)}"
auto="false" />
</div>
<div class="col-md-2">
<p:commandButton update="prev" oncomplete="PF('prev').show()" style="background: #6e256a;color:white;" value="Preview Insurance" icon="fa fa-eye">
</p:commandButton>
</div>
</div>
<p:dialog widgetVar="prev" id="prev" header="Document Preview" width="500" height="400" resizable="false">
<p:graphicImage value="#{rider.image}" height="380" width="480" />
</p:dialog>
I am using overlayPanel with a button to hide it but when pressing the button the whole page refreshes .. this is the code
<h:form id="editForm">
<a href="#" class="dropdown-toggle thumbnail" data-toggle="dropdown">
<p:graphicImage value="ImageLoaderServlet?emp=employer&emp_id=#{userBean.current_user.user_id}" cache="false" />
</a>
<ul class="dropdown-menu">
<li><p:commandLink id="editEmp" value="Edit Profile" type="button" /></li>
<li class="divider"></li>
<li><h:commandLink id="logout" action="#{userBean.logout()}" >LogOut</h:commandLink></li>
</ul>
</h:form>
<h:form>
<p:overlayPanel id="editPanel" widgetVar="ovl" showCloseIcon="true" dynamic="true" for="editForm:editEmp" showEffect="blind" hideEffect="explode" style="width:300px;margin-top: 100px">
<p:commandButton value="Close" onclick="ovl.hide();" update="#this"/>
</p:overlayPanel>
</h:form>
I added showCloseIcon="true" but never work .. What should i do to hide overlay without page refresh using button close
thank you
The problem Solved by removing this file jquery-1.11.0.min.js from the page because it caused a conflict with primefaces JavaScript ..
thank you #Kukeltje for your help
I have a weird problem with jsf components (h:inputFile & h:selectBooleanCheckbox).
Both components receive focus, even when my mouse is somewhere else on the page. Here is the code:
<h:form id="logoUpload" enctype="multipart/form-data">
<div>
<h:outputLabel rendered="true">
<h:inputFile id="companyLogo" label="file" value="#{fileHandlerBean.part}" >
<f:validator validatorId="FileUploadValidator" />
</h:inputFile>
</h:outputLabel>
</div>
<div class="clear" />
<h:outputLabel rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" value="#{companyEditController.confirmToU}">
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"
action="#{companyEditController.companyLogoUpload()}"
actionListener="#{fileHandlerBean.uploadCompanyLogo()}"
disabled="#{!companyEditController.confirmToU}"/>
</div>
</h:outputLabel>
</h:form>
If I move the mouse over the h:outputText the checkbox receives focus.
I had the same problem with the h:inputFile tag. I solved it by surrounding it with a h:outputLabel tag, but unfortunately it doesn´t workd with the selectBooleanCheckbox.
Did somebody have the same problem in the past and knows a solution?
This is because everything is wrapped in the h:outputLabel tag. This outputLable is rendered as a plain label html element.
You can see form the W3C specification that anything inside the label will toggle the control
The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control
To fix this, you need to replace the h:output label tag using a h:panelGroup layout="block" which renders a <div>:
<h:panelGroup layout="block" rendered="true">
<div>
<div style="width: 5%">
<h:selectBooleanCheckbox id="acceptToULogo" >
<p:ajax event="change" update="buttonLogo" />
</h:selectBooleanCheckbox>
</div>
<div style="width: 95%">
<h:outputText value="Some Text " />
</div>
<br />
<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"/>
</div>
</h:panelGroup>
I have a primefaces (5.1) datatable with some buttons in the rightermost column:
<p:column headerText="Actions" style="width: 60px">
<p:button id="uploadButton" title="upload files"
icon="fa fa-edit" outcome="uploadFilesToVersion">
<f:param name="versionId" value="#{version.id}" />
</p:button>
<!-- other buttons come here-->
</p:column>
note that "version" is the local (loop) variable of the sourrounding p:dataTable and uploadFilesToVersion.xhtml is a view for the user to upload files to a "version" with id = version.id)
Note that the button doeas not invoke any bean method, I just used the p:button element becaus of its style. Now I want to give the user the possibility to open the outcome of the button (i.e. an URL) in a new brower tab/window. This would be beneficial because I want the dataTable's filter state to be preserved in the meanwhile (its lost when the user clicks "back" in the browser).
How can that be achieved?
EDIT: Of course one could use some CSS to mimick the appearance of a button, but I wanted to avoid that:
<p:column headerText="Actions" style="width: 60px">
<p:link id="uploadButton" title="upload files"
outcome="uploadFilesToVersion"
styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only">
<span class="ui-button-icon-left ui-icon ui-c fa fa-edit"></span>
<span class="ui-button-text ui-c">ui-button</span>
<f:param name="versionId" value="#{version.id}" />
</p:link>
<!-- other buttons come here-->
</p:column>
That's not possible as the <p:button> navigates using JavaScript and not using <a href>. The behavior you're looking for is only possible using <a href>.
Your best bet is to use a <h|p:link>, which generates an <a>, and style it to look like a button.
<h:link ... styleClass="ui-button ui-state-default ui-corner-all">
<i class="fa fa-edit" />
</h:link>
Wrap if necessary in a tagfile to reduce boilerplate.
<my:linkButton ... icon="fa fa-edit" />
I am using to enter address field .by default am setting active-index="-1" so the panel will be closed when the page gets loaded.After the details has been entered by user i want the panel area which means i want the accordion panel to be closed on button(save) click.but i tried a lot using java script but am not able to achieve ,and here is page
<h:body>
<ui:composition template="/WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="quotesForm">
<div class="headerbg">
<div id="innerheaderbg">
<div id="iconarea">
<img src="#{request.contextPath}/images/headerimages/productlist.png" />
</div>
<div id="headertextarea">
<p class="headingtext">New Quote</p>
<p id="breadCrumbtext">Order <img src="#{request.contextPath}/images/error-bullet.gif" />
Quote List <img src="#{request.contextPath}/images/error-bullet.gif" />
New Quote
</p>
</div>
</div>
</div>
<p:growl id="msgs" />
<div class="widget widget-table action-table">
<div class="widget-header" style="text-align:center;padding-top: 52px">
<h3>Create New Quote</h3>
</div>
<div class="widget-content" style="background-color: #DAEDF4;height: 600px;" >
<div id="calender" style="margin-left: 52px;margin-top: -26px">
<table>
<tr>
<td>
<p:outputLabel id="qDate" value="#{quotesBean.qtCreationDate}"></p:outputLabel>
</td>
<td>
<p:calendar id="popup" showOn="button" display="inline" >
<p:ajax event="dateSelect" listener="#{quotesBean.onDateSelect}" update="qDate" />
</p:calendar>
</td>
</tr>
</table>
<p:outputLabel value="Invoice # #{quotesBean.qCount}" style="margin-top:-15px;margin-left:10px;"/>
</div>
<div id="company">
<table align="right" style="margin-right: 52px">
<thead>
<tr>
<th style="text-align: center;padding: 0;"><img src="#{request.contextPath}/images/favicon.ico"/><p:spacer width="5px"/>SolvEdge</th>
</tr>
</thead>
<tr><td style="text-align: center;padding: 0;">Zameen Pallavaram,</td></tr>
<tr><td style="text-align: center;padding: 0;">Chennai,</td></tr>
<tr><td style="text-align: center;padding: 0;">INDIA</td></tr>
</table>
</div>
<h:form id="addForm">
<p:accordionPanel id="accordion" cache="false" activeIndex="-1" style="margin-bottom:20px;width:330px;" widgetVar="acc" >
<p:tab title="Bill To Address:" titleStyle="width:330px;background-color:#DAEDF4" >
<h:panelGrid columns="2">
<h:outputLabel value="Name" />
<h:inputText value="#{quotesBean.name}"/>
<h:outputLabel value="Street" />
<h:inputText value="#{quotesBean.street}"/>
<h:outputLabel value="City" />
<h:inputText value="#{quotesBean.city}"/>
<h:outputLabel value="ZIP" />
<h:inputText value="#{quotesBean.zip}"/>
</h:panelGrid>
<p:commandButton icon="ui-icon-save" value="Save" action="#{quotesBean.saveAddress}" update=":quotesForm:addForm:accordion" ajax="false" onclick="PF('quotesForm:addForm:accordion').hide();"/>
</p:tab>
</p:accordionPanel>
</h:form>
</div>
</div>
<script type="text/javascript">
var link = document.getElementById('quotesForm:popup_input');
link.style.display = 'none';
function closeAccordianPanel()
{
var panel = document.getElementById('quotesForm:addForm:accordion');
link.style.activeIndex = '-1';
/* PF('widget_accordion').unselect(0); */
}
</script>
</h:form>
<br></br>
</ui:define>
</ui:composition>
</h:body>
</html>
Note:Java Script i tried here is nothing worked for me,i would like to close the accordion panel on button click.
I bet you have javascript errors in the console...(PF('quotesForm:addForm:accordion').hide(); is wrong, it should be PF('acc').hide(); IF it works at all (nothing about that in the PrimeFaces docs). And why close a ui component via javascript if you do an 'ajax="false"'. And sending a click event to the tab you want to toggle works, but even better is to use the official client-side api: PF('acc').unselect(...);
Ahhhh... you have additional code below the commandbutton... but there is a wrong widgetVar value... and it is commented out... and the other part does nothing...
Unselect(index of tab) method only hide the p:tab.
If you want to hide your accordionPanel, you can use rendered attribute.
Here is the panel:
<p:panel id="toggleable" header="Toggleable" toggleable="true"
toggleOrientation="horizontal" toggleSpeed="500" closeSpeed="500"
widgetVar="panel" class="left-menu-panel" >
</p:panel>enter code here`
and button or commandLink which collapse panel
<p:commandLink styleClass="open-left-menu-button"
onclick="PF('panel').toggle()">
</p:commandLink>
You can set it with toggleOrientation="horizontal/vertical".
normal panel - not collapsed
collapsed