We Keep Coding

Shuffle.js reverse sorting with checkbox via prototype & addEventListener, partially working codepen

I added this inside Demo.prototype._handleSortChange to reverse the sort order if the radio is checked...
var order = true;
function reverseOrder() {
if (document.getElementById('order').checked) {
order = true;
} else {
order = false;
}
console.log('reverseOrder: '+order);
}
reverseOrder();
What I can't figure out is to call the sorting function when you check or uncheck the radio input without having to re-select the sort order dropdown.
Demo.prototype.reverseSorting = function () {
// this call resets the sort order to default, rather than just reversing the selected order...
document.getElementById('order').addEventListener('click', this._handleSortChange.bind(this));
};
Codepen https://codepen.io/midaspider/pen/ZEBwBqw

Solved it. I was looking at the wrong section as being the problem, the solution was very simple really.
Demo.prototype._handleSortChange = function (event) {
//var value = event.target.value;
var value = document.querySelector('.sort-options').value;
I realised the value of the select input wasn't being passed if I clicked the checkbox, so I changed var value to explicitly get the value from the select input rather than get the value passed from event. Now it works, I've updated the Codepen for reference in case anyone else needs this.

How in XPages CSJS should I select a ComboBox value?

I am using CSJS in the 'onChange' Event in a ComboBox, and when a user selects a value, I want an EditBox and a second ComboBox to be set (The second ComboBox value is one that is already in the list, I just want to select it).
To set the EditBox in my 'onChange' Event I used:
XSP.getElementById("#{id:fldEditBox}").value = newEditBoxValue;
But selecting a value in the ComboBox was much harder. At first I used the EditBox method:
XSP.getElementById("#{id:fldComboBox2}").value = selectedComboBoxValue;
The on screen value changed, and the ComboBox functioned normally, when the document was saved it still had the old value.
I tried all sorts of things like selectedIndex but nothing worked. Eventually I found that this:
document.getElementsByName("#{id:fldComboBox2}")[0].value = selectedComboBoxValue;
meant the change was saved, but was not visible on screen, so in my final production code I used both and it works:
XSP.getElementById("#{id:fldComboBox2}").value = selectedComboBoxValue;
document.getElementsByName("#{id:fldComboBox2}")[0].value = selectedComboBoxValue;
This seems ugly to me, there must be a better way of doing this in CSJS, does anybody know?

The way you set the value of a select element (combobox) in vanilla JavaScript is to loop through the elements options property to find the option you want to select:
var comboBox = document.getElementById("#{id:comboBox}");
for (var i=0; i < comboBox.options.length; i++) {
if (comboBox.options[i].value == "ValueYouWantSelected") {
comboBox.options.selectedIndex = i;
break;
}
}
If you have JQuery available you can do it more elegantly:
var xpageID = "#{id:comboBox}".replace(/:/gi, "\\:");
var valueYouWantSelected = "someValue";
$('#' + xpageID + ' option[value="' + valueYouWantSelected + '"]').prop('selected', true);
The xpageID variable is there because you have to escape the ':' characters that XPages puts in the generated IDs for it to work with the JQuery selector engine.

Convert Scanning For className JavaScript block to use jQuery

I have a small block I wanted to convert to using jQuery for a couple of different purposes, but mainly to reverse engineer how it works to imporve my jQuery skills. I tried taking a go at it, but could not figure out all of the conversions.
The following Javascript block iterated through the checkboxes rendered in an ASP.NET TreeView control client-side and scan for checkboxes with a className=disabledTreeviewNode (this equivilent functionality cannot be achieved purely server side).
function DisableCheckBoxes(treeviewClientID) {
var treeView = document.getElementById(treeviewClientID);
if (treeView) {
//Get all the checkboxes which are 'inputs' in the treeview
var childCheckBoxes = treeView.getElementsByTagName("input");
//Iterate through the checkboxes and disable any checkbox that has a className="disabledTreeviewNode"
for (var i = 0; i < childCheckBoxes.length; i++) {
var textSpan = childCheckBoxes[i].parentNode.getElementsByTagName("span")[0];
if (textSpan != null && textSpan.firstChild)
if (textSpan.className == "disabledTreeviewNode" || textSpan.firstChild.className == "disabledTreeviewNode")
childCheckBoxes[i].disabled = true;
}
}
}
I tried changing the following:
var treeView = document.getElementById(treeviewClientID);
to
var treeView = $('#' + treeviewClientID);
However then I could no longer call getElementsByTagName. I tried to use the jQuery equivilent of .find but then the code started to behave differently and I was a bit lost.
Can anyone assist on converting this small block to use jQuery? Comments are welcome as to if this is worthwhile or even if there is a better way.
EDIT: This class=disabledTreeviewNode is assigned server-side like this:
tn.Text = "<span class=disabledTreeviewNode>" + tn.Text + "</span>";
It's a bit of a hack/flag so that client-side code can read it and set it's parent which is the checkbox to disabled. Why the Parent? I can't directly set the class on the checkbox in code because that property is not accessible. The hack: set the TreeView object's .Text to have the <span class=disabledTreeviewNode> value and then set it's parent (the checkbox) to disabled client-side.

Many of the jQuery object's methods call .each() method behind the scene, so you don't have to iterate through the collection, jQuery does this for you.
$('#' + treeviewClientID + ' input').filter(function() {
return $(this.parentNode).find('.disabledTreeviewNode').length;
}).prop('disabled', true);

$('#' + treeviewClientID + ' span:has(.disabledTreeviewNode) input')
.prop('disabled', true);

How can I dynamically construct a document element string using a variable in Javascript?

This is driving me nuts, and I'm sure it's both possible and surely simple to do.
I have a page with a whole bunch of dynamically created forms on it. In one of my functions, I need to access one of those forms, so I pass the name of the form in a variable.
Then I need to access the name of that form using the document tree.
However, when I put in the variable, it assumes the name of the variable is the name of the form.
So this does not work:
function myAwesomeFunction(nameOfForm)
{
var selection = document.nameOfForm.nameOfInput.selectedIndex;
}
So I looked around the net and saw that I need to use bracket notation, but this doesn't work either:
function myAwesomeFunction(nameOfForm)
{
var selection = document[nameOfForm].nameOfInput.selectedIndex;
}
I also tried with some quotation action:
function myAwesomeFunction(nameOfForm)
{
var selection = document['nameOfForm'].nameOfInput.selectedIndex;
}
... but no joy.
So, where am I going wrong?
For bonus points... what if both the name of the form and the name of the particular input were both dynamic? Then what?
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var selection = document[nameOfForm][nameOfInput].selectedIndex;
}

Look them up in the forms object - this won't work since it is an array and not an object.
use document.getElementsByName
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var selection = document.getElementsByName(nameOfForm)[nameOfInput].selectedIndex;
}
or even better, set an id attribuite on the form and use document.getElementById to find the form

Try using document.getElementById(nameOfForm) (if you have the ID on the form as well)...
If you can include a jQuery reference to your page, you can easily do the following (again assuming you have the ID on the form):
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var form = $("form#" + nameOfForm);
var input = $("#" + nameOfInput + ":input");
var selection = $(input).val();
}

function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
}
try this
formname is name of the form and elemname is input label name

determining if a field exists on a form

I have a form field (a series of checkboxes) that's being created dynamically from a database, so it's possible that the field will not exist on the form (if there are no matching values in the database). I have some code that needs to execute based on whether the field exists, and pull in the values that are selected if it does exist. I can't seem to get javascript to acknowledge that this field exists, though. Here's what I've tried:
function displayAction(){
var f = document.adminForm;
var a = f.action;
if(f.prefix.value!="-") {
a = a + '&task=callExclusionDisplay&prefix=' + f.prefix.value;
}
else {
var exclusions = document.getElementById("exclusions");
if (exclusions != null){
alert("exclusions set");
a = a + '&task=callExclusionCreate&prefix=' + f.prefix.value + '&exclusions=' + exclusions.join();
}
}
alert('after if, action is ' + a);
}
The code never passes the if statement checking to see if exclusions is not null, even though when I look at the page there are a number of checkboxes named exclusions (with the id also set to exclusions). Is the issue with !=null because it's a group of checkboxes, rather than a single form element? How can I get this to work? If I skip the test for null, the code throws errors about exclusions not being defined if the database doesn't return any matching values.

You're using document.getElementById, but form elements have a name.
Try f.elements.namedItem("exclusions") instead of exclusions != null

Multiple elements in the same page cannot share an id attribute (ie. id must be unique or unset). As well, though some (older) browsers erroneously collect elements whose name matches the ID being looked for with getElementById, this is invalid and will not work cross-browser.
If you want to get a group of elements, you can give them all the same name attribute, and use document.getElementsByName to get the group. Note that the result of that will be a NodeList which is kind of like an array in that it can be iterated over.

Do all the checkboxes have the same id == exclusions?
If yes, then you must first correct that.
Before you do so, did you try checking the first checkbox and see if the if condition goes through?

if you have more than one element with the id "exclusions" it will screw up the functionality of getElementById. I would remove the duplicate "exclusions" ids from all of your elements and use getElementByName() instead, and give your group of checkboxes the name="exclusions" instead.
Edit:
But there is a much simpler way using jQuery, and it gives you some cross browser compability guarrantee. To do the same thing with jQuery do this:
var checkBoxesExist = $('[name=exclusions]').count() > 0;
Or if you have given your elements unique ID's then you can do this:
var checkbox1exists = $('#checkBox1').count() > 0;

Each element must have a unique ID.
Then, you can check just like this:
if (document.getElementById('exclusions1')) {
//field exists
}
Or if you need to loop through a bunch of them:
for (x=0; x<10; x++) {
if (document.getElementById('exclusions' + x)) {
//field X exists
}
}