You’ve got a duplicate function name, and second is overwriting the first:
function onSuccess(fieldNames_fromDoc) {
console.log('onSuccess ran!');
addFields(fieldNames_fromDoc);
}
function onSuccess(siteNames_fromDoc) {
console.log('onSuccess ran!');
addSites(siteNames_fromDoc);
}
The first definition is never saved. You could simply rename the second function, then make sure you invoke it where you want to, ie .withSuccessHandler(onSuccessNewName) or whatever.
I have two on-click functions, which are leveraged by the addFields and addSites functions to pull in two different variables and populate them to their respective dynamically generated html containers. addFields is supposed to populate “container1” and addSites is supposed to populate “container2”. For some reason though, only one of the containers is ever populated, the bottom one (container2).
I have a hunch that this is because the onClick function only invokes one of the data retrieval functions where I would need it to do both in order to populate both containers(Both containers should be populated with their respective data simultaneously). Nevertheless I am unsure of how to fix it, and I don’t understand why it would only populate container2…
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:16px;font-style:regular;" class="light">
<b>BigQuery Function</b></p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Select from the library of popular BigQuery functions to add a sheet or update one that you've already added.</p>
</div>
<div class="row">
</div>
<div class="container">
<hr>
<div class="row">
<input href="#" class="btn blue rounded" id="runQuery" type="button" value=" Get Customer Accounts " />
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Selects all accounts and adds them to a sheet called <b>'All Accounts'</b>.</p>
<div id="container1"></div>
</div>
<hr>
<div class="row">
<input href="#" class="btn blue rounded" id="runQuerySites" type="button" value=" Get Sites " />
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Selects all Sites and adds them to a sheet called <b>'All Sites'</b>.</p>
<div id="container2"></div>
</div>
</div>
</div>
<div id="container"></div>
<div class="row">
<hr>
</div>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-grey;
color: light-grey;
text-align: center;
}
</style>
<div class="footer">
<input href="#" class="btn grey small rounded" id="showSidebarIntro" type="button" value="Return to Intro" />
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript'>
var g_fieldNames;
var g_siteNames;
console.log('calling get variables....');
getFieldNames();
getSiteNames();
function addFields(fieldNames) {
console.log('addFields is running');
// Container <div> where dynamic content will be placed
var container = document.getElementById("container1");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Append a node with a random text
container.appendChild(document.createTextNode("Last update: " + fieldNames));
// Create an <input> element, set its type and name attributes
// Append a line break
container.appendChild(document.createElement("br"));
//add to global for other uses
g_fieldNames = fieldNames;
}
function addSites(siteNames) {
console.log('addFields is running');
// Container <div> where dynamic content will be placed
var container = document.getElementById("container2");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Append a node with a random text
container.appendChild(document.createTextNode("Last update: " + siteNames));
// Create an <input> element, set its type and name attributes
// Append a line break
container.appendChild(document.createElement("br"));
//add to global for other uses
g_siteNames = siteNames;
}
document.getElementById('runQuery').addEventListener('click', function () {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.runQuery();
});
document.getElementById('runQuerySites').addEventListener('click', function () {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.runQuerySites();
});
document.getElementById('showSidebarIntro').addEventListener('click', function () {
google.script.run
.showSidebarIntro();
});
function getFieldNames() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.BQaccountsUpdate();
console.log('getVariables1 ran!');
}
function getSiteNames() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.BQsitesUpdate();
console.log('getVariables2 ran!');
}
function onSuccess(fieldNames_fromDoc) {
console.log('onSuccess ran!');
addFields(fieldNames_fromDoc);
}
function onSuccess(siteNames_fromDoc) {
console.log('onSuccess ran!');
addSites(siteNames_fromDoc);
}
function onFailure(){
console.log('Failure is just an oppertunity for growth!');
}
</script>
</html>Welcome to StackOverFlow please take this opportunity to take the
Is that a rejection of my post? I honestly can’t tell.
No. I’m simply suggesting that you provide a
Gotcha. I will try to set up a testing environment for it but I can’t share the one I’m currently using. I will see what I can do.