We Keep Coding

How can a drop down dynaically change a web app?

I am working with a Google App Script web app that is going to be used to display student micro-credentials. The goal is to make it so I can use a dropdown to choose which classes are displayed. I have created the dropdown on the web app by copying from W3Schools, but it doesn't actually function. I need some help getting the dropdown to do what I need it today.
In the example screen you can see the view I have set up and the dropdown with three classes:
The data for this web app is stored on a Google Sheet, like this:
And the doGet looks like this:
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('WebApp');
var pictures = getPictures(classSelection);
var names = getNames(classSelection);
var cutBelts = getCutBelts(classSelection);
var measureBelts = getMeasureBelts(classSelection);
var bindBelts = getBindBelts(classSelection);
var classSize = 10;
if(pictures.length<10){
classSize=pictures.length;
}
htmlOutput.pictures = pictures;
htmlOutput.names = names;
htmlOutput.cutBelts = cutBelts;
htmlOutput.measureBelts = measureBelts;
htmlOutput.bindBelts = bindBelts;
htmlOutput.classSize = classSize;
return htmlOutput.evaluate();
}
Where the variable "classSelection" is equal to the name of the class (101, 201, or 202) and the five 'get' functions (getPictures, getNames) return the picture, names, etc for that class as an array.
Okay, so here is my specific issue I need help with.
How do I get the dropdown to send data (the class) back to the doGet so that the variable "classSelection" updates and displays only the selected class?
Again, for the code I used to create the dropdown (html, css, and script) see this link, I literally copy-pasted and only changed the drop down titles 😊

Framework7 Single Searchbar for multiple Virtual Lists

The Task
Picture the typical search-bar and list of results. With framework7 in my Cordova app we can of course implement this easily even with a virtual list where elements aren't all being rendered. But what I'm trying to implement is a search-bar which will effect two virtual lists. The reason for this is as part of the app I'm creating there will be a list for new and refurbished equipment. Each list is on a different slider tab on the same page, so only one list will be seen at any one moment. But I need to use a singular search-bar to filter both.
What I've done so far
Currently the slider with two separate virtual lists is set up, the search bar is initiated. Is there any good way to allow the searchbar to apply to both lists without going crazy with the customSearch true parameter. If that is the only option how would I keep the default methods for filtering lists, I simply want to apply it twice.
I've also considered creating a second searchbar with display:none and having it copy input over from the seen searchbar. Then hidden searchbar could apply to one list while the seen one would apply to the other. But that would be really hacky and not neat at all.
Sorry If this is a bit unclear, I'm not sure how best to approach the challenge, thanks for any help

I initialise my two virtual lists, I make the search function accessable from outside of that. Then I initalise my searchbar with customSearch true, on search I use my virtual list (vl) array and search them individually using the filter and query functions available. It was a bit of a pain but this works perfectly fine. The vl[1] in this example is just a copy of vl[0] since I haven't actually set it up yet.
function virtualSearchAll(query,items){//search query
var foundItems = [];
for (var i = 0; i < items.length; i++) {
// Check if title contains query string
if (items[i].internal_descriptn.toLowerCase().indexOf(query.toLowerCase().trim()) >= 0) foundItems.push(i);
}
// Return array with indexes of matched items
return foundItems;
}
var vl = [];
vl[0] = myApp.virtualList('.vl0', {//initialise new products
items: selectProd,
template: '<li data-value="{{model_id}}" class="item-content"><div class="item-inner"><div class="item-title list-title">{{internal_descriptn}}</div></div></li>',
searchAll: function(query,items) {
return virtualSearchAll(query, items);
}
});
vl[1] = myApp.virtualList('.vl1', {//initialise test/referb products
items: [{internal_descriptn:"test desc",model_id:"wehayy"}],
template: '<li data-value="{{model_id}}" class="item-content"><div class="item-inner"><div class="item-title list-title">{{internal_descriptn}}</div></div></li>',
searchAll: function(query,items) {
return virtualSearchAll(query, items);
}
});
var mySearchbar = myApp.searchbar('.searchbar', {
customSearch: true,
searchIn: '.item-title',
onSearch: function(s) {
previousQuery = s.query;
for (let n in vl) {
let vlItems = virtualSearchAll(s.query,vl[n].items);
vl[n].filterItems(vlItems);
if(vlItems.length === 0) {//if the search has no results then show no results element else hide it
$('.vl'+n+'-not-found').show();
} else {
$('.vl'+n+'-not-found').hide();
}
}
highlightRows();
}
});
I should add that highlightRows() is part of a different functionality which needs to be refreshed on every search. You can ignore that

How to make selection on drop down list (DynamicForm) using JavaScript in SmartClient?

Here is a drop down list in SmartClient: http://www.smartclient.com/#dropdownGrid.
I want to make a selection using JavaScript. Like, I run some JavaScript in console, and the drop list will select a specific item.
I did some research, found a code snap to do this (the code is in Java, but I think there should be similar functions in JavaScript):
Record rec = perdomainGrid.getRecordList().find("domaine_id", domaine_id);
perdomainGrid.selectSingleRecord(rec);
If I want to make selection, first I need to obtain perdomainGrid object. In my above giving link, the drop down list id in GWT is exampleForm (can be seen in dropDownGrid.js tab). I try to get the object by:
var form = isc.DynamicForm.getById("exampleForm");
form does exist, but there is no getRecordList() function on it, there is selectSingleRecord() function on it though.
I try to check form's class by form.className, its value is normal. I don't know what does that mean.
I'm kind of confused now. Could somebody help me on this?

isc_SelectItem_5 has a function called pickValue(), it takes one parameter SKU. This function can be used to select item.
var itemName = "Letter Tray Front Load Tenex 200 Class Blk #23001";
var data = isc_SelectItem_5.optionDataSource.cacheData;
var targetSKU = data.find(function(e) {
if (e.itemName == itemName) {
return e;
}
}).SKU;
isc_SelectItem_5.pickValue(targetSKU);

TinyMCE grab array data

I have a TinyMCE button and it works apart from passing the data from the media gallery into a variable (to edit into the content).
I have the following:
window.on('select', function(){
var files = window.state().get('selection').toArray();
console.log(files.id);
});
which doesn't work, but if I change too:
window.on('select', function(){
var files = window.state().get('selection').toArray();
console.log(files);
});
I get "array (object)" in the console.log and by opening the object I can see id is one of the "fields" available and has a value.
The basic idea is the button (before this code) opens a media library (WordPress) and on selection of the images, it passes the ID's of the images to TinyMCE to print them (later) and the only part that's not working is the above.
Anyone able to point me in the right direction (vanilla js not my forte and first time using tinymce)

You simply have to iterate the files because there are multiple file in this array.
Try this code.
window.on('select', function(){
var files = window.state().get('selection').toArray();
var images = files;
for (var k in files) {
var file = files[k];
console.log(file.id);
}
});

how can Firefox add-on access user's bookmarks folders

I'm writing some Firefox add-on code that manipulates the user's bookmarks.
I started with the "Searching Bookmarks" code from https://developer.mozilla.org/En/Places_Developer_Guide, and ended up writing the following code, which works...
var folders = [bookmarksService.bookmarksMenuFolder, bookmarksService.toolbarFolder, bookmarksService.unfiledBookmarksFolder];
var bookmarks = [];
for (var i = 0; i < 3; i++) {
query.setFolders([folders[i]], 1);
var result = historyService.executeQuery(query, options);
var rootNode = result.root;
rootNode.containerOpen = true;
getNode(rootNode, bookmarks);
rootNode.containerOpen = false;
}
The problem with this code is that it hard-codes the 3 default bookmark folders. I'd like the code to handle the case in which the user has created their own bookmark folders.
How can this code be changed so that it loops over all of the bookmark folders?

I think you're getting confused with the "folder" terminology here. The three hard-coded items you have in your code block are all you need. Any bookmarks the user creates will be located in one of these three places. You can see this in action by opening up the bookmarks editor in Firefox (Ctrl + Shift + B). In the tree pane on the left, select the All Bookmarks item, and note that there are only 3 (possibly 4) items underneath it:
Bookmarks Toolbar
Bookmarks Menu
Unsorted Bookmarks
If you right-click the "All Bookmarks" top-level item, you'll note that there is no "Create Folder" option at this level. Any user-created bookmarks are below the sub-items listed at this level.
The Places Developer Guide lists one additional top-level folder (tagsFolder), but I don't think you need to worry about that one. I can't imagine a bookmark existing there and not in one of the other three locations.