We Keep Coding

Issues with manipulating a drop down in Javascript

I'm currently using vanilla JS to match a given string, and then populate a drop down based on the match. I want to be able to click the drop down once to populate the drop down, but I currently have to click twice to then select the option, which would then add the same entries again (which isn't so much of an issue as once an option was selected, I can always reset the length to 0 so the user would likely not notice). I was thinking perhaps I need two event listeners instead of one but unsure of what direction to go or perhaps a "clickdown" and "clickup" event (if they even exist for mouse clicks?).
I'm still very much a beginner and not sure if what I am wanting to achieve is possible in one click or perhaps my approach is incorrect, so any pointers would be great.
document.getElementById('form').addEventListener('click', function() {
function addType(mactype) {
var type = document.getElementById('mode');
var option = document.createElement('option');
option.text = mactype;
type.add(option);
}
var macinput = MACinput.value;
var macoutput = MACoutput.value;
if (macinput.length > 0) {
var pattern = new RegExp("....-....-....");
if (pattern.test(macinput) == true) {
addType("Huawei -> Colon");
addType("Huawei -> HP");
addType("Huawei -> String");
}
}

How to activate Cascading Dropdown auto-selection using pure javascript

I'm trying to select a dropdown item via an Execute Javascript macro inside Keyboard Maestro. The code works to select and validate the dropdown item, but in the page I use this with, there are other dropdowns that should auto-populate based on the selection. When I click a dropdown item manually, the other dropdowns update accordingly. Via the javascript I'm using, it selects the item but leaves the other dropdowns. I need to use pure javascript and not jquery. Does anyone have any ideas on how to get the page to react based on the javascript selection?
// variable to enter into dropdown
var vDropdownInput = (document.kmvar.vZEROInput);
// variable to get the Element by ID
var objSelect = document.getElementById("web-selection_"+document.kmvar.vZEROIndex+"_");
// function to do the work
setSelectedValue(objSelect, vDropdownInput);
// function definition
function setSelectedValue(object, value) {
for (var i = 0; i < object.options.length; i++) {
if (object.options[i].text === value) {
object.options[i].selectedIndex = i;
return;
}
}
// Throw exception if option `value` not found.
var tag = object.nodeName;
var str = value;
return str;
}
edit: I found this related post but I just don't get the proposed solutions.
Select item in CascadingDropDown via JavaScript & invoke update

How do I programmatically force an onchange event on an input?
This answered my question.
var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);

Select2 v4 .val() does not maintain order of elements in data object

I have a select2 (v4) select box where people are choosing codes, and the order must be maintained. This works great when they originally add the elements:
However, this is a popup that is used for many different elements on the page. That means I must clear this array and load it with stored data objects on the fly.
My data object preserves the order as var codeArray = ['7990', '268'].
But when I use:
$(element).val(codeArray).trigger("change")
I get the following:
How can I maintain the order on load? Is there a sneaky workaround?

Okay, the fix was pretty hacky, but I'll post what I have:
function rebuildForm(codeArray) {
clearFormContents();
$.each(codeArray, function(j,obj){
var found = false;
code_list.some(function(el){
if (el.value == obj) {
var str = (el.text).split(")");
$("element option[value=" + el.value + "]").remove();
$(element).append(new Option("(" + el.value + ")" + str[1] , obj));
found = true;
}
})
if (!found) {
$(element).append(new Option("(" + obj + ") Custom Tag" , obj));
}
$(element).val(codeArray).trigger("change");
}
Sorry if the above code doesn't work perfectly, I had to clean it up to remove some fluff and hide the client/project identity.
Basically, on the rebuild of the form, I clear the old form contents then loop through the array grabbing each value/object. Then, if the value exists in the original code list of options in the select2 element I delete the option and rebuild it. This appends it to the bottom of the element list so that the order is maintained in the box. I also add any free form text tags using the 'found' boolean.
Once the new list of options are created in the "correct" order, then I am able to add the values back into the select input DOM element and trigger the select2 change to build the tags.
This thread posted by #RohitS in the comments showed the concept: https://github.com/select2/select2/issues/3106
I just adapted it to my needs.

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.

Search Alt Text, hide mismatches with jQuery / JavaScript

I am trying to implement a rudimentary site search for a page of images. The search function should go through each element in a specific class looking for a word match in the image's alt text.
I think my issue is with binding the function to a form submit but I can't seem to figure out where I went wrong.
I have tried this with jQuery (fiddle:http://jsfiddle.net/u2oewez4/)
$(document).ready(function(){
$("#search-form").click(function() {
var searchQuery = "Text";
$.each('.single-image', function(){
$(this).children("img").attr("alt"):contains(searchQuery).hide("slow");
});
});
});
As well as with JavaScript (fiddle:http://jsfiddle.net/m3LkxL1c/)
function submitSearch(){
// create regex with query
var searchQuery = new RegExp(document.getElementById('search-input').value);
// create array of content to look for query in
var content = document.getElementsByClassName("single-image");
// create an array to put the results to hide in
var hideResults = [];
var imagesToHide = document.getElementsByClassName("single-image-hide");
// get the current display value
var displaySetting = imagesToHide.style.display;
for (i=0; i<content.length; i++) {
if (! searchQuery.test(content[i].firstChild.firstChild.nodeValue)) {
// if the query not found for this result in query
hideResults.push(content[i]);
// push to the hideResults array
content[i].className = "single-image-hide";
// change class name so CSS can take care of hiding element
document.getElementById("form-success").style.display = 'inline-block';
alert(searchQuery); // for debugging
return false; // results will not stick without this?
}
}
// set display to hidden
if(displaySetting == 'inline-block'){
imagesToHide.style.display = 'none'; // map is visible, so hide it
}
else{
imagesToHide.style.display = 'inline-block'; // map is hidden so show it
}
}
FYI I have built the JQuery off a few StackOverflow threads, so I've definitely tried my best to find a similar example. (Similar functions: here, and here)

Okay, various bug fixes, most of which I noted in the comments already because I wanted to make sure not to miss any. You need to read the details for in the jQuery documentation much more closely. That'll fix a lot of the problems you're having, like using the wrong each function. Other things will come with time. Keep studying, and READ THE DOCUMENTATION.
$("#search-form").click(function() {
//this gets the val for the search box, then puts the Imgs in a variable so we don't have to use the selector multiple times. Selectors are expensive time-wise, stored variables are not.
var searchQuery = $("#search-text").val(),
singleImgs = $('.single-image');
//you have to show the images for each new iteration, or they'll remain hidden
singleImgs.show();
singleImgs.each(function(){
//get alt attribute
var thisAlt = $(this).find("img").attr("alt");
//if thisAlt does not contains searchQuery (use > instead of === for does)
if(thisAlt.indexOf(searchQuery) === -1){
$(this).hide();
}
});
});
working fiddle