I am using PrimeFaces6.1 widgetVar to disable various page elements. I have several different types of elements on the page. When they are all disabled, p:calendar is the only element that doesn't look disabled.
<p:calendar id="revision-date-from" value="#{search.revisionDateFrom}" pattern="dd/MM/yyyy" mask="true" />---<p:calendar id="revision-date-to" value="#{search.revisionDateTo}" pattern="dd/MM/yyyy" mask="true" />
I'm required to develop for Internet Explorer 11.
Does anyone else have this issue? Or may know how to solve this? I guess, I could always play with the styling to change the bgcolor. But it does seem odd that PrimeFaces would have this one outlier.
Click here to see the image of elements p:calendar, p:inputText and p:selectOneMenu together
I was able to solve this issue: After doing research I learned that disabled PrimeFaces elements use a style class called 'ui-state-disabled' to assign a percentage of Opacity. Inspecting the calendar element I discovered that 'ui-state-disabled' class was never assigned. So, to solve my issue I overrode the class in my stylesheet. Well, didn't 'need' to do this, but I wanted to have control over all my disabled elements Opacity.
.ui-state-disabled {
opacity: 0.45;
filter: Alpha(Opacity=45);
cursor: default !important;
}
Using my widgetVar to disable I needed to add the class:
PF('widget_date').disable();
PF('widget_date').getJQ().addClass('ui-state-disabled');
Then to enable and remove the class:
PF('widget_date').enable();
PF('widget_date').getJQ().removeClass('ui-state-disabled');
This solution worked perfectly.
Related
Environment: JSF 2.2.14, PrimeFaces 6.2
I have my command button set up as below, when the button is disabled, title will show up (when hovered over) in PF6.1, but won't show in PF6.2
<p:commandButton id="removeCmd" icon="fa fa-times"
actionListener="#{controller.remove()}"
update="#form"
disabled="#{ontroller.isCommandDisabled()}"
style="width: 20px; height:20px;margin-left: 5px;"
title="#{controller.isCommandDisabled() ? 'Command disabled due to user privilege' : 'remove selected item'}"
onstart="PF('bui').show(); PF('bar').show();"
oncomplete="PF('bui').hide(); PF('bar').hide();"
styleClass="removeCmd"/>
Title show up fine when button is not disabled.
Does anyone encounter the same problem? I also tried to wrap my p:commandButton inside h:panelGrid and use p:tooltip with it, not working either.
UPDATE: issue created on github: https://github.com/primefaces/primefaces/issues/3656
By nature I'm curious (and I follow the changes in PrimeFaces a little). If the title of a button does not work anymore between 6.1 and 6.2 I start analyzing a little. The generated html for a button in both PrimeFaces versions is identical. This makes me think whether it would have stopped working for other components as well. So I created a simple page
<p:inputText title="myInput enabled" />
<p:inputText title="myInput disabled" disabled="true"/>
And the behaviour change between using PrimeFaces 6.1 and 6.2 was the same. Title working for both in 6.1 and only for the first in 6.2. Since there was a major jquery change between PrimeFaces 6.1 and 6.2, I posted 'jquery show title tooltip of disabled inputs and buttons' in google.
One of the hits was:
Show tooltip for disabled items
In it there was a reference to some css(!) that disables dom events and consequently not showing titles.
pointer-events: none;
I opened my browser developer tool and in the filter part in the css tab, I put 'pointer'. When using 6.1, there was nothing there, but in 6.2 there was.
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
Which seems to be coming from the components.css file (according to my browser developer tool). This is not a file that exists in the PrimeFaces repository but one that is created when the PrimeFaces release is build via maven:
One of the files that is included here is the jquery-ui.css and in it is the piece of css referenced above.
When I disabled the corresponding pointer-events: none in my browser developer tool, the titles became visible both for the input and the button.
So if you want to override this, please set this to 'all' (or any other value of your liking).
html .ui-state-disabled {
pointer-events: all;
}
See also
How do I override default PrimeFaces CSS with custom styles?
This is probably a CSS problem, but I cannot understand the reason by myself.
I often found some selectonemenus behaving like the one in picture:
The dropdown field is "covered".
Then I click it, select a value and... it starts displaying correctly.
I am using Cupertino theme.
If I analyze the generated source, here's what I find:
<div class="ui-helper-hidden-accessible">
<input id="carrello:formCarrello:j_idt165_focus" name="carrello:formCarrello:j_idt165_focus" type="text">
</div>
<label id="carrello:formCarrello:j_idt165_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 0px;">
Seleziona...
</label>
The label has "width:0px;". If I remove it, the menu is displayed correctly.
Good but... I DID NOT add that attribute. Why is Primefaces adding it?
EDIT
The source of the first menu:
<p:selectOneMenu value="#{posController.rigaVendita.codiceIva}" effect="fade" converter="codiceIvaConverter">
<f:selectItem itemLabel="Seleziona..." itemValue="" />
<f:selectItems value="#{posController.codiciIva}" var="ci" itemLabel="#{ci.codice}" itemValue="#{ci}" />
</p:selectOneMenu>
The same problem in all browser.
It isn't a css compatibility issue, the fault is the "0px" width attribute!
Ok I finally found what caused the bug!
I had the same problem with selectOneMenu label.
It is because I used the default forward page navigation, that's why in some pages components were working and not in other pages.
Actually it's not working when the url is not matching the page.
Solution : concat view id with "?faces-redirect=true" in action attribute of commandLink or commandButton
This can help:
http://www.mkyong.com/jsf2/jsf-page-forward-vs-page-redirect/
http://www.mkyong.com/jsf2/implicit-navigation-in-jsf-2-0/
The same problem occurred with the PrimeFaces google map component <p:gmap> you need also to use redirection if you want to use it
( And there is another problem: if you are using a template you have to put
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>in the template.xhtml, see (primefaces GMmap inside a dialog not rendering) )
EDIT
And apparently it's OK:
PrimeFaces does not support forward based navigations within an ajax request, you need to do redirect instead or set ajax to false.
http://primefaces.org/faq.html
I've just had the same problem. I guess it was a bug of primefaces. My solution is to override zero width of that element — just add this code into your CSS file:
.ui-selectonemenu-label{
width: 100%!important;
}
I had the same problem and the solution consists in over write the css of the selectOneMenu in this case, correspond to two selectors, that are the following:
.ui-selectonemenu .ui-selectonemenu-trigger{
width: auto !important;
padding-top: 0.4em;
}
.ui-selectonemenu{
padding-right: 0px !important;
}
See the image before correction
See the image after correction
I currently try to implement a website, where an dialog, opened from an carousel, changes something in the database and the result is shown on the screen. For that, I try to update an area in the dialog. Unfortunately, updating things in an carusell does not seem to work.
I shortened the code to an minimal example, so with the following code:
<p:carousel id="page" value="#{pagebean.pages}"
var="item" numVisible="1">
<h:form id="dlg_2_form">
<h:outputText id="test_2" value="#{pagebean.value}" />
<p:remoteCommand name="update_2" update="test_2" />
Increment
</h:form>
</p:carousel>
the function pagebean.value is not called after I click on Increment, but therefore the constructor of pagebean is called when I click on Increment. So it seems like the carousel makes it impossible to update something in it.
Does anyone know, if there is an possibility to update something which is in a carousel, or if there is a workaround for this problem?
EDIT: After the discussion below, I know that Increment does work, if the scope of the corresponding bean is set to #ViewScoped. I could also trigger this button by giving it a widgetVar and accessing its click function, so this would work. Unfortunately, the Bean I want to use is SessionScoped, and with this kind of view it does not work. Has anybody an hint how to solve this problem? I could copy everything into a second Bean, which is ViewScoped, but this is not a very nice solution.
I'm trying to make a conditional render in my Seam application (2.2.0), to display two different controls depending on a condition.
I'm using the s:fragment tag with the render attribute, but my problem is that I want whatever the control is displayed, to have the same id:
<s:fragment render="${editable}">
<rich:calendar id="entityDate"..../>
</s:fragment>
<s:fragment render="${!editable}">
<h:outputText id="entityDate".../>
</s:fragment>
My problem is that even when the render attribute set to false, the "not to be rendered" element is parsed, and I get an exception because of the duplicated id.
I also tried with the tag <ui:remove>, which effectively removes the element before the parsing phase, so I can have something like:
<span id="myId"/>
<ui:remove>
<span id="myId"/>
</ui:remove>
Unfortunately the <ui:remove> tag doesn't allow conditional logic. Has anyone found a way to solve this?
That's only possible when you use a view build time tag such as JSTL <c:if>.
<c:if test="#{editable}">
<rich:calendar id="entityDate" />
</c:if>
<c:if test="#{!editable}">
<h:outputText id="entityDate" />
</c:if>
(note that this is not going to work within an iterablte JSF component, such as <ui:repeat>, <h:dataTable> and so on)
After all, I strongly recommend to take benefit of the disabled attribute instead, if necessary with a good shot of CSS to hide the input field borders and so on. It'll minimize the JSF view boilerplate code.
<rich:calendar id="entityDate" disabled="#{!editable}" />
Disabled inputs are separately styleable by the CSS attribute selector element[attribute], e.g.
input[disabled] {
border: 0;
}
The above removes the border of input elements with the disabled attribute present so that it look like a normal output text.
"Solve"? There is nothing to solve here: two elements in a GUI can not have the same ID. Hardly unnatural or unsound?
It's like asking: "I have a database table with two rows, I would like them both to have the same primary key value, but somehow I get these errors... has anyone managed to solve the problem and circumvent the constraints?".
Or even closer analogy: "I have two spans, one of them is invisible (has style="display: none") I would like them both to have the same id - and browsers seem not to like it, despite one of the spans being invisible".
Bottom line: rendered on not rendered, each component is still a part of the view tree, and therefore has a UNIQUE id.
I have a suspicion that you want to have some "polymorphic" code that should work with the currently visible element. Using ID for such code IS WRONG. If you show us your use case, we might find a right way to achieve the effect.
I use selenuim myself in a seam environement and i recommend using defined ids whenever possible. First you have the ability to create smaller ids which is usefull for pagesize. Second the selenium test run alot faster if you use ids for referencing instead of other selectors. I have not yet found a selenium test where you cannot handle diffrent ids. Additionally if a code fails in jsf tree creation you see which id is failing.
I see you are using sfragment with editable or not. I use the sdecorate and give the decorate an id and then "just" ed for the input and vi for the outputtext for example. This makes it easy in selenium to check the availability of edit or view components.
Would you be able to get the same results you need by putting the id tag on the fragment?
So:
<s:fragment id="entityDate">
<rich:calendar render="${editable}" />
<h:outputText render="${!editable}" />
</s:fragment>
Say I have a websites with 3 panel grid (just for example..) and I would like to have buttons inside each grid that only cause the contents of that grid to refresh so the rest of the page doesn't necessarily have to refresh.
How do I do that?
I tried to have a form sorround that grid but it seems like the rest of the page still gets refreshed.
A Note - I'm trying to achieve something like what happens when you work with a picklist. when you move the objects between the lists there doesn't seem to be any page refresh...
Thanks!
If you are using RichFaces, you should definitivly check the Ajax chapter of the RichFaces manual. I think you will find everything you need to know there.
Here a small example for partial page rendering:
<a4j:commandButton value="update" reRender="infoBlock"/>
<h:panelGrid id="infoBlock">
<!-- Some content-->
</h:panelGrid>