Check All Radio Buttons (JSF Component) + jQuery - javascript

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);

Related

JQuery - after() function with quotes

I need to add some HTML after a radio-button, I want to add an image and function so I check the radio button when I click on it. I would check the radio button with my own selectRadioButton() function.
The existing code is, I can't edit this part:
<span class="ms-RadioText">
<input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" />
</span>
My idea, to add my image with function, was to do it like this:
$("#idFirstRadioButton").after("Image 1:<br/><img src=\"http://urltoimage/image.jpg\" border=\"0\"/>");
But when I use this code, the HTML of my page is this:
<span class="ms-RadioText">
<input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" /> Image 1:<br/><IMG src="http://urltoimage/image.jpg" border=0>
</span>
He's adding "shape="" idFirstRadioButton?)?="""
The correct code should be:
<span class="ms-RadioText">
<input id="idFirstRadioButton" type="radio" name="idFirstRadioButton" value="1" /> Image 1:<br/><a href="javascript:selectRadioButton("idFirstRadioButton")><IMG src="http://urltoimage/image.jpg" border=0></a>
</span>
I already tried with ', with \", combination of both, with a variable, ...
$("#idFirstRadioButton").after("Image 1:<br/><img src=\"http://urltoimage/image.jpg\" border=\"0\"/>");
$("#idFirstRadioButton").after('Image 1:<br/><img src="http://urltoimage/image.jpg" border="0"/>');
$("#idFirstRadioButton").after('Image 1:<br/><img src="http://urltoimage/image.jpg" border="0"/>');
What am I doing wrong or what is the code that I should use?
You should use different quotes inside your .after string, because they will be required. For example:
$("#idFirstRadioButton").after("Image 1:<br/><img src=\"http://urltoimage/image.jpg\" border=\"0\"/>");
This is the result:
<img src="http://urltoimage/image.jpg" border="0">
However, this is only if you have no other option. As #CBroe mentioned, you should try not to bind event handlers inside appended html, but try to handle them using proper way.
Example #Dan O provided seems to be something you should be looking for.
what you're doing wrong is using strings of HTML instead of constructing and appending Elements themselves, which (in addition to potential security concerns) can lead to the sort of confusing and annoying behavior you're seeing here. You want something like this:
var myImg = $("<img/>");
myImg.attr("src", "http://urltoimage/image.jpg");
myImg.on("click", function(e) {
selectRadioButton("idFirstRadioButton");
});
$("#idFirstRadioButton").after(myImg);
When you have more than 1 level deep of " or ' you need to intercalate them or escape them.
The last one should be right, except you kept using " inside instead of escaping them or alternating them.
The correct should be:
$("#idFirstRadioButton").after('Image 1:<br/><img src="http://urltoimage/image.jpg" border="0"/>');
So we start with single quote for the after, then double quote for the href, then we escape a single quote for the inside of the selectRadioButton, then a single quote to exit the string and dump the var, then back inside the string and keep going on.
Fiddle
NOTE: Remember to declare your var "VARidFirstRadioButton" that's the
shape of error.

Changing <label for>

I'm working in SharePoint 2013 list that has a Choice column with the "Allow 'Fill-in' choices:" set to Yes.
By default, the text label for that radio button is set to "Specify your own value:" and it can't be changed through the user interface. How can it be changed via JS? I've provide a short snippet below of what the final rendered code looks like.
<span title="Specify your own value:" class="ms-RadioText" onclick="SetFocusOnControl('ctl00_m_g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1_ff1251_ctl00_ctl02')">
<input name="ctl00$m$g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1$ff1251$ctl00$RadioButtons" id="ctl00_m_g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1_ff1251_ctl00_ctl01" type="radio" value="ctl01">
<label for="ctl00_m_g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1_ff1251_ctl00_ctl01">Specify your own value:
</label>
</span>
Here's what I've tried but was unsuccessful:
document.getElementByName("ctl00$m$g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1$ff1251$ctl00$RadioButtons")[1].innerHTML="BOO!";
document.getElementByName("ctl00$m$g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1$ff1251$ctl00$RadioButtons")[1].innerText="BOO!";
document.getElementById("ctl00_m_g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1_ff1251_ctl00_ctl01")[1].innerText="BOO!";
document.getElementById("ctl00_m_g_d8db5d84_c3de_40e0_8fa4_d9fd909d75d1_ff1251_ctl00_ctl01")[1].innerHTML="BOO!";
Thanks,
-Haniel
getElementsByName works for elements with name attributes. Similarly, getElementById works for elements with id attributes. So, since the label has neither, those won't work.
What you need is
document.querySelector('label[for="ridiculouslylongid"]').innerHTML="BOO!";
Also, you have [1] in both the functions in your source, but that's not OK. For getElementsByName you should have used [0], because the result is 0-based. For getElementById, as for querySelector, you won't need an index at all (they're not collections).

Dynamically add <div> inside <input>

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.

JQuery combine attribute selectors

I have a Javascript that I am working on and I would like to combine two selectors so that they refer to this tag only:
<input name="checkable" type="checkbox">
So that only checkable with type checkbox will react to it while a text-field with a name of checkable will not. I have tried:
$("input[name='checkable' type='checkbox']")
with no success. Any ideas on how I can do this?
$("input[name='checkable'][type='checkbox']")
Cf. Multiple Attribute Selector [name="value"][name2="value2"].

Prototype - Element with styleclass in element with an id?

First of all: I'm new to Prototype JS Framework!
Until now I worked with jQuery.
In jQuery I am able to get an element by coding:
$('#myitemid .myitemclass').val()
html:
<div id="myitemid">
<input type="text" class="notmyclass" />
<input type="text" class="myitemclass" />
<input type="text" class="notmyclass" />
</div>
But how to do this in prototype?
I tried to code:
$('myitemid .myitemclass').value
but this won't work.
Can U help me plz?
Use $$ which returns all elements in the document that match the provided CSS selectors.
var elemValue = $$('#myitemid input.myitemclass')[0].getValue();
Also input.myitemclass is better than .myitemclass because it restricts search to input elements with class name .myitemclass.
If you want to get the named element myitemid, simply use $('myitemid'). This is equivalent to $('#myitemid') or document.getElementById('myitemid'). Your case is more complex, since you want to select a child of a named element. In that case you want to first find the named element, then use a selector on it's children.
$('myitemid').select('input.myitemclass')
Then, to access it's value (since it's a form element), you can add .getValue().
$('myitemid').select('input.myitemclass').getValue()
Should be faster
$("myitemid").down("input[class~=myitemclass]").value

Categories

Resources