Update the query without refreshing the page

What’s the best approach for this scenario? I have a list of restaurants with varying schedules. I aim to set up a screen in a common area to display currently open restaurants, while also refreshing the list dynamically whenever a restaurant closes or opens. This setup needs to operate as a standalone page. I intend to avoid refreshing the entire page, focusing solely on updating the list of restaurants. Is it possible to implement a ‘timed query refresh’ for this purpose?

On your submit button or whatever you’re using to submit your form, go to dynamic events on click > server connect > and under that there will be a “load” optionality. So you can submit the form, add a notification, and reload the page all in one click. Hope this is what you’re looking for and it’s helpful.

But the schedules are already saved on the database. I will not submit nothing only load from the already saved data.

Is this a good approach?? @Teodor

I would leverage websockets for this type of functionality. This is a similar tutorial. If store open/closing isn’t the result of a form submission/user input you may need to schedule the refresh as you noted. https://docs.wappler.io/t/realtime-data-update-with-nodejs-and-websockets/28089

You can use an Action Scheduler to reload the server connect. For instance this would reload my sc_tripbits every 15 seconds.

3 Likes

Action scheduler may be a simpler option vs websockets. I haven’t use action scheduler yet.

Thanks for the help. I have a question what is tick?

Tick just means what runs at the interval set.

Personally I would (and do) just use the action scheduler. I don’t think websockets would work as no data is actually being changed to trigger it.

How long would you expect users to stay on that page?

Websockets absolutely can work here, and would be my personal preference.

As for using scheduler vs websocket, it comes down to the level of load on your server. Scheduler will generate more hits as it will be refreshing every 15 seconds. With a web socket refresh, it will only refresh when triggered by the developer, which would typically be when the data is modified by other processes.

If you have a handful of users, then it won’t really matter which way you go, but as you scale up with more and more users, web sockets will clearly win.

But how can you trigger the web socket if no data is changed? The schedules of restaurants to display is already saved. We only want to show the open ones.

Thats why Scheduler is better. Web Sockets will only refresh if data has been manipulated/modified? In this case no data is being modified so nothing would refresh?

Web sockets refresh when the developer codes them to refresh. It is controlled via a server connect action.

If no data is modified, then a refresh isn’t needed, as it will return the same data.

This seems very simple to me:

  • Turn on web socket refresh on the server action.
  • Add the socket refresh action to any workflows that add/mod/del the underlying data of the server action being refresh.
  • Done

Now immediately upon the data being updated, all users will benefit from the updated results.

I get this but this is not the case.

I have a list of restaurants with schedules.

Restaurant 1 9am to 12 pm
Restaurant 2 10am to 12am
Restaurant 3 5pm to 12 pm
Restaurant 4 10pm to 12am

This is already saved on a database table. So I want a screen that display the open restaurants but only the open ones based on the current hour. So no data is added or modified is only matter of request the query every certain time to only display the open ones and take out the closed ones.

Ahh, got it.

Did you consider using a data view that has a dynamic filter based on time of day? Then you just retrieve the dataset and it would use a datetime component to always filter to only include the open restaurants.

I would really avoid anything that polls for data as it is inefficient by its very nature, but of course I don’t know all the ins and outs of your app.

At any rate, you seem happy to move on, so glad you got what you needed!

2 Likes

I never thought of that. That is an interesting approach. Hmmmm …

Only one question does de daytime component is dynamic?? I mean it update while the page is open? or only takes the date time when the page is loaded?

It is dynamic.

date and time

Elegant solution.