Same Code, Different Apps, different Results?

Help Center Get Answers
1

Hi Knack Community!

I have code that I have taken from the Documentation that checks for updates to a field within a table. It works in my prototyping app, but the code stops functioning as soon as I put the same code into another app, adjusting view and field numbers. I have checked the tables have the same settings; Inline editing enabled, Keyword search Enabled, etc. I have triple checked the view numbers correlate with the correct views and that the fields are the fields I want to check.

I get the alert telling me the field has changed on one app. The other seems to exit the code on line 2. This is the code I am referring to:

// Replace view_xx with the view key for the table view in question
// Replace field_yy with the field key for the field whose changes you want to track
$(document).on('knack-records-render.view_xx', function(event, scene, records) {
  $(document).on('knack-cell-update.view_xx', function(event, view, updatedRecord) {
    // Filter the initially loaded records for the one with the same ID as the updated one
    var recordBeforeUpdate = records.filter(recordFromRenderEvent => {
      return recordFromRenderEvent.id === updatedRecord.id;
    })[0];

    if (updatedRecord.field_yy !== recordBeforeUpdate.field_yy) {
      // Do something, such as:
      alert('Field_yy has been changed!')
    }

    $(this).off(event)
  });
});

Any reason why this code works on one app and not the other?

Any help appreciated,
Chris.

2

Update:

I am still stuck on this but I have gained some more information. while testing I was able to see the event variable that the functions are generating and have spotted a difference.

On my prototype app where the code is working the Event it seems to be tracking is the cell update event but on the other app it gets stuck on the page render event. This is what I get when I console log the event from the line $(document).on('knack-cell-update.view_xx', function(event, view, updatedRecord) {

Working Prototype App:

currentTarget: document
data: undefined
delegateTarget: document
exclusive: undefined
handleObj: {type: 'knack-cell-update', origType: 'knack-cell-update', data: undefined, guid: 47, handler: ƒ, …}
isTrigger: true
jQuery18102854527712134378: true
namespace: "view_4"
namespace_re: /(^|\.)view_4(\.|$)/
result: undefined
target: document
timeStamp: 1650968596243
type: "knack-cell-update"
[[Prototype]]: Object

Non Functioning App:

currentTarget: document
data: undefined
delegateTarget: document
exclusive: undefined
handleObj: {type: 'knack-records-render', origType: 'knack-records-render', data: undefined, guid: 19, handler: ƒ, …}
isTrigger: true
jQuery18104224829534458414: true
namespace: "view_554"
namespace_re: /(^|\.)view_554(\.|$)/
result: undefined
target: document
timeStamp: 1650968351547
type: "knack-records-render"
[[Prototype]]: Object

If anyone has any idea on why the not working app is handling the 'knack-records-render' object and why the working one is handling 'knack-cell-update' object that would be very helpful. Just to reiterate, they are using the same code but seem to be handling it differently.

Any help still appreciated, I’m going to keep working on this but fresh eyes always help.

Chris.

3

Hi Chris, Have you tried moving this section of code closer to the beginning of your coding? I’ve experienced something similar and found that adjustment resolved it.

4

Hi Rob,

I hadn’t tried that until today, Sadly no luck, I still have the same issue. After doing more digging I have learned that lazy loading jQuery must be causing a conflict that’s not showing in the console.

I commented out all of my code in the broken app except the above code and it worked! After slowly uncommenting the code I came to the lazy load And sure enough when commented out everything works ( except the tab creation which is using jQuery UI). I’m currently on the hunt to find another way of either creating the tabs I want or loading a version of jQuery that doesn’t conflict with the cell tracking.

The problem code:

var fwg_js_files = ['https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js', 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'];
LazyLoad.js(fwg_js_files, function () {
    console.log("All Javascript Files have loaded")
})

I have tried using the async wrapper function as stated in the documentation for loading external files this doesn’t fix the problem, I have also gone through all three files I am loading individually and jQuery is the only one that stops the cell update from triggering so it must be the version of jQuery I am using.

I will hopefully have a solution soon that I’ll post here just in case anyone else is having this issue and silently struggling through it.

Can’t believe it took 23 days to find this but I won’t be beaten by this…

Chris.

5

So after a lot of testing the only solution I have found is to wrap the lazy load in a function. I then call the function before the tabs are created. It is definitely something to do with jQuery and loading it in as something seems to conflict with the sandboxed version that Knack uses.

I don’t think this is the best solution, I’m sure someone out there knows of a better way to load jQuery in such a way that it doesn’t conflict with the sandboxed version. maybe if anyone knows this they can reply here but I’ll mark this as the solution until a better one comes along.

Thanks Rob for your help,

Chris.