We Keep Coding

refresh drop down list after button click in web app

I have a web app with one drop down list and 2 buttons. The drop down list get values from a sheet. The buttons write back in the sheet. The script I have works fine with that:
<script>
$(function() {
$('#txt1').val('');
google.script.run
.withSuccessHandler(updateSelect)
.getSelectOptions();
});
function updateSelect(opt)
{
var select = document.getElementById("sel1");
select.options.length = 0;
for(var i=0;i<opt.length;i++)
{
select.options[i] = new Option(opt[i],opt[i]);
}
}
function listS() {
const selectElem = document.getElementById('sel1')
const index = selectElem.selectedIndex;
if (index > -1) {
const e = document.getElementById("sel1");
const value = e.options[index].value;
const body = { index: index, value: value };
google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);
}
}
document.getElementById("but1").addEventListener("click",listS);
function yourCallBack(response) {
}
</script>
In Java script:
function getSelectOptions()
{
var ss=SpreadsheetApp.openById('1onuWoUKh1XmvEAmKktwJekD782BFIru-MDA0omqzHjw');
var sh=ss.getSheetByName('Database');
var rg=sh.getRange(2,1,sh.getLastRow()-1,8);
var vA=rg.getValues();
var useremail = Session.getActiveUser().getEmail();
var opt=[];
for(var i=0;i<vA.length;i++)
{
if(vA[i][1] == "Pending Approval"){
if(vA[i][7]+"#xxx.com" == useremail || vA[i][7]+"#xxx.com" == useremail) {
opt.push(vA[i][3]+" REQ ID: "+vA[i][0]);
}
}
};
if (opt.length == 0) {opt.push("You do not have pending requests")};
return opt;
}
function doGet() {
var output = HtmlService.createHtmlOutputFromFile('list');
return output;
}
function yourServerSideFunc(body) {
var value = body["value"];
var ss = SpreadsheetApp.openById('1onuWoUKh1XmvEAmKktwJekD782BFIru-MDA0omqzHjw');
var sh = ss.getSheetByName('Database');
var rg=sh.getRange(1,1,sh.getLastRow()-1,4);
var vA=rg.getValues();
var str = "Approved";
for(var i=0;i<vA.length;i++)
{
if(vA[i][3]+" REQ ID: "+vA[i][0] == value) {
sh.getRange(i+1, 2).setValue(str);
}
};
return ContentService.createTextOutput(JSON.stringify({message: "ok"})).setMimeType(ContentService.MimeType.JSON);
Now I am trying to regenerate the drop down list values after the button is clicked. I tried to add
var output = HtmlService.createHtmlOutputFromFile('list');
return output;
in yourServerSideFunc(body) function to regenerate the HTML but does not work. I have tried to force a HTML refresh, but also did not work.
How can I easily re-trigger the generation of the drop down list items? Worst case scenario it is ok to refresh the whole page, but it should be simple to regenerate the drop down list since I have already the code for it.

I ended up with this work around.
function listS() {
const selectElem = document.getElementById('sel1')
const index = selectElem.selectedIndex;
if (index > -1) {
const e = document.getElementById("sel1");
const value = e.options[index].value;
const body = { index: index, value: value };
google.script.run.withSuccessHandler(yourCallBack).yourServerSideFunc(body);
//ADDED:
var select = document.getElementById("sel1");
select.options[index] = new Option("Approved! Please refresh","Approved! Please refresh");
selectElem.selectedIndex = index;
}
}
It does not really meet the original goal to refresh the list from the sheet. It would be great if someone else posted a solution to call the server function. I tried to add google.script.run.doGet() and similar, but it seems that it does not call the server side functions properly.

Why searchbox become lagging when typing word to search data in CSV?

I developed the store locator using open street map and leaflet. The problem is when I want to type in searchbox it will become lagging to finish the word. That store locator read from the CSV file that has 300++ data. Below is the code for the searchbox:
var locationLat = [];
var locationLng = [];
var locMarker;
var infoDiv = document.getElementById('storeinfo');
var infoDivInner = document.getElementById('infoDivInner');
var toggleSearch = document.getElementById('searchIcon');
var hasCircle = 0;
var circle = [];
//close store infor when x is clicked
var userLocation;
$("#infoClose").click(function() {
$("#storeinfo").hide();
if (map.hasLayer(circle)) {
map.removeLayer(circle);
}
});
var listings = document.getElementById('listingDiv');
var stores = L.geoJson().addTo(map);
var storesData = omnivore.csv('assets/data/table_1.csv');
function setActive(el) {
var siblings = listings.getElementsByTagName('div');
for (var i = 0; i < siblings.length; i++) {
siblings[i].className = siblings[i].className
.replace(/active/, '').replace(/\s\s*$/, '');
}
el.className += ' active';
}
function sortGeojson(a,b,prop) {
return (a.properties.name.toUpperCase() < b.properties.name.toUpperCase()) ? -1 : ((a.properties.name.toUpperCase() > b.properties.name.toUpperCase()) ? 1 : 0);
}
storesData.on('ready', function() {
var storesSorted = storesData.toGeoJSON();
//console.log(storesSorted);
var sorted = (storesSorted.features).sort(sortGeojson)
//console.log(sorted);
storesSorted.features = sorted;
//console.log(storesSorted)
stores.addData(storesSorted);
map.fitBounds(stores.getBounds());
toggleSearch.onclick = function() {
//var s = document.getElementById('searchbox');
//if (s.style.display != 'none') {
//s.style.display = 'yes';
//toggleSearch.innerHTML = '<i class="fa fa-search"></i>';
//$("#search-input").val("");
//search.collapse();
//document.getElementById('storeinfo').style.display = 'none';
//$('.item').show();
//} else {
//toggleSearch.innerHTML = '<i class="fa fa-times"></i>';
//s.style.display = 'block';
//attempt to autofocus search input field when opened
//$('#search-input').focus();
//}
};
stores.eachLayer(function(layer) {
//New jquery search
$('#searchbox').on('change paste keyup', function() {
var txt = $('#search-input').val();
$('.item').each(function() {
if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
I dont know what is the cause of the lag in the search box. It is something wrong in code or the csv file? Thank you

Every iteration of $('.item').each is causing a layout change because $(this).hide() or $(this).show() causes the item to removed/added to the DOM as the style is set to display:none back and forth. DOM manipulations and the corresponding layout changes are expensive.
You can consider accumulating the changes and doing one batch update to the DOM using a function like appendChild

Filter a child picklist in CRM 2011

I'm trying to convert javascript code from CRM 4.0 to CRM 2011.
I'm having problems with a picklist filter.
My function is on the onchange of the parent picklist. It works the first time but the second it erase everything from my child picklist.
This is the part where I suppose to reset the picklist
if(!oSubPicklist.originalPicklistValues)
{
oSubPicklist.originalPicklistValues = oSubPicklist.getOptions();
}
else
{
oSubPicklist.getOptions = oSubPicklist.originalPicklistValues;
oSubPicklist.setOptions = oSubPicklist.originalPicklistValues;
}
And this is the part where i remove all the option not related:
oTempArray is an array with the options that i want to keep. If a check the "oSubPicklist.getOptions.length" the value is the same that my original picklist.
for (var i=oSubPicklist.getOptions.length; i >= 0;i--)
{
if(oTempArray[i] != true)
{
Xrm.Page.getControl("new_product").removeOption(i);
}
}
Ideas?
Edit: I solved declaring a global var with the originalPickList in the onLoad event and:
oSubPicklist.clearOptions();
for (var i=0; i< oSubPicklist.originalPicklistValues.length; i++)
{
for (var j=0; j< oDesiredOptions.length; j++)
{
if (i == oDesiredOptions[j])
{oSubPicklist.addOption(oSubPicklist.originalPicklistValues[i]);}
}
}

Your code is not very clear to me: May be you could paste all your function code for better understanding but:
This is how you get the options from PickList in CRM 2011
var myOptionSet = Xrm.Page.ui.controls.get("new_product") //get Control
var optionsSet = myOptionSet .getAttribute().getOptions(); //get Options
preferredTimeOptionSet.clearOptions(); //Clear all options
//Create a new Option
var opt1 = new Option();
opt1.text = "one";
opt1.value = 1;
//Add Option
myOptionSet.addOption(opt1);
//Remove Option
myOptionSet.removeOption(1);
Good Example here

Here is another way to do Parent/Child picklists:
function dynamicDropdown(parent, child) {
filterPicklist(parent, child);
}
function parentListFilter(parent, id) {
var filter = "";
if (getParentCode(parent) != "") {
filter = getParentCode(parent);
} else {
// No [ ] match
}
return filter;
}
function filterPicklist(parent, child) {
var parentList = Xrm.Page.getAttribute(parent).getValue();
var childListControlAttrib = Xrm.Page.getAttribute(child);
var childListOptions = childListControlAttrib.getOptions();
var childListControl = Xrm.Page.getControl(child);
var codeToFilterListOn = parentListFilter(parent, parentList);
if (codeToFilterListOn != "") {
childListControl.clearOptions();
for (var optionIndex in childListOptions) {
var option = childListOptions[optionIndex];
// Ignore xx and check for Match
if (option.text.substring(0, 2) != "xx" && option.text.indexOf(codeToFilterListOn) > -1) {
childListControl.addOption(option);
}
}
} else {
// Didn't match, show all?
}
}
function getParentCode(parent) {
//Get Parent Code Dynamically from inside [ ]
var filter = "";
var parentValue = Xrm.Page.getAttribute(parent).getText();
if (parentValue && parentValue.indexOf("]") > -1) {
var parentCode = parentValue.substring(parentValue.indexOf("[") + 1, parentValue.indexOf("]"));
if (parentCode) {
filter = parentCode + " | ";
} else {}
}
return filter;
}
See more here: Parent/Child

Changing ''pricelevelid'' field based on another field

im so new to javascript, my situation is beginner of the beginner :)
But i have to write a code on mscrm 2011 order entity.
i have two field, pricelevelid and new_taxincl(radio button). I want to change value in pricelevelid field based on selection of new_taxincl field.
If user select ''yes'' i want to fill pricelevelid field with ''USD -Tax Included-'', ''no'' ''USD -without tax-''. This have to run onChange event.
I could not write the correct code so far.
Any help will be fine for me.
Thanks.
PS: new_vrg is a field in the pricelevel entity and has same value with new_taxincl field in the order entity.
here is my code:
function callRetrievePList() {
var field = Xrm.Page.data.entity.attributes.get("new_taxincl");
if ((field == null) || (field.getValue() == null) || (field.getValue()[0] == null) || (field.getValue()[0].id == null))
return;
var plistfield = Xrm.Page.data.entity.attributes.get("pricelevelid");
if (plistfield != null && plistfield.getValue() != null)
return;
var options = "$select=PriceLevelId,Name&$filter=new_vrg/Id eq (guid'" + (field.getValue()[0]).id + "')";
SDK.REST.retrieveMultipleRecords("PriceLevel", options, retrievePListCallBack, errorCallBack, completeCallBack);
}
function retrievePListCallBack(retrievedStock) {
var plistfield = Xrm.Page.data.entity.attributes.get("pricelevelid");
if (plistfield != null && plistfield.getValue() != null)
return;
for (var i = 0; i < retrievedStock.length; i++) {
var stock = retrievedStock[i];
var lookupReference = [];
lookupReference[0] = {};
lookupReference[0].id = stock.PriceLevelId;
lookupReference[0].entityType = "pricelevel";
lookupReference[0].name = stock.Name;
plistfield.setValue(lookupReference);
return;
}
}
function errorCallBack(errorObject) {
}
function completeCallBack() {
}

Below code may help you:
To get a radio button in CRM JavaScript:
function TaxIncludedRadioButton_OnChange()
{
var taxInclBtn= Xrm.Page.ui.controls.get("new_taxincl").getAttribute().getValue();
var lookup = new Array();
lookup[0] = new Object();
if(taxIncludeRdBtn==true)
{
lookup[0].id = yourrecorid1;
lookup[0].name = 'USD -Tax Included-';
lookup[0].entityType = entityname;
Xrm.Page.getAttribute("pricelevelid").setValue(lookup);
}
else if(taxIncludeRdBtn==false)
{
lookup[0].id = yourrecorid2;
lookup[0].name = 'USD -Without-tax';
lookup[0].entityType = entityname;
Xrm.Page.getAttribute("pricelevelid").setValue(lookup);
}
}
Register the above function OnChange event of you new_taxincl radio button

getElementById Another Question

As an extension question that Felix Kling answered so brilliantly I now need to do a two part check on the data table deployed.
Can anyone tell me how to add to the code below to allow me not only to copy the values of the pcode fields into an array but to check if there is a check in the checkbox with a corresponding row number i.e. route2 is check then add to the array but if route3 is not checked then exclude it.
function GetRoute()
{
var from = document.getElementById('inpAddr').value;
var locations = [from];
for(var i = 2; i <= 400; i++) {
var element = document.getElementById('pcode' + i);
if(element === null) { break; }
locations.push(element.innerHTML);
}
var options = new VERouteOptions();
options.DrawRoute = true;
options.RouteColor = new VEColor(63,160,222,1);
options.RouteWeight = 3;
options.RouteCallback = onGotRoute;
options.SetBestMapView = true;
options.DistanceUnit = VERouteDistanceUnit.Mile;
options.ShowDisambiguation = true;
map.GetDirections(locations,options);
}
Thanks in advance!
Justin

for( var i = 2 ; (element = document.getElementById('pcode' + i)) && i <= 400; i++ )
{
if( document.getElementById('route' + i).checked )
{
locations.push( element.innerHTML );
}
}

function GetRoute() {
var from = document.getElementById('inpAddr').value;
var locations = [from];
// My Modification Starts Here....
var maxLoopValue = 400;
var pcode, currentRoute, nextRoute;
for(var i = 2; i <= maxLoopValue; i++) {
pcode = document.getElementById('pcode' + i);
currentRoute = document.getElementById('route' + i);
// Make sure the currentRoute is 'checked'
if (currentRoute.checked) {
// Make sure there is a 'next' route before trying to check it
if (i < maxLoopValue) {
nextRoute = document.getElementById('route' + (i+1));
// Make sure the 'next' route is 'checked'
if (nextRoute.checked) {
locations.push(element.innerHTML);
}
} else {
// This is the last route, since we know it's checked, include it
locations.push(element.innerHTML);
}
}
}
// My Modification Ends Here....
var options = new VERouteOptions();
options.DrawRoute = true;
options.RouteColor = new VEColor(63,160,222,1);
options.RouteWeight = 3;
options.RouteCallback = onGotRoute;
options.SetBestMapView = true;
options.DistanceUnit = VERouteDistanceUnit.Mile;
options.ShowDisambiguation = true;
map.GetDirections(locations,options);
}