Develop Reference

Javascript - remove duplicate entries

I am trying to code a workaround for this bug I have with the gem nested_form. No knowledge of ruby/rails is required, it's all gonna be about javascript.
So in a nutshell, when my page reloads, I have some duplicate fields with the same model ID (in the value attribute of hidden inputs).
EDIT : added a non-duplicated input with value 50, that should not be modified
<tbody class="echange fields>
...
<input id="etude_echanges_attributes_0_id" type="hidden" name="etude[echanges_attributes][0][id]" value="42">
</tbody>
<tbody class="echange fields>
...
<input id="etude_echanges_attributes_1_id" type="hidden" name="etude[echanges_attributes][1][id]" value="42">
</tbody>
<tbody class="echange fields>
...
<input id="etude_echanges_attributes_2_id" type="hidden" name="etude[echanges_attributes][1][id]" value="50">
</tbody>
The 2 first inputs have value 42. Only the last one is the good one, the first one is a duplicate. So basically I would need a code that scans for all id=".*attributes_x_id" and their value, and only keep the last one.
So in the example I gave above, the javascript should detect that ...
<input id="etude_echanges_attributes_0_id" ... value="42">
<input id="etude_echanges_attributes_1_id" ... value="42">
...have the same value of 42, which means they are duplicates
Then it will remove all but the last one. Also the following should not be modified because it's the only one with model ID value 50
<input id="etude_echanges_attributes_2_id" ... value="50">
EDIT : the parameters that can change are
The identifier of the model : what is before the _attributes
an HTML id : the xxx in _attribute_xxx
a model ID, which correspond to the value of the input : value="yyy"
(note 42 and 50 are just examples, the real ones are MongoDB IDs, that look like 5470b5075374611500040000)
What I want to do :
Find <input> that correspond to duplicates of the same instance model (see above)
Process all but the last one doing :
extract echanges from _echanges_attributes_
singularize it so it becomes echange
Find the parent by its class "echange fields"
Remove this element from the DOM
For now the step that is a problem for me is step n°1. I don't know if it's posible to do it with a simple jquery/css selector ?

Well, you could do this in jQuery:
$('input[id^="etude_echanges_attributes"][value="42"]:not(:last)').remove();
We match the id to ensure we get the right <input>s, and not just any <input>. Since id has a variable value, we cannot use #. So instead we use the attribute selector to match the prefixed value. Also threw in value in the selector.

Javascript select element with complicated ID

need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated
<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>

Use this:
$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")
By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).
See more information in this thread:
Handling colon in element ID with jQuery

Do you have any control of the element? Can you add a class to it?
var val= document.getElementsByClassName("TheClassName");
Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:
var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val = theTD.getElementsByTagName("INPUT");
I need to see more of the HTML to give you an better answer.

You may need to escape colon in your id .So
try this
function RemoveInvalidCharacter(myid) {
return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
}
And call like this
$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));
Have a look at How do I select an element by an ID that has characters used in CSS notation

I have tested this code:
<td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>
<script type="text/javascript">
document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>
in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?
Replace:
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")
with
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")
The id is different.
http://jsfiddle.net/wNePW/

Check All Radio Buttons (JSF Component) + jQuery

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

Accessing an array of HTML input text boxes using jQuery or plain Javascript

I'm looking to create a form which contains a dynamic number of input text boxes. I would like each text box to form part of an array (this would in theory make it easier for me to loop through them, especially as I won't know the number of text fields that will eventually exist). The HTML code would like something like:
<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>
This data would then be sent to a PHP script and would be represented as an array - or at least, that's the theory.
So my first question is, is this achievable using HTML? Are forms designed to work that way?
If the answer to that is "yes", how would I then go about accessing each of those using jQuery or failing that, plain old JavaScript?
I've attempted to achieve this using the following jQuery code:
someval = $('#field[1]').val();
and
someval = $('#field')[1].val();
and the following JavaScript:
someval = document.getElementById('related_link_url')[1].value;
But I've not had any luck.
Thanks in advance.
Edit:
I should note that from a Javascript point of view, I've had it working where the ID of each element is something like field_1, field_2 etc. However, I feel that if I can achieve it by placing each text box into an array, it would make for tidier and easier to manage code.

Give each element a class and access the group using jQuery:
<p>Field 1: <input type="text" name="field[1]" class="fields"></p>
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->
jQuery:
$("input.fields").each(function (index)
{
// Your code here
});
This will run the anonymous function on each input element with a classname of "fields", with the this keyword pointing to the current element. See http://api.jquery.com/each/ for more info.

First of all, id attribute cannot contains [ or ] character.
There is lots of ways to get jQuery/plain JavaScript references to these elements. You can use descendant selector:
<fieldset id="list-of-fields">
<!-- your inputs here -->
</fieldset>
$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");
You can also use attribute selector:
$("input[name^=field]");
I'm not sure whether that's the only way but I think in plain JavaScript you'll have to fetch all input elements (document.getElementsByTagName) and then loop through array of these elements and check each element (whether it has name attribute which value starts with field).

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