one of my embedded cloudtables allows read/edit, not create/delete, but security set to read/write.

pmarks906d

website "philipmarksart.com/pjonly". Temporary Password for the page is "pjonly2023". One of my embedded cloudtables "EmailMetaData" won't let me create new entries (but allows me to edit current entries). If i enter "new" editor and try to upload an image, I get a message saying I do not have access to the dataset. See attached screen shot. On the security page for the dataset I have everything set to "Read and Write" (see 2nd attached screen shot) and I have used a read/write "data-apiKey". My other table "ArtworkMetadata" lets me create/edit/delete just fine. I have created editor.on code for the "ArtworkMetadata" table but not for the "EmailMetaData" table. Here is some of my code:

<script
src="https://kzwm89acg6.cloudtables.io/loader/03ad810c-de35-11ed-9d6c-a3c7df9d7ff3/table/d"
    data-apiKey="<redacted>"
    data-clientId="{ArtworkData}"
    data-insert="Airtable">
</script>
<script
src="https://kzwm89acg6.cloudtables.io/loader/c25a491e-411d-11ee-82d0-2b1baf78eaaf/table/d"
    data-apiKey="<redacted>"
    data-clientId="{EmailData}" 
    data-insert="Emailtable">
</script>
let datasetId;
let domId;
let editor;
let table;
let datasetId2;
let domId2;
let editor2;
let table2;
// ////////// don't access page till document has loaded //////////
let docReadyChanged = 0; // loop till this becomes 1
// ////////// test for page load //////////////////
document.onreadystatechange = function () {
  globalButton1.innerText =  "CHANGE"; 
   if (document.readyState === 'complete') {
     docReadyChanged = 1; // now can test for table load
   }
}
let tablesReady = 0;
let tableTempNumColumns = 0;
//  
document.addEventListener('ct-ready', function (e) {
  // these paramters need only be assigned once at page load. As the embedded table 
  // asynchronously updates, these parameters can be used to access any table data
  // which has changed, by polling the table. As yet (2023 08 09) there is no event which 
  // happens when table data has changed, so the polling the table is necessary to keep the
  // rest of the page up to date. 
  if (tablesReady == 0) {
    tablesReady = 1;
    tableTempNumColumns = e.table.columns().nodes().length;
    console.log("1st ct-ready tableTempNumColumns="+tableTempNumColumns);
    if (tableTempNumColumns == 21) {
      console.log("table inited");
      datasetId = e.datasetId;
      domId = e.domId;
      editor = e.editor;
      table = e.table;
      table.on( 'init.dt', function () {
        initColumnVisibility();
        tableReady = 1; 
      });
    } // end if -- is table 1
    else 
    {
      console.log("table2 inited");
      datasetId2 = e.datasetId;
      domId2 = e.domId;
      editor2 = e.editor;
      table2 = e.table;
      table2.on( 'init.dt', function () {  
        initColumnVisibility2();
        tableReady2 = 1; 
      });
    }; // end else if -- is table 2
  } // end if -- first table initialization event
  else {
    tableTempNumColumns = e.table.columns().nodes().length;
    console.log("2st ct-ready tableTempNumColumns="+tableTempNumColumns);
    if (tableTempNumColumns == 21) {
      console.log("table inited");
      datasetId = e.datasetId;
      domId = e.domId;
      editor = e.editor;
      table = e.table;
      table.on( 'init.dt', function () {
        initColumnVisibility();
        tableReady =  1; 
      });
    } // end if -- is table 1
    else 
    {
      console.log("table2 inited");
      datasetId2 = e.datasetId;
      domId2 = e.domId;
      editor2 = e.editor;
      table2 = e.table;
      table2.on( 'init.dt', function () {  
        initColumnVisibility2();
        tableReady2 = 1; 
      });
    }; // end else if -- is table 2
  }; // end else -- this is the 2nd table event
}); // end event 'ct-ready'

the rest of the code polls "tableReady", "tableReady2" and "docReadyChange" every half
second until the page and tables are fully initialized.

pmarks906d

Note that the above code snippets are all inside scripts but are copied and pasted here

pmarks906d

Update: It seems I can add row entries to this cloudtable on my webpage but are just not able to load an image into the "Image" column.

pmarks906d

Note that the problem does not occur when I directly log into my cloudtables account and play with the tables there. The problem only occurs when I am using the embedded tables specifically on my squarespace website.

pmarks906d

Note that the order of the scripts on my page which define the interface to the cloud tables, and the order of the tables on my page do not matter. The "EmailMetaData" always shows the problem and the "ArtworkMetadata" table always has no problems.

pmarks906d

Something appears to be flaky. Sometimes an image will upload. But I haven't figured out enough to reliably reproduce the sequence of events which facilitates a successful upload. I went to another page "/email" on my site where the only javascript processing on the page is the code which waits for the document and tables to finish loading (shown above) but I still get the same problems.

allan

Hi,

With the ct-ready event, you might find it easier to listen for ct-ready-{datasetId} (replacing the last part with the data set's ID of course). Then you don't need to could columns to tell which one the event comes from. You could also use a data-id attribute to set an easier to remember id. Documentation for both are here.

Regarding the access error - I think I can see what might be causing that. My apologies - I'm working on a way to reproduce and test it locally. Will update this thread with what I find.

Allan

allan

It wasn't quite what I thought in the end, but close. I've traced it down and deployed the fix. Your page should work as expected now (it appears okay on a quick check for me).

Apologies for that error having crept in! It would only have happened with two tables on a page and an upload field. Unfortunate for your use case!

Allan