Having trouble doing a Put request using Jquery in Knack

API & Customization Ask Developers
1

Hi
I am trying to do a view based PUT, however I can get the put to work in Postman. I have then copied the code over and changed my variables. It will not work in Knack. Below you will see the postman generated code then below that you will see the the code that I am using:

var settings = {
  "url": "https://api.knack.com/v2/pages/scene_1254/views/view_2887/records/63eca91a59b6a900291827bc/",
  "method": "PUT",
  "timeout": 0,
  "headers": {
    "X-Knack-Application-Id": "640d9e616f3b35002a6bc541",
    "X-Knack-REST-API-Key": "knack",
    "Content-Type": "application/json",
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNjFlN2YyMjU4NjBlMjYwNzUzY2U3NjkIiwiYXBwbGljYXRpb25faWQiOiI2NDBkOWU2MTZmM2IzNTAwMmE2YmM1NDEiLCJpYXQiOjE2Nzg3MDMxNjN9.kXJWOFsdn8Y8rdA1D5XlPJ0XcbxzDCS7djNFMuQJXOE",
//I have changed the Auth code so that this can't be used
  },
  "data": JSON.stringify({
    "field_5389": "Secondary"
  }),
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

 function putValuesInTable(sceneID, viewID, fieldID, inputVal) {
    // var data = { 'field_5389': inputVal}
    Knack.showSpinner(); 
        // Prepare filters
        var settings = {
            "url": `https://api.knack.com/v1/pages/scene_${sceneID}/views/view_${viewID}/records/${getRecordID()}/`,
            "method": "PUT",
            "timeout": 0,
            "headers": {
                "X-Knack-Application-Id": Knack.application_id,
                "X-Knack-REST-API-Key": "knack",
                "Content-Type": "application/json",
                "Authorization": Knack.getUserToken(),
            },
            "data": JSON.stringify({
                "field_5389": "Secondary"
            }),
        };

   
    return new Promise(function (resolve, reject) {
        $.ajax(settings)
        .done(function (data) {
            console.log(data);
            // console.log(response);
            Knack.hideSpinner();
            resolve(data);
        })
        .fail(function (error) {
            console.log('Error');
            Knack.hideSpinner();
            reject(error);
        });
    });
}

If anyone can help this would be really appreciated. I have been searching for hours and as far as I can tell this is how it should be done.

p.s. I am not using the variables for the data yet as I am testing.

Update: I have managed to get this to work in JavaScript using the code snippet from Postmen. I mainly use Jquery though and would appreciate any help someone can give me.

1 Like
2

Hello Amanda,

For my JavaScript view-based PUT request I had to iterate on it for quite a bit to get it working but you mention you already know how to get it working in JS. I used mine to grab and store the Knack Record ID into an object field after a form is submitted. I can post my code for reference, it may or may not be useful to you.

// Function to Save Record ID
function saveRecordId(recordId) {
  $.ajax({
    url: "https://api.knack.com/v1/pages/scene_###/views/view_###/records/" + recordId, // Scene/View of Second Form
    type: "PUT", 
    headers: {
      "X-Knack-Application-Id": Knack.application_id,
      "X-Knack-REST-API-Key": `knack`,
      "Authorization": Knack.getUserToken(),
      "ContentType": "application/json"
    },
    data: {
      field_### : recordId, // Store Record ID in Knack Record ID field on TIA Request object
    },
    tryCount: 0,
    retryLimit: 3,
    success: function(response) {
      console.log("Captured Record ID"); // Success Message in Console
      Knack.hideSpinner();
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
      this.tryCount++;
      let tryCount = this.tryCount, retryLimit = this.retryLimit, seconds; 
      if (tryCount <= retryLimit) { //try again
        switch(tryCount) {
          case 1:
          case 2: seconds = 5; break;
          case 3: seconds = 10; break; }
        let timeout = seconds * 1000;
        console.log("Error: " + XMLHttpRequest.status + " " + XMLHttpRequest.statusText + "\nRetry Count: " + tryCount + "\nRetrying in " + seconds + " seconds")
        let ajaxObject = this;
        window.setTimeout(function(){
          $.ajax(ajaxObject);
        }, timeout);
      } else {
        console.log("Failed to Capture Record ID"); // Failure Message in Console
      }
    }
  });
}

// Listen for record creation (TIA Request Application Information Submit / First Form)
$(document).on('knack-record-create.view_###', function(event, view, record) {
  const recordId = record.id;
  console.log('CASE CREATED')
  saveRecordId(recordId);
});

// Listen for record creation (TIA Case Template Submit / First Form)
$(document).on('knack-record-create.view_###', function(event, view, record) {
  const recordId = record.id;
  console.log('CASE TEMPLATE CREATED')
  saveRecordId(recordId);
});

// This is the Second Form.
// This removes the view from HTML upon rendering to prevent data manipulation.
$(document).on('knack-view-render.view_###', function (event, view, record) {
  $('#' + view.key).remove(); 
  console.log('HIDE')
});
3

Hi @TechChrispin

Thank you very much for this I will look at your code. Ajax is very new to me so it will prove very useful. Especially the error catching.

Amanda

1 Like
4

@TechChrispin Thank you so much I have used your code. The error catching is something that we will use everywhere we do API calls. It worked perfectly.
Craig

1 Like