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

  • 0
  • 1
  • Question
  • Updated 1 month ago
  • Acknowledged
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>"



Photo of Jason

Jason

  • 1,012 Points 1k badge 2x thumb

Posted 1 month ago

  • 0
  • 1
Photo of Harrison Hersch (QB)

Harrison Hersch (QB), Quick Base Sr. Product Manager (Platform)

  • 676 Points 500 badge 2x thumb
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?
Photo of Jason

Jason

  • 1,012 Points 1k badge 2x thumb
I have emailed a response to you. Let me know if it was not received.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
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.