Refresh the page when a form is submitted

I have a _header.php file which is included in all my pages and contains the usual header, nav, logo, etc. I have added a ‘log in’ button to it which opens a modal containing the login form. It works fine so I can now easily log in from any page. But, I want the page I’m currently on to refresh so the changes appear now I’m logged in.

What’s the best way to achieve that?

Hello @sitestreet
What changes exactly would you like to see? Is this some dynamic data which needs to apear, or anything else?

Some dynamic data. I’m building a site with features for members so there’s content which will be hidden until you log in.

But why would you need to refresh the whole page then? App connect does this without refreshing the whole page. As soon as the data updates, the dynamic show/hide/conditions will show anything that requires logged user data.
Can you explain more detailed what are you doing exactly?

I initially thought that would be the case but it’s not refreshing.

I have records which are searched by visitors and they click on one to get all the details. But some of the details are hidden unless you’re logged in. I have show conditions on those elements and they work fine.

At the moment I have a separate login page but it would be a much better UX if they can just click on a ‘login’ button in the header and a modal opens with the form. This works fine but when the form is submitted, it closes the modal and they are then logged in but the page itself doesn’t update.

What expression are you using to show/hide elements?

dmx-hide="connLoggedInUser.data.queryLoggedInUser.UserID"

Could it be because the Server Connect for the logged in user is on the individual pages and should be in the _header.php include file instead?

Just on success log in, reload this server action connLoggedInUser :slight_smile:

Genius! Works perfectly now. :slight_smile:

That’s how you reload the data on the page, using App Connect - just reload the server action.
No more old-school full page reloads (which is also a bad UX) :slight_smile:

1 Like

Yep. I use the ‘load’ action a lot but because the component isn’t on the page I’m editing, it wasn’t showing in the actions list. Didn’t realise I could just hard-code it in and it would work.

Thanks again. It’s taken me a while to transition from the old-school ways but I’m now using Wappler for the majority of my development time and am loving it.

1 Like

Hi @Teodor I have a Wappler version of a Bubble repeating group on a page (a list of DB entries) - on the same page I have a modal with form submit to add to this list in the DB - how do I get Wappler to refresh the list? The new entry only appears when I manually refresh the page, then it’s there in the list?

Hi Matt,

You would use the Dynamic Event —> Data —> Success

Then in the picker select load for the server connect you need to reload.

Screen Shot 2020-07-13 at 9.37.19 AM

This is of course done with your form selected. So when the form is successfully executed it will refresh the data without having to reload the entire page.

3 Likes

Amazing. Thank you @brad !!

1 Like

Server Connect…Load was one of the breakthrough moments when learning Wappler.

1 Like