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?
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?
@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?
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.
@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.
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.
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.
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?
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.
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>
@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?
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.
