SPA ServerConnect on load

Front End Components General
#22

I tested the noload parameter myself with and without dmx-bind. It worked as expected without the dmx-bind but with the binding it would load the url on the first page load, but it doesn’t load the url when the url changes. It seems that the expression in the binding was evaluated later then the first load, a workaround that worked in my case was to add both the attributes noload="noload" dmx-bind:noload="(false) ? 'noload' : ''".

I will do some more testing and try to fix the behavior for the initial load with the dmx-bind:noload attribute set.

2 Likes
#23

Thank you Patrick, will it be fixed in the next update?

#24

Just to make clear the situation here.

The noload works as desired and stops the initial load. However as the url to the action has dynamic expressions, when those change in value an automatic reload is done (currently no matter if the noload attribute)

This is usually for cases when you want automatic data refresh after parameters change like search filters.

We have two options in solving the current case:

  1. Let the noload attribute disable all future auto refreshes
  2. Introduce a new attribute noautorefresh and leave noload as it is just for initial load prevention

I will personally go for Nr 2 to not break any existing functionality.

What do you think?

#25

Actually in my case it is the initial load that I need to occur depending on dynamic parameters. Hence, having the below work would be ideal for my use cases:
dmx-bind:noload="(xyzvalue == 1) ? 0 : 1"

#26

@s.alpaslan @AdrianoLuiz what do you think?

#27

Why not set the noload attribute on the serverconnect and on the app ready or load event you do dmx-on:ready="(xyzvalue == 1) ? serverconnect1.load() : null". When is the parameter set/available? Is it already set on app ready or when the serverconnect is initialized, perhaps you have a racing condition and that is why the noload expression is not working. I have tested the dmx-bind:noload and it works.

#28

Because I have a single page app (all in the same file),
The cleaner solution would have been for me to add to each server connect under a route:

dmx-bind:noload="!= IsMatch"

If this is not possible, can we have an isMatch event under each route? In it I can load all the server connects related to the route

Thank you

#29

Oh is dat want you want? Just add the server connect within the route indeed and it will be auto loaded when the route is active!

There is absolutely no need to add any conditional noload attribute- it works automatic!

Same is also if you place the server connect within a conditional region.

#30

Thank you Georges, it is not working automatic for me
However, it worked with conditional region, I will be using this as a workaround then
Thanks loads

#31

this makes sense - can already think of use cases for this in our ongoing project.

#32
#33

Thread revival (sorry)…

Could someone give me an example of how to get a serverconnect to only do its function (query database) when parent div (with id #example) is “visible”? Is there any way or I can only work with routing?

Thanks a lot (and sorry, been searching for a while but still don’t understand this part).

#34

What action are you performing to make the div visible?

#35

The element is a tab nested in a spa. I could add an on click event, but I would like the server connect to be triggered if the user gets the link from an email and directly opens this page. That’s why I was mostly looking at “when X is visible, do y”. (yeah, I come from bubble)

#36

Are you setting a query param or something else that you could trigger on in the email link?

#37

I’m not because it would make routing very messy as my app is a dashboard with tons and tons of different data, views, subpages, etc…

Chatgpt (that I checked first before posting here, because why not) suggests using puppeteer npm package and use “page.waitForSelector(’#div’ , { visible: true });”

But 1- not too sure how to handle extensions yet and 2- was looking for something built-in…

Thanks for the help, I really appreciate it.

#38

I think you’ll only need what’s in Wappler, but it’s challenging without knowing more about your app. An SPA would typically use routes or parameters to show different parts of the app and/or load data.

For instance, I use query params to show parts of my app. There’s many ways to do it, but below I’m setting a class that will show a div based on a query param.

<div id="contact-create" class="nk-ibx-view" dmx-class:show-ibx="(query.create == 0)">

Here’s it in action. I’m using a button click to set the query which then shows the div based on the class being set above. You can also see that I can refresh the page and if the query param is part of the URL that the div will show on page load.

As for loading data, one option might be to setup an App Load or App Ready dynamic event on the App component.

image
image457×990 32.7 KB

Add a page flow, then add a condition to check for query param (or possibly use the Browser component to look for a pathname) and then trigger the Server Connect

image
image589×504 7.1 KB

#39

Thanks for your time, really.

I don’t know why, but no conditions were working under app connect… (Tried them in my partial, in page, in layout, etc… just trying to even trigger a toast wouldn’t work…)

BUT :
I did manage to get a condition working with query params with the tips in this thread. See :

<dmx-serverconnect dmx-bind:noload="(query.tab == 'files') ? 0 : 1" id="member_files" url="/api/files/read" dmx-param:member_id="1"></dmx-serverconnect>"

So, it technically works… But I’m still curious as to how to trigger an event only when x div is visible haha.