AJAX PUT invalid request

API & Customization
1

I am having some trouble with utilising AJAX to update a field within a record.

It seems that it mostly works but then cannot complete the action of updating the field with the sample data.

I get the console logs:
PUT https://api.knack.com/v1/pages/scene_XXX/views/view_YYY/records/YYY 400 (Bad Request)
Uncaught Error.
{“errors”:[{“message”:“Invalid request”}]}


function updateFieldWithHello(recordId) {
  $.ajax({
    url: "https://api.knack.com/v1/pages/scene_XXX/views/view_YYY/records/" + recordId, // Scene/View of the form
    type: "PUT", 
    headers: {
      "X-Knack-Application-Id": Knack.application_id,
      "X-Knack-REST-API-Key": "knack",
      "Authorization": Knack.getUserToken(),
      "Content-Type": "application/json"
    },
    data: JSON.stringify({
      field_XXX: "hello" 
    }),
    success: function(response) {
      console.log('Record Updated');
    },
    error: function(jqXHR, exception) {
      var msg = '';
      if (jqXHR.status === 0) {
        msg = 'Not connected.\n Verify Network.';
      } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
      } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
      } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
      } else if (exception === 'timeout') {
        msg = 'Time out error.';
      } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
      } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
      }
      console.log(msg);
    }
  });
}

// Listen for form submission to update the record with "hello"
$(document).on('knack-form-submit.view_XXX', function(event, view, record) {
  const recordId = record.id;
  updateFieldWithHello(recordId);
});
2

Hey Luke,

I’ve reviewed your code and everything looks like it should work as expected.

That being said, here are a few places I’d start when debugging this:

  1. In your form submit event handler, you’re triggering the AJAX request on kn-form-submit. If the form this code runs on is an “add” or “create” type of form, the record itself may not yet exist when the AJAX runs. This is because kn-form-submit doesn’t wait for the record to be successfully created (or updated in the case of an “edit” form) before running the handler. You may want to try using kn-record-create (docs) here instead, again assuming the form is creating a new record. This will tell Knack to wait for the record to actually exist before running your AJAX request.
  2. Another place you may check is where your AJAX request is being sent to. It’s not clear to me in your code if that request is being sent to the same form or a different one than your even handler is running on. Since you’re attempting a PUT request, you’ll need to make sure you’re sending that request to an “edit” type of form in Knack.

I hope these ideas help you get this working but if you have any questions, feel free to reach me at kelson@ksensetech.com.