My problem is that h:selectManyCheckbo loses values when navigating , here's my code below :
<h:selectManyCheckbox id="selectGroupsBox"
value="{userCreationWizardBean.selectedGroupsId}"
layout="pageDirection">
<f:selectItems var="Group"
value="#{userCreationWizardBean.terminalsGroups}"
itemLabel="#{terminalsGroup.groupName}"
itemValue="#{terminalsGroup.id}"
itemDisabled="#{Group.defaultGroup}">
</f:selectItems>
<p:ajax event="change" update=":form-top-wizard:numBase" process="selectGroupsBox"
listener="#{userCreationWizardBean.selectedGroupListner}"></p:ajax>
</h:selectManyCheckbox>
The CheckBox loses values if I go back and forth using my navigation pad :
<div id="top-wizard" class="#{class}">
<ul>
<li class="premier#{wizard_step=='0'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(0)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
<li class="deuxieme#{wizard_step=='1'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(1)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
<li class="troisieme#{wizard_step=='2'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(2)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
<li class="quatrieme#{wizard_step=='3'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(3)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
</ul>
</div>
The problem stragely vanishes when I delete the itemDisabled attribute.
it seems like i can use jquery css selector syntaxe to exclude the checkbox from being processed , but only in primefaces 3.3 , but i'm using 3.2.
I believe the issue you are experiencing has to do with the fact that a disabled component or item's value is not sent to the server.. I Have also been trying to find a workaround. check out this post it might be helpful.
Related
i need to make all component editable when i clicked on h:commandLink
This my code
<p:dataTable styleClass="borderless" id="projectsTable" var="o" value="#{order.orderList}">
<p:column>
<div class="tasks">
<div class="task-item task-success">
<h:form>
<div class="task-text">
<div class="form-group">
<h:outputLabel for="projectName" value="Project Name:" />
<p:inplace effectSpeed="fast" editor="true">
<p:inputText styleClass="form-control" value="#{o.productName}" required="true" label="text" />
</p:inplace>
</div>
<div class="form-group">
<h:outputLabel for="projectURL" value="Project URL:" />
<p:inplace effectSpeed="fast" editor="true">
<p:inputText styleClass="form-control" value="#{o.price}" required="true" label="text" />
</p:inplace>
</div>
</div>
<div class="task-footer">
<div class="pull-left">
<h:commandLink >
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> EDIT
</h:commandLink>
</div>
<div class="pull-right">
<h:commandLink action="#{order.deleteAction(o)}" >
<span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Delete
</h:commandLink>
</div>
</div>
</h:form>
</div>
</div>
that's link i need to click on it and open all h:inputText
<h:commandLink action="#{order.update(o)}">
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true">
</span> EDIT
</h:commandLink>
Such as linkedIn in editProfile page when click on button appear all editable components
Examples:
Befor click button
After clicked button
First of all, every PrimeFaces component has a javascript representation which is acessible through the widgetVar.
The Inplace's widget has a method called show() that you can use to show the input field for it. Check this code out:
<p:inplace ... widgetVar="myinplace">
<p:inputText ... />
</p:inplace>
<!-- this button's click will show the input -->
<button onclick="myinplace.show()">Click Me</button>
I suggest you to set the widgetVar attribute for the inplace components and call the show method on each one of them inside a function that you can use everywhere you want:
<script>
function showInplaces() {
myinplace1.show();
myinplace2.show();
...
}
Cheers
During my lunchbreak I was curious, so I did have a quick look.
I looked at the generated source in the showcase of the first item:
<span id="j_idt88:basic" class="ui-inplace ui-hidden-container" data-widget="widget_j_idt88_basic">
<span id="j_idt88:basic_display" class="ui-inplace-display" style="display:inline">Edit Me</span>
<span id="j_idt88:basic_content" class="ui-inplace-content" style="display:none">
<input id="j_idt88:j_idt91" name="j_idt88:j_idt91" value="Edit Me" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" type="text" />
</span>
</span>
I noticed the class='ui-inplace-display' class which is on each 'component. The following jquery code selects all inplace components that can be clicked:
$('.ui-inplace-display')
I tried this in the FireFox developer console resulting in the following output:
Object { length: 5, prevObject: Object, context: HTMLDocument → inplace.xhtml, selector: ".ui-inplace-display", 5 more… }
I know you can enable the editing by clicking on an item and so I had to find a way to click on each one. Fortunately, you can give each of them a click by just appending .click() to the selector. It will be applied to each of the components:
$('.ui-inplace-display').click()
And like mentioned, you do not need any jsf button for this, just a plain html one to execute the javascript in an onlclick:
<input onclick="$('.ui-inplace-display').click()" value="Click to edit" type="button">
works perfectly.
As you can see, it pays to learn the basics of webdevelopment before diving into using more complex frameworks since no framework ever solves all of your problems and from time to time (more often then you think), you do need a little low-level javascript
I have a template in which I can add a CSS error class to a div when the validation of a component has failed and it renders a pretty nice effect on the browser.
Now, I don't need to add a css class to a component (this won't help me), but rather I need to change the css of the html that surrounds it, this is pretty simple with jQuery, however I can't seem to find a javascript callback for failed validation, is this possible? I'm also using primefaces (in case they provide such capabilities).
Markup:
<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
<label class="control-label">Input value:</label>
<div class="controls">
<h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
</div>
</div>
if the input text is empty, I need the div that wraps the "control group" to have an extra class. I can turn it into a <h:panelGroup> so it is a JSF component but still I wouldn't know how to do it. Javascript seems easier as I can do a:
jQuery("#ID_OF_DIV").addClass("error_class")
Just let JSF/EL conditionally print the class based on FacesContext#isValidationFailed().
<div class="control-group #{facesContext.validationFailed ? 'error_class' : ''}">
You only need to ensure that this element is covered by ajax update/render.
Another way would be hooking on the oncomplete event of an arbitrary PrimeFaces ajax based component. There's an args object available in the scope which in turn has a validationFailed property. E.g. <p:commandButton oncomplete> or even <p:ajaxStatus oncomplete>.
<p:ajaxStatus ... oncomplete="if (args && args.validationFailed) $('#ID_OF_DIV').addClass('error_class')">
If you want to do everything on the client side.
<h:outputText class="samplecls" rendered="#{facesContext.validationFailed}"
value="Please enter all the required fields">
</h:outputText>
<div class="control-group ERROR_CLASS_GOES_HERE_IF_VALIDATION_FAILED">
<label class="control-label">Input value:</label>
<div class="controls">
<h:inputText class=" inputbox" type="text" required="true" /> <!--Component that can fail -->
</div>
</div>
Javascript/Jquery
This class will exist in DOM only validation fails by rendered="#{facesContext.validationFailed}"
$(window).load(function(){
if($('.samplecls').length>0){
$("#ID_OF_DIV").addClass("error_class");
}
});
I have a delete confirmation dialog:
<p:confirmDialog id="deleteConfirmDialog"
header="#{i18n['confirm-deletion']}"
widgetVar="pnp_delete_confirmDialog" closeable="false"
appendToBody="true">
<f:facet name="message">
<h:outputFormat id="deleteConfirmMessage"
value="#{i18n['confirm-subscription-deletion']}">
<f:param value="#{subscriptions.deleteSelected.title}" />
</h:outputFormat>
</f:facet>
<h:form id="pnpConfirmDeleteForm">
<p:commandButton id="deleteActionConfirmed"
action="#{subscriptions.delete}" value="#{i18n['delete']}"
type="button" process="#this" update=":pnpEditForm :pnpExistingForm"
oncomplete="pnp_delete_confirmDialog.hide()" />
<p:commandLink id="deleteActionConfirmedLink"
action="#{subscriptions.delete}" process="#this"
update=":pnpEditForm :pnpExistingForm"
oncomplete="pnp_delete_confirmDialog.hide()">#{i18n['delete']}</p:commandLink>
<p:commandButton id="deleteActionCancelled" value="#{i18n['cancel']}"
type="button" onclick="pnp_delete_confirmDialog.hide()" />
</h:form>
</p:confirmDialog>
You will notice that the deleteActionConfirmed button and the deleteActionConfirmedLink link have the exact same action, process, update, and oncomplete attributes. However, the link works as expected and the button does nothing. Looking at the generated markup:
<form enctype="application/x-www-form-urlencoded"
action="/primefaces-quickstart/xhtml/pnp-configuration.xhtml" method="post"
name="pnpConfirmDeleteForm" id="pnpConfirmDeleteForm">
<input type="hidden" value="pnpConfirmDeleteForm" name="pnpConfirmDeleteForm">
<button type="button"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
name="pnpConfirmDeleteForm:deleteActionConfirmed"
id="pnpConfirmDeleteForm:deleteActionConfirmed" role="button"
aria-disabled="false">
<span class="ui-button-text">Delete</span>
</button>
<a
onclick="PrimeFaces.ab({source:'pnpConfirmDeleteForm:deleteActionConfirmedLink',process:'pnpConfirmDeleteForm:deleteActionConfirmedLink',update:'pnpEditForm pnpExistingForm',oncomplete:function(xhr,status,args){pnp_delete_confirmDialog.hide();}});return false;"
class="ui-commandlink" href="#"
id="pnpConfirmDeleteForm:deleteActionConfirmedLink">Delete</a>
<button type="button" onclick="pnp_delete_confirmDialog.hide();"
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
name="pnpConfirmDeleteForm:deleteActionCancelled"
id="pnpConfirmDeleteForm:deleteActionCancelled" role="button"
aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
<input type="hidden" autocomplete="off"
value="7076449462381240234:-2976764560029615800" id="javax.faces.ViewState"
name="javax.faces.ViewState">
</form>
You can see that there is no onclick generated for the button, where there is for the link. Am I missing something or is this a bug in primefaces? If a bug, is there a workaround other than using links with styles to make them look like buttons?
I am using mojarra 2.1.14 with primefaces 3.4.2 on tomcat 6.0.32 (servlet 2.5, el 2.1).
ARGH... Simple mistake. The type attribute of the p:commandButton determines the behavior. It appears that by setting type='button' I have turned it into a (taken from the primefaces user guide):
Push Buttons
Push buttons are used to execute custom javascript
without causing an ajax/non-ajax request. To create a push button set
type as "button".
<p:commandButton type="button" value="Alert"
onclick="alert(‘Prime’)" />
Switching type to submit fixed this issue. Lesson learned... If using buttons, type='button' causes the component to ignore any server side action.
In JSF, I have included the following line in my xhtml file:
<h:panelGroup id="messageHeader">
<h:messages for="messageHeader" layout="list" errorClass="error" infoClass="inform"/>
</h:panelGroup>
The text gets rendered as
<ul>
<li class="error"> Please enter a First Name </li>
<li class="error"> Please enter a Last Name </li>
</ul>
How do I get the CSS style to apply to the <ul> tag or some surrounding <span> tag?
Here is what I am trying to do. I want all error messages to appear in a single red box. I also want all info messages to appear in a single green box. The example above produces 2 red boxes; one for each <li> item.
Use the styleClass attribute of <h:messages>. It will be applied on the parent HTML element.
E.g.
<h:messages styleClass="messages" />
will end up as
<ul class="messages">
...
</ul>
Update: you seem to want to show info and error messages in separate lists. Use two <h:messages/> instead on which you hide the other severity.
<h:messages styleClass="errorMessages" infoStyle="hide" />
<h:messages styleClass="infoMessages" errorStyle="hide" />
with
.hide {
display: none;
}
This could be done by providing h:messages tag for each message type you need to show with appropriate condition. For exapmle for error message type:
<h:panelGroup id="errorMessageHeader" class="whatever you need" rendered="#{FacesContext.isValidationFailed()}">
<h:messages for="errorMessageHeader" layout="list" errorClass="error" />
</h:panelGroup>
Conditions for other message types you can find by combining methods from
javax.faces.context.FacesContext
Thanks,
A.K.
How to use li and ul tag in JSF Framework?
You can use standard html mixed with JSF syntax. Just write
<ul>
<li> Apple </li>
<li> Banana </li>
</ul>
I guess what you want is displaying a list from a List
If you are using Facelets, do:
<ul>
<ui:repeat value="#{myBean.items}" var="item">
<li><h:outputText value="#{item.name}"/></li>
</ui:repeat>
</ul>
If you are not, you should. Anyway, you can do the same with the old JSTL and c:forEach
<html ... xmlns:c="http://java.sun.com/jstl/core">
...
<ul>
<c:forEach items="#{myBean.items}" var="item">
<li><h:outputText value="#{item.name}"/></li>
</c:forEach>
</ul>
You can also use Tomahawk's t:dataList to render a <ul><li> in a "jsfish" way without bringing in "plain vanilla" HTML. Useful if you're still on JSF 1.0/1.1 yet and don't want to hassle with f:verbatim.
<t:dataList layout="unorderedList" value="#{bean.list}" var="item">
<h:outputText value="#{item}" />
</t:dataList>
which generates
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
which look like this
item 1
item 2
item 3