Consider the following situation:
There exists a column in a table with label "X". X contains a checkbox, which can be checked or unchecked. To be more precise here is the code:
<h:form id="form">
<rich:dataTable id="table"
<rich:column>
<f:facet name="header">
<h:outputLabel value="X" />
</f:facet>
<h:selectBooleanCheckbox id="x" readonly="true"
disabled="true"
value="#{some condition}"
styleClass="#{foo() ? 'inputChanged' : '' center" />
.
.
.
The problem i got is:
It is not quite clear to decide wether the checkbox is checked or not. The problem is, that the checkbox has to be disabled, else it gets focussed and one can click the check box. Even though this does not have any impact on the data in the backend, i don't want this to happen. The costumer told me, that you cant decide quite well, if the checkbox is marked or not.
Is there a way to get the checkbox not disabled while a user can't make any changes? Or do you have any other idea how to make this more visible to a costumer?
The following worked:
input[type=checkbox]:not(:checked) {
outline:2px solid red;
}
This way, you can override the style of an unchecked checkbox so that it has a red border.
Related
The link contains an example of richfaces 4 popuppanel:
richfaces popuppanel example
Here is the code:
<rich:toolbar height="26px" id="tb">
<rich:toolbarGroup location="right">
<h:outputLink value="#">
<rich:componentControl event="click" operation="show" target="ls">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
</rich:hashParam>
</rich:componentControl>
Search
</h:outputLink>
</rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
<h:panelGrid columns="3">
<h:outputText value="Search:" />
<h:inputText />
<h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
</h:outputLink>
</h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
p_width = #{rich:component('ls')}.width();
</h:outputScript>
But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?
The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:
RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})
You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.
I need display a primefaces commandButton when mouse pointer is over another commandButton, but I can use div only if is extremely necesary. If is posible do this whith the onmuseover event much better, like:
<p:commandButton id="button1" value="Display" onmouseover="displayButton2" update="button2"/>
<p:commandButton id="button2" value="Valid Option" rendered="false"/>
If you don't want to use a div you can use a span:
<p:commandButton id="button1" value="Display" />
<span id="buttonSpan">
<p:commandButton id="button2" value="Valid Option"/>
</span>
And your css:
#buttonSpan{
display:none;
...
}
#form\:button1:hover #buttonSpan{
display:block;
}
In css \ is the escape literal. So actually you're setting a "hover" CSS setting on the component with the id form:button1. So if you don't have a form, then its #button1:hover... If your form is called formTest then its #formTest\:button1. You need to check your generated id for that component.
I have 2 command buttons and one select one menu. I need to call a bean method depending on the buttons selected and the currently selected item in the menu.
<h:form id="form1">
<h:outputLabel value="menu:" />
<h:commandButton value ="en" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='en' />
</h:commandButton>
<h:commandButton value ="fr" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='fr' />
</h:commandButton>
<h:outputLabel value="id:" />
<h:selectOneMenu value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
</h:form>
However, although the first button updates my properties and calls the action method, the second button gives me the following message
WARNING: FacesMessage(s) have been enqueued, but may not have been displayed
and the view doesn't get updated on the fist click. However, immediately on the second click, the properties get updated and so does the view.
How is this caused and how can I solve it?
I did see the log, however I dont understand the error: this is what it shows: form1:j_idt124: Validation Error: Value is not valid What value and where?
It's easier to identify the value if you give all input components an ID and attach a <h:message> to them as follows:
<h:outputLabel for="id" value="id:" />
<h:selectOneMenu id="id" value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
<h:message for="id" />
This way you will get form1:id as label instead of form1:j_idt124. Alternatively, you can also specify the label of the input component:
<h:selectOneMenu label="id" ... />
As to the "Value is not valid" error, you will get this error when the selected value does not match any one of the available values during processing the form submit. This can in turn happen when the property behind #{bean.idlist} has incompatibly changed during processing the form submit. This can in turn happen when the bean is request scoped. Putting the bean in the view scope should fix it.
See also:
Validation Error: Value is not valid
I am developing my app in asp.net web forms. The textbox is set like this
<asp:TextBox ID="txt1" runat="server" Enabled="false" ></asp:TextBox>
and this is the corresponding HTML markup
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
It is not editable upto this point.
I enable Caret browsing in IE8 (press F7) and then this field becomes editable, though the text is grayed out and consequently gives a wrong feeling to the user that the field is editable. This does not happen if I mark the textbox as readonly, but I do not want to mark it as a readonly field. Any suggestions on how to have the textbox in disabled mode when in Caret Browsing.
Edit1: I am not looking for a solution which would change IE settings/registry, am looking for a programmatic solution as my site is a public facing website
Edit2: View states are enabled for the page and for the controls
I can get you started quickly with this script:
<script> document.onkeyup = KeyCheck;
function KeyCheck() { alert(document.getElementById("txt1").value); } </script> </script>
Put this all the way on top of the html.
Now you get hold of the keypress.
When in caret mode, IE seems to ignore the text's javascript events
Alright. I gave you a Hint to build up on. (Thanks for the -1)
Here is the HTML code that you are looking for. Make sure to populate the initialVal using ASP code.
<script>
document.onkeyup = KeyCheck;
var initialVal="1.0"
function KeyCheck()
{
if(document.getElementById("txt1").value != initialVal) {
document.getElementById("txt1").value = initialVal;
return false;
}
}
</script>
<input name="txt1" type="text" value="1.0" id="txt1" disabled="disabled" />
I am dynamically creating a CheckBox and setting the disabled property like this:
chk.Disabled = false.
This renders the following HTML:
<input type="checkbox" disabled="disabled" .../>
On the click of the checkbox, I have a JS function that tries to enable it by doing a:
//get reference to the checkbox
chk.disabled = false;
This does not work. Any help?
If your checkbox is disabled, your onclick wont be called
What you're trying to do is a bit odd. You're trying to enable a checkbox by clicking on the checkbox, which is disabled to start with. So, the onclick will not be registered until the checkbox is actually enabled.
Try the below to see what I mean.
<html>
<body>
<input id="cb" type="checkbox" disabled="disabled" onclick="this.disabled=!this.disabled;" />
<label for="cb">Click me</label>
<input type="button" value="Click me instead!" onclick="cb.disabled=!cb.disabled;" />
</body>
</html>
Hope that helps you out.
How are you dynamically creating the check box?
Keep in mind that ASP.NET will change the name of the check box you give it, especially if you add it on the code behind.
What you need to do is send to your JS function the clientId, which is the id the HTML item will get when render.