Forum Discussion

AlexBennett3's avatar
AlexBennett3
Qrew Trainee
3 years ago

Button that redirects instead of refreshes same page.

Hello,

I've made a button using the following app as a reference:

Using Code Pages to Refresh with a Delay


I'm able to check a box, and see the circle loading based on duration set, however, I can't seem to get it to redirect back instead of refreshing.

Formula-URL Button:

//URLRoot() & "db/" & [_DBID_JOBS] & "?a=dr&dfid=2&rid=" & [Related Job]& "&z=" & Rurl()

// Creating a toggle for the Checkbox
var text toggle = If([Approved?], "false", "true");

// API URL to Add/Edit/etc.
var text urlToExecute = URLRoot() & "db/" & "bp2qqgq8x" & "?a=API_EditRecord&apptoken=" & "dw5sqifgqvf48cfibdphd5kc8ie"
    & "&rid=" & [Record ID#] & "&_fid_294=" & $toggle;

URLRoot() & "db/" & AppID() & "?a=dbpage&pageid=27" // Open code page 27
& "&url=" & URLEncode($urlToExecute)  // Pass in the URL to execute

Code Page Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loading...</title>
    <style>
        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 160px;
            height: 160px;
            -webkit-animation: spin 1s linear infinite; /* Safari */
            animation: spin 1s linear infinite;
            display: block;
            margin-left: auto;
            margin-right: auto;
            margin-top: 250px;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'> </script>
<script>
    function Run() {
        let urlParams = new URLSearchParams(window.location.search);
        let url = urlParams.get('url');
        let redirect = urlParams.get('redirect');
        let landing;

        if(redirect){
            landing = redirect;
        }else{
            landing = document.referrer;
        }

        fetch(url, {
            method: 'post',
            mode: 'no-cors',
            headers: { 'Content-type': 'text/plain' }
        }).then((response) => {

            setTimeout(function () {
                    errRdr();}
                , 2000); // # of milliseconds to pause for, 2000 = 2 seconds
        })
    }
 function errRdr(){
        // Redirects to the previous page, if this page was the previous page as well, then redirect to the app home page
        if(document.referrer && document.referrer !== window.location.href) {
            window.location.href = document.referrer;
        }else{
            window.location.href = window.location.origin + window.location.pathname;
        }
    }


    Run();
</script>

<!--<h2 class="info", style="text-align:center">Approving, Saving and Redirecting...</h2>-->
<div class="loader"></div>
</body>
</html>


Any thoughts on how I can get this to redirect back after checking and saving the page, displaying the code page for the "Loading Circle" waiting for the previous page to update before display.



------------------------------
Alex Bennett
------------------------------
APIs and custom code
Buttons