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

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

pmarks906dpmarks906d Posts: 61Questions: 18Answers: 0
edited August 2023 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,236Questions: 1Answers: 10,418 Site admin
    Answer ✓

    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

  • pmarks906dpmarks906d Posts: 61Questions: 18Answers: 0

    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.

Sign In or Register to comment.