Forum Discussion

JasonJohnson's avatar
JasonJohnson
Qrew Assistant Captain
7 years ago

How do I Edit a form and click on a button to perform API command(s) WITHOUT saving before clicking on the button?

I use Rich Text formula buttons and the code for returning to the same location the button was used for returning to where the button was pressed. Like below

"<a " & $style & " href=\"javascript:" & "$.get('" & $URL & "', function(){" & "location.reload();" &
 "});" & "void(0);\"> Start Configuration </a>"

But when used on a form if you have edited you have to save then click on the button. I found this string of code

onclick='saveButton.click();'

Then placed the code in the button like below and it saves and executes the API commands that I use in the $URL .

"<a " & $style & " href=\"javascript:" & "$.get('" & $URL & "', function(){" & "location.reload();" &
 "});" & "void(0);\"onclick='saveButton.click();'> Start Configuration </a>"

On a side note I got into the habit of using the Rich Text Formula instead of the standard URL for buttons to mouse over coloring and to dynamically name buttons. Such as having a check in button for technicians but using the technician name in the button. This code did present a small issue that I used a variable to resolve. Example below.

var text lead = [Technician Name];


"<a " & $style & " href=\"javascript:" & "$.get('" & $URL & "', function(){" & "location.reload();" &
 "});" & "void(0);\"onclick='saveButton.click();'><center> Check In <br> "& $lead &"</center> </a>"



APIs and custom code
App builders
Tips and tricks
  • hhersch's avatar
    hhersch
    Quickbase Staff
    7 years ago
    Hi Jason - while there are currently workarounds and non-native solutions, Quick Base does not support custom JavaScript-based ajax operations on the page. Would you mind sharing the use case of why this is interesting? Also, have you looked at QB Automations instead of injecting your own JavaScript?
    • JasonJohnson's avatar
      JasonJohnson
      Qrew Assistant Captain
      7 years ago
      I have emailed a response to you. Let me know if it was not received.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      7 years ago
      HH>Quick Base does not support custom JavaScript-based ajax operations on the page

      Luckily, all browsers support "JavaScript-based ajax operations on the page" so it is irrelevant where or not QuickBase supports it. In fact, all modern web applications are predicated on this feature (AJAX calls without reloading the page).

      Instead of jamming JavaScript into your formulas you should use the IOL technique and place all your script in a code page. Writing formulas that directly include JavaScript is only going to introduce syntax errors and difficult debugging sessions because of all the character escaping that is required. It is simply not worth the trouble to place hand crafted script directly into QuickBase formulas. The IOL technique provides a clean and easy to use method of jumping out of the formula scope and placing all your functional JavaScript into a code page.

      When using a button with the IOL technique you append a <a> element to the IOL field using a formula like thisL

      [iol] & "module.js" & [/iol]
      &
      "<a class='QBU_Button Vibrant Success' " &
      "  data-rid='" & [Record ID#] & "'" &
      "  data-name='" & [Name] & "'" &
      ">Button</a>"

      This formula loads the code page "module.js" and further displays a button with the label "Button". Field values (here [Record ID#] and [Name]) are stamped into the <a> element as data attributes.

      Within the code page you can detect button click events and retrieve the data attributes as indicated below:
      (function(){
        var dbid = "";
        var dbidTable1 = "";
        var apptoken = "";
        $.ajaxSetup({data: {apptoken: apptoken}});
        $("a.QBU_Button").on("click", function(event) {
          var rid = this.dataset.rid;
          var name = this.dataset.name;
          console.log("rid=", rid);
          console.log("name=", name);
          // your custom code here
        });
      })();

      One issue you should keep in mind is that if your API  calls changes a field value that is currently being displayed you should immediately reload the page so that you are not displaying the old value of a field. Using the API from a page should not create a situation where stale information is being displayed to the user.