Dynamically load pages into a DIV

The only thing I can say is that, this post is another confirmation that Wappler (AppConnect & ServerConnect) are real programming frameworks since you can achieve the same result by following different approaches.

Yeah I think that all of the above could, more or less, work just thinking that the ‘php include’ will be the faster and more easy to maintain solution.

Thanks for the demo - I haven’t used Conditional Regions with Wappler.

As far as I can see, the contents of the conditional regions are downloaded; I would have thought this must be the case, given App Connect is all client-side. However it seems there is a difference when using show/hide dynamic attributes. I think the conditional region content is downloaded but not processed or rendered by the browser where conditions are not met, whereas if show/hide is used, the HTML is processed by the browser, even if it’s hidden (style="display: none").

If this is correct, then using conditional regions will be faster than using show/hide attributes - but not as fast as using PHP, which would enable you to avoid downloading the unneeded code in the first place.

In this situation I would usually do what was suggested earlier - just load each page when needed and put the menu into an include file. If a particular page is needed, the HTML etc. has got to be downloaded at some point. The time taken to reload the headers/footers will be minimal (with caching etc.).

1 Like

That’s right Tom,
Conditional regions (and their dynamic content) are not being executed/rendered until the condition is met.
Show/hide attributes add a display: none; to the element applied to.

Thanks for confirming this - it’s very useful to know.

the real issue is maintaining a single large page. it will be a nightmare i have something similar. but it will make the user experience 100% better than multiple pages.

and making it is simple with wappler. just show and hide elements with animations and load data when needed.

We are working on a new routing component which will allow you to load external content in a main template.

4 Likes

:heart_eyes: this is vere cool

@TomD, you are correct in that it will still load assets unfortunately, however I suppose even that can be tricked into working and only loading the assets that are really needed to each page, although it can get messy.

Personally this is not something I have ever needed to do, in fact I personally would not do this on my own projects because they are very asset intensive, and managing a single page site would just be a nightmare, but the question was asked so I was just showing a way it could be done, if the site is not asset heavy then this could be a solution.

Even the server connect side could be made that things only happen when certain conditions are met so the page will not have hundreds of queries all running at the same time.

What always applies to me though is, just because something CAN be done, does not necessarily mean it should be done, and I figured a tutorial like this at least gives a nice introduction to using variables and conditions to those that might not use them currently.

1 Like

I once did a dashboard all on one page by showing and hiding divs. Never will do that again.

1 Like

Actually having a dynamically loaded sub pages (views) will become very easy soon when we finish our routing control :slight_smile:

That is actually the whole point of client side routing - to render dynamic areas (sub pages/views) dependent on the route / query string

So finally you can have a full blown Single Page App (SPA) where you actually have all the views in separated files being loaded when required. This makes it all very manageable.

7 Likes

Me too Brad, me too, in fact every couple months i still have to make alterations to it, every time i open the site I think, Why, just WHY? EDIT: It was another dev that wrote the site initially that I employed for a short time, not really me that did it, I am however stuck with the problem though.

@George, I can not wait to see this next update, if the DMXZone update emails I am getting are anything to go by as a preview of what should be in the new version, then I am very excited, and actually can not believe how you and the team take what us users are asking for and add in those features when you can. Thank you.

1 Like

Well the routing won’t be in the next update - we already have such a huge amount of new stuff in there.
But probably the upcoming updates after - as we have the ground work now in place :slight_smile:

I wasn’t even referring to the routing as yet, I want that browser2 component though, so holding my breath here, hmmm i have a sneaky suspicion you may have added parts of that because of some of my silly work arounds, lol, thank you.

Oh yes :slight_smile: the new browser component is so much powerful - you can do so much conditional styling depending on the scroll position, like parallax scrolling, restyling the menu when it scrolls away, popping a alert box when user reaches the bottom… so much great stuff :slight_smile:

4 Likes

It is a good introduction and helped me consider options I’ve yet to discover. Also, I always learn some extra tips from watching your demos.

Thanks Tom, much appreciated, it can be scary sometimes doing video or written tutorials because I am sort of putting myself right in the firing line of many people with far more experience than me. But I suppose even when i do silly things and someone speaks out at least i also learn something new.
From my last tutorial I did a while ago, my poor nails are still trying to grow back :slight_smile:

I do not believe this is going to happen. this was all that was missing in the wappler.

Well, actually it is going to happen and it has been planned a while ago already. :slight_smile:

2 Likes

You guys really Rock!

1 Like

Great, with the recent updates, have we achieved this. I am trying to load webpages into my dashboard. Any tips, since iframe is not available…