Can Menu load template into include? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: data-url, iframe, itemclick, jqxMenu, Menu

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Can Menu load template into include? Posts

March 15, 2013 at 6:38 pm Can Menu load template into include? #17195

gerrity

Member

Hello,

First, great widgets!

Second, I’m still learning bits and pieces of java, html, css, etc… so if there is something basic I should know, please point me in the right direction and I certainly don’t mind going off to research it.

That said, what I’m trying to do is create webpages that have 3 columns (and more stuff) in the layout and has the jxmenu in the right column and main content in the centre (this is done). I would like to change the centre column content based upon the menu item clicked. I was thinking of using templates and includes for the centre column content, then thought about using iFrames.

The structure is that my menu will consist of buildings A, B C and sub-menus A-room1, A-room2, B-room1, etc… To make it easier to maintain, I was going to create folders of building and rooms within each folder as html files. ie: /BuildingA/A-room1.html

What I’m struggling with is how to pass the url of the room clicked in the subment to the iFrame (or if possible template)…I’m assuming it’s using itemclick and data-url but as a total noob I’m not too sure how to do it.

Would somebody be able to either point me in the right direction to go study it or put up a bit of sample code that passes the page info to load into the iFrame or tamplate within the main pages centre column?

Thanks a lot!

March 18, 2013 at 8:19 am Can Menu load template into include? #17263

Dimitar

Participant

Hello gerrity,

Here is how to load a different content of an iframe depending on a clicked menu item:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical' });
            $('#jqxMenu').on('itemclick', function (event) {
                // get the clicked LI element.
                var element = event.args;
                var text = element.textContent;
                var src;
                switch (text) {
                    case "1.1":
                        src = "http://www.jqwidgets.com/";
                        break;
                    case "1.2":
                        src = "http://www.jqwidgets.com/jquery-widgets-demo/"
                        break;
                    case "3.1":
                        src = "http://www.w3schools.com/default.asp"
                        break;
                };
                $("#iframe").attr("src", src);
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxWidget'>
            <div id='jqxMenu'>
                <ul>
                    <li>1
                        <ul>
                            <li>1.1</li>
                            <li>1.2</li>
                        </ul>
                    </li>
                    <li>2</li>
                    <li>3
                        <ul>
                            <li>3.1</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <br />
    <iframe id="iframe" style="width: 500px; height: 500px; border: 2px solid Green"
        src=""></iframe>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

March 18, 2013 at 6:27 pm Can Menu load template into include? #17326

gerrity

Member

Hey that’s great Dimitar thanks!

I’m now looking at ways to manage my pages better so that I don’t have all these menu list items in my main page. To that end I’m looking at having the menu context loaded from a separate file. I was thinking of the .load ability and am trying to get something like this to work:

MenuFile.html:

<div id='navigation'>
                <ul>
                    <li>1
                        <ul>
                            <li> <a href="room1-1.html">1.1</a></li>
                            <li> <a href="room1-2.html">1.2</a></li>
                        </ul>
                    </li>
                    <li>2</li>
                    <li>3
                        <ul>
                            <li> <a href="room3-1.html">3.1</a></li>
                        </ul>
                    </li>
                </ul>
</div>

Then within main page have script:

main.html:

$(function() {
$(“#navigation”).load(“MenuFile.html”);
});

$(document).ready(function () {
// Create a jqxMenu

$(“#navigation”).jqxMenu({ width: ‘120’, mode: ‘vertical’ });
$(‘#navigation’).on(‘itemclick’, function (event) {
event.preventDefault();
var page_url=$(this).prop(‘href’);
$(‘#content’).load(page_url);
});
});

Obviously it’s not working. Questions:

1) With the jqxmenu widget do I need to use switch and case to get menu item clicked?
2) Can I put the content of the html referenced by the menu into a Div? like Div id=”Content” instead of iFrame?
3) Can I load the contents of the menu from a separate file like MenuFile.html and do I need to load it within a separate script like my example or can I call the contents into jqxmenu within the exist $(document).ready function?

Thanks again for your help.

March 19, 2013 at 1:24 pm Can Menu load template into include? #17476

Dimitar

Participant

Hi gerrity,

1) The switch statement is used in the case of the example to do different things in different cases. It is not always needed.

2) and 3) These are both possible. Please take a look at the following modified version of the example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create a jqxMenu
            $("#jqxMenu").load("HTMLPage1.htm", function () {
                $("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical' });
            });
            $('#jqxMenu').on('itemclick', function (event) {
                // get the clicked LI element.
                var element = event.args;
                var text = element.textContent;
                var src;
                switch (text) {
                    case "1.1":
                        $("#content").load("HTMLPage1.htm");
                        break;
                    case "1.2":
                        src = "http://www.jqwidgets.com/jquery-widgets-demo/"
                        break;
                    case "3.1":
                        src = "http://www.w3schools.com/default.asp"
                        break;
                };
                $("#iframe").attr("src", src);
            });
        });
    </script>
</head>
<body>
    <div id='jqxMenu'>
    </div>
    <br />
    <iframe id="iframe" style="width: 500px; height: 500px; border: 2px solid Green"
        src=""></iframe>
    <div id="content">
    </div>
</body>
</html>

HTMLPage1.htm:

<ul>
    <li>1
        <ul>
            <li>1.1</li>
            <li>1.2</li>
        </ul>
    </li>
    <li>2</li>
    <li>3
        <ul>
            <li>3.1</li>
        </ul>
    </li>
</ul>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.