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.
Related
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.
This is working:
<h:panelGroup layout="block" id="map-wrapper">
<p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
zoom="15"
type="HYBRID"
model="#{addOfferController.emptyModel}"
onPointClick="handlePointClick(event);"
style="width:600px;height:400px"/>
</h:panelGroup>
This is not:
<h:panelGroup layout="block" id="map-wrapper" style="display: none">
<p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
zoom="15"
type="HYBRID"
model="#{addOfferController.emptyModel}"
onPointClick="handlePointClick(event);"
style="width:600px;height:400px"/>
</h:panelGroup>
In the second code there is only div with specified height and width inside map-wrapper.
What could be the reason?
Thanks!
The reason is that some PF components need dimension information to render themselves on client side. When they are in a container that has display: none;, problems often occur.
I've just found a workaround:
Add a widgetVar property to your g:map component widgetVar="gmap"
In the same page, add this javascript <script type="text/javascript">gmap._render();</script>
I am trying to use the server control for an asp checkbox:
<asp:CheckBox ID="generalInformation"
ClientIDMode="Static"
class="SetupChecklist"
name="generalInformation"
CssClass="SetupChecklist"
runat="server" />
However it does not seem to be retaining the class, which I need it to do. Am I missing something?
Here is how it renders on the web page:
<input type="checkbox"
name="ctl00$ContentPlaceHolder1$generalInformation"
id="generalInformation">
ah.......
this is the problem:
runat="server" checkbox is render to span + input...
the span gets the class not the input....
<span class="SetupChecklist" class="SetupChecklist" name="generalInformation">
<input id="generalInformation" type="checkbox" name="generalInformation" /></span>
You might want to use the CssClass property instead:
<asp:CheckBox ID="generalInformation"
ClientIDMode="Static"
name="generalInformation"
CssClass="SetupChecklist"
runat="server" />
Edit: I've only just seen that you've already tried it. Ok, CssClass actually applies the class to a span that wraps the check box, so try this instead:
generalInformation.InputAttributes("class", "SetupChecklist");
It will render the HTML like below.
<span class="SetupChecklist" class="SetupChecklist" name="generalInformation">
<input id="generalInformation" type="checkbox" name="generalInformation" />
</span>
Assuming that you are trying to design the input tag.
Now your style sheet can be like below for the <input> tag
<style type="text/css">
.SetupChecklist input
{
border:0px;
}
</style>
Originally, the span tag was occupying the class information.
remove the class attribute and just use the CssClass
Um, I have this guy:
<div class="buttonRight"><asp:Button ID="btnOK" runat="server" Text="OK" Width="68px"/></div>
which renders out to
<div class="buttonRight">
<input type="submit" name="_$_$pc$pc$tabTO$_$uc0$popupSelectCompetition$btnOK" value="OK" id="____pc_pc_tabTO___uc0_popupSelectCompetition_btnOK" style="width:68px;" /></div>
I need to call some javascript on that button without altering its behavior otherwise. I tried putting an OnClick asp attribute but that seems to be for postbacks to call server code, not passing through a javascript hook to the rendered html.
I also don't understand how the input being type='submit' affects me.
Add your client-side code to the OnClientClick property :
<div class="buttonRight">
<asp:Button ID="btnOK" runat="server" Text="OK" Width="68px"
OnClientClick="alert('client side scripts here');"/>
</div>
OnClick property used for server side events.
Or add onclick attribute to your control like that at code behind :
btnOK.Attributes.Add("onclick", "alert('client side scripts here');");
Is there any way to set a CSS class on an input item in a radio button list? I'd like to reference these form values by class in jQuery.
Given an ASP.NET RadioButtonList with classes set on the ListItems:
<asp:RadioButtonList ID="RadioButtonList" runat="server">
<asp:ListItem class="myClass" Text="Yes" Value="1" />
<asp:ListItem class="myClass" Text="No" Value="0" />
</asp:RadioButtonList>
Will render as:
<span id="RadioButtonList" class="radioButtonListField myClass">
<span class="myClass">
<input id="RadioButtonList_0" type="radio" value="1"
name="RadioButtonList"/>
<label for="RadioButtonList_0">Yes</label>
</span>
<span class="myClass">
<input id="RadioButtonList_1" type="radio" value="0"
name="RadioButtonList"/>
<label for="RadioButtonList_1">No</label>
</span>
</span>
Unfortunately, the "myClass" class is added to the <span> that contains the radio button item, not the <input> itself. How could I get it to look like this instead:
<span id="RadioButtonList" class="radioButtonListField myClass">
<span>
<input id="RadioButtonList_0" class="myClass" type="radio" value="1"
name="RadioButtonList"/>
<label for="RadioButtonList_0">Yes</label>
</span>
<span>
<input id="RadioButtonList_1" class="myClass" type="radio" value="0"
name="RadioButtonList"/>
<label for="RadioButtonList_1">No</label>
</span>
</span>
(This does not even get into the issue of adding the classes to dynamically bound RadioButtonLists.)
Yes, RadioButtonList renders horrible HTML.
Anyway, it's still easy to get them from jQuery.
Try
$('span.myclass input:radio')
Above will get all the radio buttons inside the span with class 'myclass'.
An alternative you may want to try to do is change your CSS class to accomindate the Server Control Rendering.
So in your CSS instead of the following:
.myClass { ... }
You Use this:
.myClass input { ... }
I don't know if you can set the class attribute (via class or CSSClass) in a declarative manner; however, the above should give you a work around.
untested
$('.myclass input:radio').each(function() {
this.css({'style-name':'style-value'})
)};
once the list is rendered, you can possibly manipulate the css client side using the above statement.
Using .NET you could create an event handler to the RowBinding event. This would allow you to access the individual controls within each item in the list. Once you pull the RadioButton control, you could programaticaly set it's CssClass to apply your class on the RadioButton level.
You could also use jquery to find the radio button controls that have myClass applied, and then apply another class to that.
Third, you could just change the definition of MyClass to also specify that it's only applied to input elements under elements that have MyClass applied.
the desigeek response is pretty good..
To get this to work for radiobuttons I had to do this on document.ready()
$('#<%=radRisksMarginTrading.ClientID %>_0').addClass("validate[required]");
$('#<%=radRisksMarginTrading.ClientID %>_1').addClass("validate[required]");
I'm sure there is a much better way to do it by looping but I need a quick fix for 5 radiobutton lists..