Avoid making the user hit browser refresh to see updates

App Building
, , , ,
1

Apologize if this is a basic question

I have this basic problem several times in my app

My user hits a button . Event handler #1 runs a sql script which saves the edits to db. Event handler #2 runs a sql script which relects the input data for a table which was already populated. However, the updates do not show up until the user refreshes his browser.

How can retool trigger the refresh and avoid making the user perform this refresh

Thanks

2

Hi @lee_walter!

You're looking to update the table with the edits that were saved to the database? I've added something like a getDataForTableQuery.trigger() to the success event handler of the update query when I've run into that before. So when the user saves the changes, the table updates right after. Let me know if I'm missing anything here!

-Justin

1 Like
3

Thanks, @jmann
Moving the second event handler from the button to the success event handler box within the first query made the difference.

TBH not 100% sure why

4

Sure thing! Multiple event handlers aren't guaranteed to run/complete in any particular order, but the success/failure ones will only run once the query they're configured in finishes.

1 Like
5

To avoid this I set up my events in "Run Script" event handler. You can put them in order that way at least and trigger with getDataForTableQuery.trigger() like Justin said.

It ends up looking like this

processData.trigger()
getDataForTableQuery.trigger()
button1.setHidden(true)
text1.clearValue()

Justin can correct me if I'm wrong, but I'm fairly sure these run in order.

6

When you configure them in a run script event handler, the code is called in whatever order you set, however there's no guarantee on when they'll complete with them being asynchronous. For example, this script would log an empty state, set the state to a value (configured to do so after 5 seconds), and then still log an empty state since that setValue call didn't complete by the time it was run.

7

Thanks @stevenhdsdoor and @jmann

Your suggestion solved one problem but I still have an related issue

I am working on an app originally created by a colleague.

Currently the app is set up so that ,upon a row click, there is one Event Handler, triggering a JS script.
That JS modifies a state variable.
5 other scripts (4 SQL and 1 rest API) are triggered by the change in the state variable

The problem is I need (after the 5 scripts finish) for a 6th component (JS script) to run.

Things tried

  • adding a second Event Handler to run the JS. It runs but in the wrong order (as Justin indicated)
  • adding the JS as a success-based Event Handler to one of the 5 script. That sort of works, but it creates an infinite loop where the state variables keep changing which runs forever

Right now I have to require the user to click a special button which is obviously not ideal.

Inspired by Justin's last post, I might be able to have (as my second Event Handler) a JS script which waits 10 seconds (to be fairly sure all 5 scripts have finished) and then run script #6. Not ideal and not foolproof

8

You can do a bit more of a hacky work-around and have a temp state that autoincrements for each query you need to run before the last one. Then, set the other query to disabled unless that autoincrement is == whatever number of queries you want to finish before it runs.

default value of tempstate = 1

on success of query tempstate.value = tempstate.value+1

disable query if tempstate.value !>= 5

on success of the last "validated" query reset tempstate to 1
9