Database call from Toolbox Run Javascript Action after page load

Hey all,

I’m using the Toolbox plugin to run javascript on page load. That javascript defines variables that require a database call and creates an event listener to redefine those variables with another database call if a button is clicked. When the button is clicked (triggering the code in the event listener), it seems to not be making a new database call but is simply referencing the data from the initial call on page load. I made a video below that explains this issue in depth and shows the code I’m using. Any insight or help would be greatly appreciated.

It seems like the issue might be related to closure and scope in JavaScript. When you define a variable in a function, it has function scope, which means it is only accessible within that function. If you want to make that variable accessible in other functions, you need to define it in a higher scope, such as the global scope.

One way to resolve this issue is to make the variables global, so they can be updated by the event listener. You can do this by declaring the variables outside of the function and then updating their values within the function.

Another approach could be to use a state management library like React or Vue.js, which provides a way to manage the state of your application and make data updates easier to manage.

If you could share your code, I would be happy to take a closer look and provide a more specific solution for your problem.

I appreciate the input, but I don’t think the global variable issue is it. The relevant variables are all global, and the setEvents method works fine with static text. It’s only when I use dynamic text that it stops updating when the method is called. Here’s the relevant code, I appreciate any insight:

//Resources and Events Data
var ids = [1,2,3];
var names = [‘Plane 1’, ‘Plane 2’, ‘Plane 3’];
var resids = [1, 2, 3];
var resstart = [‘2023-02-08T05:00’, ‘2023-02-08T08:00’, ‘2023-02-08T11:00’];
var resend = [‘2023-02-08T07:00’, ‘2023-02-08T10:00’, ‘2023-02-08T13:00’];
var restitle = [‘test 1’, ‘test 2’, ‘test 3’];
var resdesc = [‘Jane Doe’, ‘John Smith’, ‘Frank Sinatra’];
var rescolor = [‘blue’, ‘green’, ‘red’];

var outputResource = [];
var outputData = [];

//Page Load Resources
for (var i = 0; i < ids.length; i++) {
outputResource.push({
‘id’: ids[i],
‘name’: names[i]
});
};
console.log(outputResource);

//Page Load Events
for (var i = 0; i < resids.length; i++) {
outputData.push({
‘id’: resdesc[i],
‘start’: resstart[i],
‘end’: resend[i],
‘resource’: resids[i],
‘title’: restitle[i],
‘color’: rescolor[i]
});
};
console.log(outputData);

//SetEvents
document.getElementById(‘set-events’).addEventListener(‘click’, function () {
ids = [1,2,3];
names = [‘Plane 1’, ‘Plane 2’, ‘Plane 3’];
resids = [1, 2, 3, 2];
resstart = [‘2023-02-08T05:00’, ‘2023-02-08T08:00’, ‘2023-02-08T11:00’, ‘2023-02-08T14:00’];
resend = [‘2023-02-08T07:00’, ‘2023-02-08T10:00’, ‘2023-02-08T13:00’, ‘2023-02-08T16:00’];
restitle = [‘test 1’, ‘test 2’, ‘test 3’, ‘test 4’];
resdesc = [‘Jane Doe’, ‘John Smith’, ‘Frank Sinatra’, ‘Joe Montana’];
rescolor = [‘blue’, ‘green’, ‘red’, ‘blue’];

outputResource = [];
outputData = [];

for (var i = 0; i < ids.length; i++) {
outputResource.push({
‘id’: ids[i],
‘name’: names[i]
});
};
console.log(outputResource);

for (var i = 0; i < resids.length; i++) {
outputData.push({
‘id’: resdesc[i],
‘start’: resstart[i],
‘end’: resend[i],
‘resource’: resids[i],
‘title’: restitle[i],
‘color’: rescolor[i]
});
};
inst.setEvents(outputData);
console.log(outputData);
});

@eli.marchbanks The issue here is that your code doesn’t retain the dynamic search. So your event listener is created properly but essentially with static data from the dynamic search AS IT IS when the page is loaded.

You need to add a JS to Bubble element that is triggered from the event listener in order to set the events with current data. Let’s say you name the JS to Bubble function set_events. You would trigger that from your event listener like so.

document.getElementById(‘set-events’).addEventListener(‘click’, function () {bubble_fn_set_events()})

Add a new workflow event that is triggered from the JS to Bubble element and use the Run Javascript action in that workflow to run the event listener code you are currently coding directly in the script that’s running when the page is loaded.

That will pull the dynamic data available when the button is clicked.