Update the table without refreshing the page

I have a data collection in wix id name is entriesDB and I have a table on my page that is connected to the entriesDB my table id is table2 I want to update my table data live whenever there are any changes or new entries in my data collection without using setInterval or setTimeout method, I know there is data hook method but I really don’t know how to use that,
what I have to write inside the hook? and how do I have to call it on the front end page?
I have searched on Google chatgbpt but everywhere I got more confused and got wrong answers still, my table2 updates on page load only but not updating my table values whenever there are changes in my data collection entriesDB
I hope Wix Velo experts will help me as I am looking for this from many years but there is something that I am missing.
i don’t have any field specified to update my entire table on every change in data collection.

i am still learning and don’t have much knowledge of coding please give me the simplest solution

I created data hook on afterUpdate (for my data collection lik this in back-end

back-end

export function entriesDB_afterUpdate ( item , context ) {
//TODO: write your code here…
}

front-end

$w . onReady ( function () {

loadTableData ()

});

function loadTableData ( ) {
wixData . query ( ‘entriesDB’ )
. find ()
. then ( res => {
let tableData = res . items ;
$w ( ‘#table1’ ). rows = tableData ;

    }) 
    . **catch** ( err  => { 
        console . log ( 'Error:' ,  err ); 
    }); 

}

In short, my table id is “table1” on my page, and my data collection id is “entriesDB”

my table1 is connected to the data collection using dataset1, I hope everyone can understand the situation that I am facing.

Because I am not a professional in Java or wix velo, this code is missing so many things but I am not able to write any line of code without knowing the javascript functions or without learning the database please edit my code so that I can understand it easily.

Where is your already coded code?

Can you please check my updated post. Your time and help is greatly appreciated, thank you

…my table2 updates on page load only but not updating my table values whenever there are changes in my data collection entriesDB…

Using just a dataset-connection : ---->Your SETUP:
----------------------------------------------------------------------

  1. DATABASE-ID —> “entriesDB”
  2. Database is connected with —> Dataset (‘#dataset1’)
  3. Table-ID —> "#table2’ —> also connected to your database (trough ‘#dataset1’)
  4. Why you talk about BACKEND → i don’t know, maybe because you do not understand the difference between backend and frontend.

However, what do you need and how it will work.

  1. Whenever you are working on your page → your page first must be ready for work —>…
$w.onReady(()=>{console.log('Page is ready...);});
  1. Whenever you are using a DATASET → the DATASET also has to be ready first!
$w.onReady(()=>{console.log('Page is ready...);
    $w('#dataset1').onReady(()=>{
        console.log('Dataset ready...);
        console.log('Start of code here....');
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        console.log('End of code here...');
    });
});
  1. Whenever you save changes into your database by the help of your dataset → 2-hooks will be fired —>…

a) onBeforeSave()-Hook
b) onAfterSave()-Hook

$w.onReady(()=>{console.log('Page is ready...);
    $w('#dataset1').onReady(()=>{
        console.log('Dataset ready...);
        console.log('Start of code here....');
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        console.log('End of code here...');
    });
    
    $w('#dataset1').onBeforeSave(()=>{
        //CODE...here what shall happen before data saves!
    });
    
    $w('#dataset1').onAfterSave(()=>{
        //CODE...here what shall happen after data saved!
    });
});
  1. Now you need a TRIGGER-EVENT, which will start all this process → for example your SUBMIT-BUTTON —> which is also connected to your DATASET !
$w.onReady(()=>{console.log('Page is ready...);
    $w('#dataset1').onReady(()=>{
        console.log('Dataset ready...);
        console.log('Start of code here....');
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        
        $w('#mySubmitButtonIDhere').onClick(()=>{
            //CODE running when clicked onto SUBMIT-BUTTON!
            //This CLICK-ACTION will start onBeforeSave() !
            //This also will start onAfterSave(), when data
            //has been saved inside your database!
        });
        
        console.log('End of code here...');
    });
    
    $w('#dataset1').onBeforeSave(()=>{
        //CODE...here what shall happen before data saves!
    });
    
    $w('#dataset1').onAfterSave(()=>{
        //CODE...here what shall happen after data saved!
    });
});

Since your SUBMIT-BUTTON is connected to your DATASET, you even do not need the Submitbutton-code-part inside your code, because the click onto the SUBMISSION-BUTTON (which is already connected with your dataset and setted-up inside of the PROPERTY-PANEL) —> it will start both HOOKs → automatically, because your button is setted-up as a —> SUBMISSION → it starts the saving-process by a click onto the button automatically → this calls the 2-Hooks to work.

$w.onReady(()=>{console.log('Page is ready...);
    $w('#dataset1').onReady(()=>{
        console.log('Dataset ready...);
        console.log('Start of code here....');
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        //CODE...
        console.log('End of code here...');
    });
    
    $w('#dataset1').onBeforeSave(()=>{
        //CODE...here what shall happen before data saves!
    });
    
    $w('#dataset1').onAfterSave(()=>{
        //CODE...here what shall happen after data saved!
    });
});

Now the question!!!

? Do you still need Wix-Data (in your case) ?

The rest of all brainstorming is now on you.
Where to add now which part of code?

Try to imagine what happens in which kind of order?

  1. First comes the CLICK
  2. That starts the SAVING
  3. But BEFORE-SAVING starts → you can do something inside the onBefore-Code-Part…
  4. Following by the SAVING-PROCESS itself
  5. And last but not least the AFTER-SAVING-CODE-PART, where you want to UPDATE your DATASET, to show REFRESHED-RESULTS inside of your REPEATER, which is surely also connected to your DATASET.

REFRESHING ??? Did i say → REFRESHING ???

Now try to get this to work with your new KNOWLEDGE.

!!! Good luck and happy coding !!!

!!! May the CODING POWER be with you !!!

1 Like

I appreciate your help and the way you have explained everything. Even as a beginner, I was able to understand it easily. However, I realize that I may not have fully explained the issue I am experiencing.
The code you provided works well if the table, submission inputs, and button are all on the same page. It will be helpful for me, so thank you for your time.
However, my situation is slightly different. I want to be able to see the submitted data in real-time on a specific page that only I have access to.
For example, the page where I want to see the data has only one table and is connected to the data collection where users submit their information from another page. Whenever a user submits new data, I want to see it on my admin-only page.
I think this may require some code for both the front-end and back-end. As my knowledge in programming is limited, I am hoping that you can provide a solution and gain my knowledge on this.

Well what does realtime mean ???

Let’ say you have …

  1. DATABASE, which is connected to 2 different pages.
  2. Page-A —> DATA-INPUT into the database
  3. Page-B —> DATA-OUTPUT (DATA-MONITORING) from databse.

Now we will first do some brainstorming, because there are different situations…

  1. Real-time = refreshing the results every second.
  2. Real-time = refreshing the site each hour to update results
  3. Real-time =refreshing whenever you enter the site

So let’s say a refresh each hour is ok for you… then use…

If you want a refreshing frequency of every second, you could try to generate an INTERVAL-FUNCTION, which would call every second or every 5 sec. to load the data on the page again and agin and again…

So as you can see, the task is not really difficult.

1 Like

Alright, I will update my data every 5 seconds using an interval. I was concerned that this might not be the best approach, as someone mentioned that using too many intervals over long periods of time can be detrimental to a website, especially when server calls are required to retrieve data from a collection. However, I have not encountered any issues yet. Since you suggested this approach, I trust that it is safe for me to continue using the 5-second interval

as someone mentioned that using too many intervals over long periods of time can be detrimental to a website

Yes that’s right it can have some negative effects.
In this case → think about a routine like…

  1. refresh-interval running all 5 secs.
  2. let’s say your website slows down after 30min, because of the mentioned negative effect (overloading your webbrowser)
  3. solution —> after a second running interval → of 30min —> page refresh

That would mean —> you refresh your page whenever your webbrowser gets slower.

This is just an idea. Maybe there are better solution, but at moment it is the only one i can think of.

1 Like