Javascript in Formula URL Help

  • 0
  • 1
  • Question
  • Updated 1 month ago
  • In Progress
From other posts I was able to put together the following code for a Formula URL button.  This accomplishes the main actions of calling a 3rd party REST API and then reloading the current page.   

var text URL= "https://hooks.zapier.com/hooks/catch/XXXXXXXXXXX?;


"javascript:" &
"$.get('" & 
$URL & 
"',function(){" &
"location.reload(true);" &
"});" 
& "void(0);"

I'd like to know if its possible to do one of two (or both) additional actions

1.  Is it possible to add a delay before the page reloads?
2.  Is it possible to show a pop-up box the user would click on and then reload the page

I basically just need to buy a second or two while the REST API that was called does its thing and then ultimately updates a record back in Quickbase before the page reload occurs

Thanks for the help
Photo of Scott Pugh

Scott Pugh

  • 200 Points 100 badge 2x thumb

Posted 1 month ago

  • 0
  • 1
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
For the first one is straight forward, below is the timeout function, i use a fat arrow function with no input, and call location.reload(true) after 2 seconds or 2000 milliseconds.

setTimeout(()=> location.reload(true),2000) 
Photo of Scott Pugh

Scott Pugh

  • 200 Points 100 badge 2x thumb
Josh- thanks for the reply.   A small change- if instead of doing a reload of a page I want to redirect the user to a different quickbase page... what would the full syntax be?  currently I have

var text URL= "https://hooks.zapier.com/hooks/catch/XXXXXXXXXXX="

"javascript:" &
"$.get('" & 
$URL & 
"',function(){" &
"setTimeout(()=> location.reload(true),5000)  " &
"});" 
& "void(0);"
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
As for the popup box, there are so many ways to do this, for the sake of expedience have a look at Dans pastie in the below link, his pastie collection is a good starting point in extreme cases or a good resource to save time in general as you are starting your Javascript adventure in quickbase.

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=7&rl=w2v

Photo of Rob White IV

Rob White IV

  • 948 Points 500 badge 2x thumb
$.get is shorthand for a jquery Ajax (Asynchronous JavaScript and XML) call.  The asynchronous nature of this allows for exactly what you are looking to do in a non-blocking way.

You just need hit up a .then() or similar after your API call.

Here are some docs:

https://api.jquery.com/jquery.get/
More stuff: https://api.jquery.com/category/ajax/

Hope this helps,

~Rob
Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
there's no need to use .then in this case, the get function in Jquery allows a call back function after completion. Scott has demonstrated the correct use of the call back function in his example. He just needs to use the block per below:
"javascript:" &
"$.get('" & 
$URL & 
"',function(){" &
"setTimeout(()=> location.reload(true),2000)  location.reload(true);" &
& "void(0);"
"});"