Route Show/Hide etc Options for NodeJS SPA

sid · October 10, 2020, 3:17pm

Hi,

While configuring a NodeJS SPA project in Wappler, I have a requirement to do some work on on-show event of a route.
There are various such dynamic events for this in PHP/ASP.net SPA “route” component. Since there is no such component used in implementing SPA in NodeJS, is there any way to achieve this?

My use case right now is to scroll the page to top on load of route. Setting page to scroll on every possible link is not an acceptable or practical solution.
Other use cases which I have had mostly include calling a server action when route page is shown so that even if page is loaded from cache (which does not invoke auto-load), the data is always the latest.

sid · October 12, 2020, 3:47am

@patrick Can you please help?

patrick · October 12, 2020, 11:37am

I suppose that you use the new view component now? The view component does work very different then the route component, it doesn’t show/hide its content. You probably want to listen to the load event, it is triggered each time new content is loaded for the view.

sid · October 26, 2020, 10:58am

Hi Patrick.
Sorry for the late reply. Had switched to another project, so complete forgot to test this out.

<!-- Wappler include head-page="layouts/main" jquery_34="cdn" fontawesome_5="cdn" is="dmx-app" appconnect="local" dmx-on:load="browser1.alert('hellohello')" -->
<meta name="ac:route" content="/careers">

On the content page, I added the App->Load event, and this is the change I see on the page.
But, the alert is not shown even once. Not on first load… not on redirection… not even on direct page load via URL.

This is the place you asked me to configure the load event of somewhere else?

sid · November 2, 2020, 1:06pm

@patrick Hi. Did you get a chance to look at this?

patrick · November 2, 2020, 3:10pm

You need to add the load event on the view component, it gets triggered each time a new page is loaded using an ajax call.

sid · November 2, 2020, 4:55pm

Is it not available in the UI?

patrick · November 2, 2020, 5:17pm

Oh, then @george should add it. Use one of the other events and then rename it in the code afterwards to dmx-on:load="".

George · November 2, 2020, 5:28pm

sid · November 3, 2020, 6:50am

This works.
Is there a plan to put these events on the content page level itself?
Because here I will have to put in conditions to identify which content page is being loaded to perform specific tasks.

sid · November 5, 2020, 5:20am

@patrick

patrick · November 5, 2020, 4:04pm

You can try using a flow with auto run on the content page, it should run each time the content page is loaded. Same is for server connect and script blocks.

sid · November 5, 2020, 4:04pm

This would be much better than having to put conditions.
Thanks.