Am using JSF and Primefaces .. And i need when i focus on the outlabel the input text gets background color
This is my code :
<p:panelGrid columns="2" layout="grid" style="border:0px none;background:none" styleClass="ui-panelgrid-blank ">
<p:outputLabel value="#{msg.PurchaseReturns_Txt_Document_NO}" />
<p:inputText readonly="true" value="#{quotationMB.instance.object.quotationid}"/>
</p:panelGrid>
<p:panelGrid styleClass="datePick ui-panelgrid-blank " columns="2" layout="grid" style="border:0px none;background:none">
<p:outputLabel value="#{msg.RequestForQuotation_Txt_Date}" />
<p:calendar value="#{quotationMB.instance.object.validto}" locale="de" navigator="true" pattern="yyyy-MMM-dd" showOn="button" />
</p:panelGrid>
*************************JAVA Script*******************************
I have tried this code .. It worked but on the whole input texts that i have in my page :
$('.ui-outputlabel').click(function() {
$(this).find('.ui-inputtext').css('background-color', 'red');
});
There are a few things wrong in your question.
To start off, you cannot focus a p:outputLabel (which is rendered as an HTML label). Clicking the label will focus the linked field. Which brings us to the second issue.
In order for an p:outputLabel to work as specified in the showcase (validation errors, error styling, required indicator, etc.), you need to use the for attribute to link it to the input component (as in regular HTML).
So, if you add for to your labels, you can simply style the input fields using the :focus CSS selector.
Technically you could get your click listener working like this (but that would not make sense):
$("label").click(function(){
document.getElementById(this.htmlFor).style.backgroundColor = "red";
});
It would make more sense to add a focus and blur listener to input fields and use the listeners to toggle a CSS class on the corresponding label. For example:
$("input").focus(function(){
$("label[for=\""+ this.id +"\"]").addClass("focus");
});
$("input").blur(function(){
$("label[for=\""+ this.id +"\"]").removeClass("focus");
});
See also:
Anyway to have a label respond to :focus CSS
Related
I have horizontal jQuery checkbox. It should display some text when it is clicked and remove the text when it is clicked again and unchecked. However, when i first load the page and click on the box nothing happens. Then when i click it again to uncheck the text appears. It seems the opposite behaviour of what i expect is going on. Here is the code:
(I can solve this problem by simply inverting the boolean sign but i want to understand why this is happening).
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
</fieldset>
</form>
<script>
function onfilter(){
if ($("#checkbox-h-2a").prop('checked')){
document.getElementById("hehe").innerHTML = "Yo there";
}
if (!($("#checkbox-h-2a").prop('checked'))){
document.getElementById("hehe").innerHTML = "";
}
}
</script>
You're already loading jQuery , so just use jQuery for everything - it is much easier , works better, really the only downside to jQUery is having to load it - and you're already doing that. So I would suggest using something like this:
$(function(){
$(document).on('click', '#checkbox-h-2a', function(){
if ( $(this).is(':checked') ) {
// Do stuff
}
else{
//Do stuff
}
});
});
Also, I hope you are actually closing your input element in your HTML , and that this is just a typo in your question
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
try:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<label for="checkbox-h-2a" >Vegetarian
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
</label>
</fieldset>
see how the label goes around the checkbox? also you can get rid on the inline function in HTML with the jQuery I provided
EDIT:
2 problems - one you selectd jQuery 1.6 , to you .on() you need a newer version , if you must use old jQuery let me know ,
the other problem is that all jQuery code must be wrapped in
$(document).ready(function(){
/// code here
});
or for short:
$(function(){
// code here
});
The problem is at the time of clicking on the label, the checkbox's checked has not been changed, so you have to toggle the logic (although it looks weird) or attach the handler to the onchange event of the checkbox input instead:
<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>
Demo.
It involves how a label works, when clicking on the label, it looks for the attached input element via the for attribute and trying to change the appropriate property (checked for checkbox, radio, ...) or focusing the element (for textbox fields). So at the clicking time, it processes/calls your handler first. Hence the problem.
Note that this answer just fixes the issue, not trying to improve your code.
How can I disable <p:selectBooleanCheckbox> component using JavaScript?
My goal is to prevent user from changing value of one selectBooleanCheckbox while another is changed during ajax request time (which change values in managed bean).
My simplified code :
<p:selectBooleanCheckbox id="..." value="..." widgetVar="abcde">
<p:ajax listener="..." update="..."/>
</p:selectBooleanCheckbox>
<p:selectBooleanCheckbox id="..." value="...">
<p:ajax listener="..." update="..." onstart="alert(document.getElementById('j_idt14:locationChoice2_input').disabled);document.getElementById('j_idt14:locationChoice2_input').disabled=true;alert(document.getElementById('j_idt14:locationChoice2_input').disabled)" />
</p:selectBooleanCheckbox>
j_idt14:locationChoice2_input id is the id of my first <p:selectBooleanCheckbox /> component.
alert() functions dsplay false and after true so my component is well disabled.
However, it stays with the same render event if it's disabled.
Is the only way to be changing manually CSS classes to match disabled state ? Can widgetVar help me ?
nb: I want to change immediately the aspect of the component so I don't use the JSF disabled attribute, I have to use JS.
I answer my own question.
I put inside simple panelGrid my 2 selectBooleanCheckbox and apply blockUI on this panelGrid :
<p:blockUI block="panelToBlock" widgetVar="block" />
<h:panelGrid id="panelToBlock">
<p:selectBooleanCheckbox id="..." value="..." widgetVar="abcde">
<p:ajax listener="..." update="..." onstart="block.show()" oncomplete="block.hide()" />
</p:selectBooleanCheckbox>
<p:selectBooleanCheckbox id="..." value="...">
<p:ajax listener="..." update="..." onstart="block.show()" oncomplete="block.hide()" />
</p:selectBooleanCheckbox>
</h:panelGrid>
blockUI has a default opacity value to 0.3 but I don't want to see it, I just want to disable my 2 selectBooleanCheckbox so I change the value of the generated id to 0 at runtime with JS :
$(window).load(function() {
$('#j_idt14\\:j_idt23_blocker').css('opacity', 0);
}
and that's all.
Now when ajax request is made, these 2 checkboxes values can not be changed.
Hope this helps
I've a form in which I'm iterating a datatable, each row has a set of components and one of them is:
<h:selectOneRadio id="chargeWaive" onclick="alert(this.id);" > <f:selectItem itemLabel="Charge" itemValue="charge" /> <f:selectItem itemLabel="Waive" itemValue="waive" />
</h:selectOneRadio>
I've added two links that triggers two similar functions :
<a href="#" onclick="selectAllCharge();">
<h:outputText value="Charge All" />
</a>
<a href="#" onclick="selectAllWaive();">
<h:outputText value="Waive All" />
</a>
So when the user clicks on one these links, all the Charge/Waive radiobuttons should be checked.
I've tried to check the first radio button (test purpose) by using one the following codes, but I always get the same error:
$('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', true); $('#frmResults:billingRecordId:0:chargeWaive:0').attr('checked', 'checked');
$('#frmResults:billingRecordId:0:chargeWaive:0').prop("checked", true);
The error that I'm getting is: Sintax error, unrecognized expression: billingRecordId
I do know the id is correct because when I look into the compiled JSF code the generated ID for the radio type is:
<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:0" value="charge" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:0"> Charge</label>
<input type="radio" name="frmResults:billingRecordId:0:chargeWaive" id="frmResults:billingRecordId:0:chargeWaive:1" value="waive" onclick="alert(this.id);" /><label for="frmResults:billingRecordId:0:chargeWaive:1"> Waive</label>
So at this point I don't know what I'm missing here. Any idea?
jQuery uses CSS selectors to select elements in the HTML DOM tree.
The : is a special character in the CSS selector representing the start of structural pseudo class. So if you use
$('#frmResults:billingRecordId')
then it's basically looking for a HTML element with ID of frmResults and having a pseudo class matching billingRecordId. However, as billingRecordId is not a valid pseudo class at all, nothing will be found.
You'd basically need to escape the colon in CSS selector syntax.
$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0')
Or, IMO cleaner, use the [id] attribute selector.
$('[id="frmResults:billingRecordId:0:chargeWaive:0"]')
Or, to get rid of the chained IDs and indexes.
$('[id$=":chargeWaive"]:first :radio:first')
("select elements with ID ending on :chargeWaive, get the first, then get the first radio button from it")
See also:
How to select JSF components using jQuery?
As a completely different alternative, you can also perform a JSF ajax call to preselect the desired radiobuttons by just setting the model value accordingly in the backing bean's ajax listener method.
Colons can cause problems within jquery selectors. Try escaping them with a double backslash ala:
$('#frmResults\\:billingRecordId\\:0\\:chargeWaive\\:0').attr('checked', true);
Did you try this way
Also use .prop() instead of .attr()
$('[id^="frmResults:billingRecordId:0:chargeWaive:"]').prop("checked", true);
I want to add <div> inside <input>
<input type="submit"
name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton"
value="I understand and agree to all of the above "
onclick="return apt();"
id="DisclaimerAcceptButton"
class="DisclaimerAcceptButton">
The button is too long so I want to split its caption into two lines.
I don't have access to pure html since everything is dynamic.
input elements cannot have descendants:
<!ELEMENT INPUT - O EMPTY -- form control -->
^^^^^
However, if you can change the code that generates the button, you can use button instead:
<button name="body_0$main_0$contentmain_0$maincontent_1$contantwrapper_0$disclamerwapper_1$DisclaimerAcceptButton" onclick="return apt();" id="DisclaimerAcceptButton" class="DisclaimerAcceptButton">
I understand and agree to <br />
all of the above
</button>
This lets you style the content of the button however you want to.
A div is a block level HTML element and it shouldn't be added inside the button in such a way. You can however use CSS to specify a width to the button, and thus acquire the multi-lineness that you're looking for.
You can't add div inside of input element (unless you want it in input's value).
No can't do. And if it works on some browser, it's not guaranteed to work anywhere else, because it doesn't follow the standards.
Only you need:
<input type="checkbox" id="a"/>
<label for="a"><div>... div content ...</div></label>
Like somebody write in input you cannot put any element but in label for it can.
So, i need to focus a richfaces tag when an option is selected in my suggestionBox. Normally this wouldnt be a problem but I have the following code:
<rich:suggestionbox fetchValue="#{cap.nom_comp}"
suggestionAction="#{gestionRankingBean.autocompleteMedicamento}"
var="cap"
for="statesinput" id="suggestion" tokens=","
onselect="lossFocus()">
<h:column>
<h:outputText value="#{cap.nom_comp}" />
</h:column>
<a4j:support event="onselect" ajaxSingle="true" reRender="target">
<f:setPropertyActionListener value="#{cap.id}"
target="#{gestionRankingBean.sugerencia}" />
</a4j:support>
</rich:suggestionbox>
My problem is the a4j:support tag is not going to work if i leave the onselect event on the line 5.It seems like i cannot use the same event in this way.
lossFocus() is a javascript function that just does what i want ( pure jquery). So any way to do this? I was thinking if there is some way to capture the onselect event of the suggestionBox with jquery an make my life easier. But i dont know how-
Try using oncomplete="lostFocus()" on a4j:support. You could also try onsubmit.