How to embed two cloudtables on the same page using serverless approach

pmarks906d

I'm trying to embed two different cloudtables on my squarespace website. Squarespace doesn't host any server-side code, so I think I am stuck with using the "serverless" approach (true ?). Before I tried to embed the second table, everything works fine. However, when I try to hook up two different tables with the two scripts shown following my pages won't fully load and I get the error message also shown below. While using serverless embedded technique, is it possible to embed two tables on one page? I so, how do I modify these two scripts to make it work?

<script
src="https://kzwm89acg6.cloudtables.io/loader/03ad810c-de35-11ed-9d6c-a3c7df9d7ff3/table/d"
    data-apiKey="--retracted--"
    data-clientId="{ArtworkData}"
    data-insert="Airtable">
></script><script
src="https://kzwm89acg6.cloudtables.io/loader/c25a491e-411d-11ee-82d0-2b1baf78eaaf/table/d"
    data-apiKey="--retracted--"
    data-clientId="{EmailData}"
    data-insert="EmailTable">
></script>

ERROR MESSAGE WHEN LOAD:
Uncaught TypeError: g is undefined
d cloudtables.min.js:21554
iterator cloudtables.min.js:20544
<anonymous> cloudtables.min.js:21546
K cloudtables.min.js:20671

allan

Hi,

I've removed the API keys from your post, otherwise, anyone with them would have read / write access to your tables!

I've also sent a PM so we can discuss this further without the API keys being public (I've made a little test case).

Allan

pmarks906d

Turns out I was only catching events for one of the two tables I am embedding in each page. When I catch both the problems go away and the following works:

let tablesReady = 0;
document.addEventListener('ct-ready', function (e) { // must catch two of these
  if (tablesReady == 0) {
    tablesReady = 1;
    console.log("initing table");
    datasetId = e.datasetId;
    domId = e.domId;
    editor = e.editor;
    table = e.table;
    table.on( 'init.dt', function () {
      tableReady = 1; 
    }); // end event table.on 'init.dt'
  }  // end if -- first table
 else {  
    console.log("initing table2");
    datasetId2 = e.datasetId;
    domId2 = e.domId;
    editor2 = e.editor;
    table2 = e.table;
    table2.on( 'init.dt', function () {
      table2Ready = 1; 
    }); // end event table2.on 'init.dt'  
  } // end else table2
}); // end event 'ct-ready'

The rest of my code polls to wait for tableReady and table2Ready to be set to 1 before proceeding. Thanks for your help allan.