Dynamically load pages into a DIV

UKRiggers · February 21, 2019, 9:10pm

I am building a web based admin/dashboard system and the typical structure will be as per the screenshot below

The screen is made up of four DIVs, the left-hand nav DIV (admin_left) is blue, then there are three other DIVs, top nav bar (admin_nav), the main data screen (admin_main) and the footer (admin_footer).

When you click on any menu item on the left, the corresponding page with a data form, query results or chart will be displayed in the main data DIV (admin_main). The problem is that I can’t see a Wappler way to do it and any hand-coded option that I come up with won’t work.

I have tried many things including the most basic jquery such as $( “#admin_main” ).load( “newuser.php” ); but that doesn’t work in this instance. It does work if i make a basic hand-coded page in Dreamweaver.

Could I use iframe? If so, how? But I thought iframe was outdated now. Can anybody help or give me some suggestions?

s.alpaslan · October 17, 2018, 9:09am

Did you try show hide ?

UKRiggers · October 17, 2018, 9:11am

Hi @s.alpaslan no I didn’t but not sure how that could help. Can you explain your idea a little bit more?

t11 · October 17, 2018, 9:54am

For every button on the left you want to show different elements on the right? If yes why you just dont redirect to a new page with an href. With an href is much more easier. Is there a specific reason you want to load new elements on the right without using an href?

UKRiggers · October 17, 2018, 10:29am

@t11 I do want to use the HREF and load the admin_main DIV each time, hence the use of jquery inside the HREF. I don’t want to load the menu, header and footer each time to reduce the load times and make a better user experience.

Can give me some guidance on how to achieve my goal?

t11 · October 17, 2018, 10:36am

You could do this by including each one of the forms in a ‘span’ element and then use dmx-show for each one of the forms you would like to display.

Use the state manage.
Create a query named for example ‘s’
On click of each icon in the menu change the the ‘s’ query variable
With the use of dmx-show you can set for example when ‘s==1’ then display this when ==2 etc

Hope you get the idea, but again this will create more issues since your original file will be big and you will have to manage what gets loaded first in order to avoid loading everything in once.

Thank you

UKRiggers · October 17, 2018, 10:59am

@t11 I appreciate what you are saying but in this instance it wouldn’t help. The file would be huge as many of the pages are large forms with file and image uploads. This system is also to be used ‘in the field’ on tablets and mobiles and so the bloated file size will be a nightmare to load. And finally, the various pages with reports will need up-to-date information when viewed and so the page will need to be refreshed for each of these pages and so the page load will be a nightmare each time. Thanks anyway.

t11 · October 17, 2018, 11:02am

Yes this is why I suggested the href would solve the problem. Also you could try a php include and within an if statement to load what’s needed in the main area.

s.alpaslan · October 17, 2018, 11:07am

Hello @UKRiggers, @t11

@t11 explained perfectly . @UKRiggers there is no different way …

I suggest use php include and within if statetament

psweb · October 17, 2018, 11:23am

Hi, im a little late the party I see, but if it were me I would maybe try something a little different.

Lets say you had a single page with 50 divs that held all the content of your MAIN div, well when the page loaded if you used show/hide then it would still load all the overhead for 50 divs worth of content which would make things quite slow.

I would begin with making a App Connect variable, with a set value of say 1
Then i would have the Main div content wrapped inside an App Connect condition that only displays when the value of the var is 1

Your navigation will just set the var value to 2 or 3 or 4 etc. and your 50 Main divs will each be surrounded by an App Connect condition that only calls when the value is set to the same as its condition.

The App Connect conditions do not load the content until the condition is met unlike show/hide which loads all the content and then shows or hides different elements.

Hope that makes sense.

UKRiggers · October 17, 2018, 11:43am

Hi @psweb, that sounds interesting, I will certainly look at that. I am still learning about App Connect, Wappler and the Wappler way! Loving it so far but just frustrated because I haven’t ‘got it’ yet. Hopefully the lightbulb moment isn’t too far away

Is there any further guidance you can give me before I dive head-long and get frustrated again? Perhaps any of your’s or @Hyperbytes wonderful videos, or even original DMX videos?

psweb · October 17, 2018, 11:56am

Ok give me a moment and i will quickly throw something together as an example for you.

psweb · October 17, 2018, 12:09pm

Finished, just encoding now, its about 7 minutes long without audio at all to get it to you quickly, hope it helps.

psweb · October 17, 2018, 12:22pm

Tutorial on how to go about using App Connect with Conditional Regions and App Connect Variables.

In this example I want to alter the contents of a paragraph based upon what navigation has been selected. This allows the base components of the page to only be loaded a single time and then instead of using href calls to switch page, it only switches content based upon the condition being met.

I have used conditionals rather than show / hide as conditional regions will only run when the condition is met unlike show / hide which loads all content at page load time adding far more weight to the page load time.

Example Video. No Audio…

conditional_navigation.mp4 (95.5 MB)

UKRiggers · October 17, 2018, 12:38pm

That looks brilliant. I am assuming it should work well with ‘include’ in place of your paragraph. I will definitely try it a little later. You make it look simple in your vids, if only I could get used to the logic and terms used.

      <div id="admin_main">
        <?php include 'instruct_us3_test.php';?>
      </div>

Many thanks

psweb · October 17, 2018, 1:22pm

Yes, i do not think there will be any issue with using includes nested inside the condition, it will only call the include when it needs it then.

psweb · October 17, 2018, 1:38pm

@t11 and @s.alpaslan would either of you see any issue with the solution i have proposed, just making sure in case my idea has some drawback I have not thought of?

s.alpaslan · October 17, 2018, 2:10pm

@psweb good solution … But page loading will be slow because he wants to use all actions inside 1 page maybe he can use conditional include

psweb · October 17, 2018, 2:19pm

Yes as far as I can tell conditionals do not run until the condition is met, so I would imagine that if he uses include files then the page load should not be too bad. In fact I did test this a little.

What I did was add the browser component inside the second condition which only loads when you click the About navigation, then i added a paragraph under the title text with the default text inside it, i then bound the dynamic attribute of browser user agent as the inner text.
When i load the page the paragraph says “This is a nice paragraph”, if i click home or contact the text remains as the default, but when i click About which then loads the browser component, the text is replaced with the user agent browser, so i am quite sure that the content of the condition is only loaded when the condition is met.

Maybe @Teodor could just confirm that for us though.

s.alpaslan · October 17, 2018, 2:24pm

Best solution could be switch case with include . Wappler doesnt support switch case server side or client side . We have to use if statement .

And there isnt else if option

Yeap maybe @Teodor can confirm this solution