SPA - Server Action inside Content page not working when displaying the page directly

Wappler General Bugs
1

Hey everyone,

I started working with SPA by following this post: Building SPA pages with NodeJS

I have two pages, the index page and another one.
The index page is just showing some text and the second one is showing datas from the DB (with a repeater).

If I load the homepage (index page) and go to the second page by using the navigation link, it’s working perfectly.

BUT, if I try to load the second page directly by entering the URL in my browser, the server connection is not even interpreted and my server action is not loaded.

If I use the navigation to go to the index page, then come back to the second page, it’s working again.

Any idea why I have this issue? Am I alone to experience this?

Thanks :slight_smile:

2 Likes
2

@George and @Teodor any idea?

3

Where is your server connect places in the content page or main page?

4

In the content page.

5

So if you load it full on the browser it doesn’t load but if you load it partially then it does?

Check the network tab in browser devtools to see exactly what gets loaded and when. Also check for errors

6

When I check the browser dev tools:

  • If I’m on the homepage and click on the link in my navbar, the second page is loading correctly and everything is loading (server actions…)
  • If I try to refresh this specifi second page or try to access it directly by entering the link in my browser, the page is completely loading, except the server action.
7

Well there should be no difference both html is the same…

8

I agree, I don’t understand why it’s not working when I try to load the page itself and why it’ working if I’m loading it via the navbar… :thinking:
I tried to find a workaround but I haven’t…

9

Two other things I noticed:

  1. My logo is clickage and its URL is set up like this: ./
    If I use my navigation, everything is perfect, but if I try to load the second page directly by enterring the URL in my browser, my logo’s URL is replacd by the current URL.

  2. I have a modal in this page which is not opening if I try to load the second page directly by enterring the URL in my browser.

10

Did you make sure your project is setup with siteroot relative links in the project settings?

11

Yes, it’s setup with “Site Root”

12

I’m also having this exact same behavior, except for that my server data is in the index page, when I navigate using the internal router, everything works fine, except for when I’m requesting a “hard” refresh or initially load up the index page.

-EDIT-

This is very weird, I’ve been kept playing with this, and this is surely a problem with the routing itself implemented in the server-wise… although that issue was specific to react, a similar issue is definitely occurring with us.

Also, my server action does seems to be getting passed through, when I refresh the page like 100x sometimes I can see the action getting called and the request coming through my Network tab in the Dev Tools.

1 Like
13

Following the new SPA NodeJS tutorial, I created a new project and set it up as explained. The SPA part is working great along with the layout architecture.
But the issue described here is same the I am experiencing… making the current setup still kind-of unusable.

Here is my setup:
Layout Page: main.ejs
Content Pages: home, service, contact (.ejs)

I have set the route for home to be “/”, so that is the content page that gets loaded when “localhost:3000” is opened.
I am also able to open other content pages directly using URL, similar to PHP/ASP implementation (which was earlier broken).

Now, if I load URL with “/” or any other content page path, that page refuses to recognize or get rendered by DMX (not sure what the term here would be). But the layout page renders fine. Only the HTML of content page is broken.

image

So, this is how the HTML gets rendered - with the dmx-on:click event not rendered by DMX.
So these buttons don’t do anything on clicking.
Another thing to notice here is any components on layout page (browser, sc, variables etc) also don’t work at this point.

Now, I have an internal link on the layout page, which can take me to another page.
This new content page loads perfectly fine, with all components working fine too. There are no un-rendered DMX HTML attributes either.

Now, interestingly, if using another link in the newly loaded content page or the layout page and go back to the content page I had originally loaded, that renders correctly as expected.

image

As you can see, no more DMX tags. And, clicking on the buttons correctly executes the browser1.goto method too.

The issue here is just with the first page being rendered the first time.
If you guys could share a fixed JS file for it, it would be great. :slightly_smiling_face:

3 Likes
15

@patrick any news about that?
Thanks!

16

I’m not sure if it fixes the issue, but you may test this update.

dmxRouting.zip (1.7 KB)

2 Likes
17

Yes @patrick! :tada:
It worked, thanks a lot! :clap:

18

4 posts were split to a new topic: Selects on content page are not being filled

19

Beautiful! Great work Pat! worked like a charm :wink:

23

I see, well @patrick will check it out

1 Like