Refresh single table component on page

remedina18 · September 23, 2025, 8:40pm

I have a need to refresh a table either every x minutes or when a fields(status) changes. The status is being updated via Make.com intagration. This intagration is not triggered from Tadabase, its being updated from another application via Make. so I either refresh the table at a set time period or preferably when the status changes to a specific value. There is another table component on the page.

any help will be greatly appreciated.

andreas · September 24, 2025, 2:27am

You can use an ably notification to trigger that reload button via JS. I can provide you a snippet later or you can try yourself with AI. It doesn’t matter from where the Notification is triggered since your application is listening too the ably channel.

You give the table you want to update a specific CSS class, I use “Ably-Update” and then you use a JS query to click the reload button in that CSS Class. Try inspecting the element. It provides all necessary information to have AI build the JS.

remedina18 · September 24, 2025, 12:16pm

Good morning Andrea,

Thanks for your reply. Im not that familiar with Ably. I tried setting something up from another post that Moe posted but I keep getting an error about channel or application doesnt exists.

You mention a button to reload. My table has no buttons.

Im using Make.com to receive and update a record in Tadabase. My idea is after Make updates the record then triggen Ably to either reload the table or better yet show a pop up message I tadabase so the end user can act on it. Not sure if the later is possible.

Again thanks for taking interest in my post.

andreas · September 24, 2025, 12:35pm

channel.subscribe('ds-physio', (message) => {
  // The payload (status) is in message.data
  const status = message.data;
  
  // Determine which SweetAlert to display based on the status
  if (status === 'success') {
    // Refresh tables first
    const refreshButtons = document.querySelectorAll('.ably-update [ng-click="refreshData()"]');
    refreshButtons.forEach(button => button.click());
    
    Swal.fire({
      title: 'Slots successfully created!',
      text: 'Physio slots have been created. Tables updated.',
      icon: 'success',
      confirmButtonColor: '#60c54e'
    });
    
  } else if (status === 'no-attendees') {
    Swal.fire({
      title: 'No Attendees Found',
      text: 'No attendees found for the specified tag.',
      icon: 'error',
      confirmButtonColor: '#e74c3c'
    });
    
  } else if (status === 'Amount-0') {
    Swal.fire({
      title: 'Invalid Amount',
      text: "Amount can't be 0. Please specify a valid number of slots.",
      icon: 'error',
      confirmButtonColor: '#e74c3c'
    });
    
  } else {
    // Handle any unexpected statuses
    console.log('Received an unknown status:', status);
    
    Swal.fire({
      title: 'Processing Complete',
      text: `Status: ${status}`,
      icon: 'info',
      confirmButtonColor: '#3498db'
    });
  }

You can find loads of stuff about ably in this forum and somewhere in the docs there’s an old tim young video on ably.
Ably is the way to go for this.

That Button:

and thats the inspect on this:

remedina18 · September 24, 2025, 3:27pm

Thanks again, but this is a bit over my pay grade. I can understand, somewhat, what the code is doing but not really sure how to implement it. I believe i might have to update some of it to work on my application. I’m just not a real programer so seem a bit overwhelming. Also do I put this code in the JS of the page? How is it triggered? the record update happens via integration with Make, no user intervention.

andreas · September 24, 2025, 5:34pm

This how you make a page listen to an ably channel and in the provided snippet also fire a sweet alert. Again search the docs you’ll find lots of info on this in old “build it with Tim”’s

to adjust the code just use AI…

Yes that would go in the js section on the page.

remedina18 · September 26, 2025, 2:31pm

Hi Andreas,

I have tried stting up Ably by following AI instructions and even some intructions that Moe posted sometime ago but I keep getting this error.

Error: 401 Unauthorized

{“error”:{“message”:“unable to handle request; no application id found in request”,“href”:“Invalid error code}}

I dont know why i get it. I iven created a new API key and same thing.

This is what I have in the JS of the page

const channel = ably.channels.get(‘drivers’);
channel.subscribe(‘scenario-completed’, (message) => {
Swal.fire(‘Awesome!’, ‘Data has been updated! Please refresh your page. ‘, ‘success’)
$(’#component_21’).find(‘[ng-click=“refreshData()”]’).click()
});

This is what I have in the Application headers. I removed the y key here.

WHat I have in MAke.com