alter panel content from another page. is it possible? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: id, itemclick, jqxMenu, jqxsplitter, Menu, source, splitter

This topic contains 7 replies, has 2 voices, and was last updated by Nadezhda 9 years, 6 months ago.

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

Author

alter panel content from another page. is it possible? Posts

February 17, 2015 at 7:43 pm alter panel content from another page. is it possible? #67268

boxmga

Participant

Hi,

It’s my first post and I’m not a professional programmer, just an IT enthusiastic. So, please excuse-me if I ask something stupid, too basic or say some bullshit. I’m fine in linux admin, shell-scripting and SQL language. But, I realy know anything about JS, HTML5 (just basics), etc, despite be familiar with programming logic (more in procedural languages than OOL). Lastly, english is not my native language.

Excuses provided, let’s to the question. I intend to create a web based application to help the management of a philanthropic organization which I belong. The main page seems like this: https://tinyurl.com/ppwk727. A header (blue), a main menu bar (gray), an auxiliary side bar (orange) and a main panel (white), that is where things realy will happen.

Basicaly, I want that the options available at the sidebar will change according the choice made at main menu bar. And the content of main painel will change due choices made from sidebar. To do this, I wrote the code below (at the end).

Please, note that i choose two differents ways for render the menus. At the sidebar, I did directly in main page. For the main menu, I loaded it from another page (this: http://pastebin.com/Jaf67cvA). The reason I did this was just for segregate the code to not charge so much the main page.

I have two doubts about this case. First, can I (if yes, how?) handle the options selected in the main menu bar (id=”MenuBar”) to change the options listed in the menu placed at the sidebar menu (id=”SideMenu”), although the jqxMenu widget (MenuBar) was initialized and loaded in that panel from another page (see the code snippet commented in the http://pastebin.com/Jaf67cvA). If it’s not possible this way, is there another way to make this with the main menu bar from another page or just from same page, as I did in sidebar?

The last doubt is how can I handle the option choosed in main menu bar (the commented code in pastebin) using the field “value” declared in array scrMenuBar, instead using “element.textContent”?

I am grateful in advance and, since I noticed that the jqwidgets team answer lots of questions in this forum, I want to congratulate you for the excelent job doing this framework!


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title></title>     
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <!-- dependências framework -->
        <!-- estilos [o jqx.base.css é obrigatório e deve ser o primeiro -->
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"/>
        <link href="jqwidgets/styles/jqx.arctic.css" rel="stylesheet" type="text/css"/>
        <link href="jqwidgets/styles/jqx.orange.css" rel="stylesheet" type="text/css"/>        
        
        <!-- faz com que o corpo da página ocupe toda a área do browser -->
        <style type="text/css">
            html, body {
                height: 100%;
                width: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
                font-family: Verdana;
                font-size: 13px;
            }
            .rodape {
                overflow: hidden;
                font-family: Verdana;
                font-size: 10px;                
            }
        </style>
        
        <!-- componentes do framework -->
        <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>   
        
        <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>                
        
        <!-- scripts da pagina -->
        <script type="text/javascript">
            $(document).ready(function () {
                
                var tema = "orange";       
                
                // divide na horizontal e cria a barra de menu e o painel principal
                $("#SplitH").jqxSplitter({                  
                                        theme: tema,
                                        width: '100%', 
                                        height: '100%',
                                        orientation: 'horizontal',
                                        showSplitBar: false,
                                        resizable: false,  
                                        panels: [
                                                 {
                                                  size: '32px'
                                                 }
                                                ]
                                        });
                          
                // divide o painel principal na vertical (sidebar e painel principal)
                $("#SplitV").jqxSplitter({                  
                                        theme: tema,
                                        width: '100%', 
                                        height: '100%',
                                        orientation: 'vertical',
                                        showSplitBar: true,
                                        resizable: true,  
                                        panels: [
                                                 {
                                                  size: '150px',
                                                  min: '50px'
                                                 }
                                                ]
                                        });                

                // carrega a página inicial no painel principal
                $("#Content").load('MainPanel.html');          
                
                // define o menu priniciapl (suspenso)
                $("#MenuBar").load('MenuBar.html'); 
                
                // define o menu lateral (sidebar)
                // $("#SideBar").load('SideMenu.html');
                // o bloco abaixo substitiui a chamada comentada acima
                var srcSideMenu = [
                    { html: "<img src='images/mailIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>E-mail</span>", items: [
                        { html: "<img src='images/calendarIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Calendário</span>" },
                        { html: "<img src='images/contactsIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Contatos</span>" }
                    ]
                    },
                    { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Caixa Entrada</span>", items: [
                        { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Loja</span>" },
                        { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Grande Loja</span>" },
                        { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Outros</span>"}]
                    },
                        { html: "<img src='images/recycle.png'/><span style='position: relative; left: 3px; top: -2px;'>Ítens excluidos</span>" },
                        { html: "<img src='images/notesIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Notas</span>" },
                        { html: "<img src='images/settings.png'/><span style='position: relative; left: 3px; top: -2px;'>Confiurações</span>" },
                        { html: "<img src='images/favorites.png'/><span style='position: relative; left: 3px; top: -2px;'>Favoritos</span>" }
                    ];

                    $("#SideMenu").jqxMenu({ 
                                            source: srcSideMenu,
                                            theme: tema, 
                                            width: '100%', 
                                            height: '1000px', 
                                            mode: 'vertical'
                                        });
                    $("#SideMenu").css('visibility', 'visible');
                    // fim do bloco que forma o menu lateral

                // inicia a sidebar fechada    
                $("#SplitV").jqxSplitter('collapse');
            });
    </script>    

    </head>
    
    <body>
          
        <!-- cabeçalho -->
        <div style="position: absolute; width: 100%; height: 80px; background: blue">
            Cabeçalho
        </div>        
        
        <!-- corpo útil 
             nota: padding-top tem que ser igual ao height do cabeçalho e 
                   padding-bottim tem que ser igual ao height do rodapé
        -->          
        <div style="position: absolute; 
                    box-sizing: border-box; 
                    -moz-box-sizing: border-box; 
                    padding-top: 80px; 
                    padding-bottom: 20px; 
                    width: 100%; 
                    height: 100%;">

            <div id="SplitH">
                <div id="MenuBar" style="border: none; ">
                </div>
                    Barra de menus suspensos
                <div>
                    <div id="SplitV">
                        <!-- renderiza o side bar [esquerdo] -->
                        <div>
                            <div id="SideMenu" style="height: 100%; width: 100%; visibility: hidden; border: none; overflow: hidden;">
                        </div>    
                        <!-- renderiza o painel prinicial -->    
                        </div>                            
                        <div id="Content" style="border: none; overflow: hidden;">
                        </div>                            
                    </div>                       
                </div>       
            </div>
        </div>
        
         
        <!-- rodapé -->
        <div class="rodape" style="position: absolute; bottom: 0; width: 100%; height: 20px;">
            Rodapé
        </div>
                  
    </body>
</html>

February 18, 2015 at 11:27 am alter panel content from another page. is it possible? #67301

Nadezhda

Participant

Hello boxmga,

1) I think it would be better to initialize MenuBar(main menu) in the main page and the SideMenu(menu from sidebar) in other page(s) because if I understand you correctly you don’t want to change the items of main menu. In this case you can check which item of the main menu is selected and then to load the SideMenu.
You can do it from the same page or from another pages.

2)With “value” field you can get the item’s value. Unfortunately, the “value” field is not
accessible at the moment. You can alse use $(event.target).text(); (see MenuBar.html).

I would suggest you to reference the script files only in the main page if you are using main page and another page(s). For example:

mainPage.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- dependências framework -->
    <!-- estilos [o jqx.base.css é obrigatório e deve ser o primeiro -->
    <link href="../../../jqwidgets/styles/jqx.base.css" rel="stylesheet" />
    <link href="../../../jqwidgets/styles/jqx.arctic.css" rel="stylesheet" />
    <link href="../../../jqwidgets/styles/jqx.orange.css" rel="stylesheet" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <!-- componentes do framework -->
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <!-- faz com que o corpo da página ocupe toda a área do browser -->
    <style type="text/css">
        html, body {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            font-family: Verdana;
            font-size: 13px;
        }

        .rodape {
            overflow: hidden;
            font-family: Verdana;
            font-size: 10px;
        }
    </style>

    <!-- scripts da pagina -->
    <script type="text/javascript">
        $(document).ready(function () {
            var tema = "orange";

            // divide na horizontal e cria a barra de menu e o painel principal
            $("#SplitH").jqxSplitter({
                theme: tema,
                width: '100%',
                height: '100%',
                orientation: 'horizontal',
                showSplitBar: false,
                resizable: false,
                panels: [
                         {
                             size: '32px',
                         }
                ]
            });

            // divide o painel principal na vertical (sidebar e painel principal)
            $("#SplitV").jqxSplitter({
                theme: tema,
                width: '100%',
                height: '100%',
                orientation: 'vertical',
                showSplitBar: true,
                resizable: true,
                panels: [
                         {
                             size: '150px',
                             min: '50px',
                         }
                ]
            });

            // carrega a página inicial no painel principal
            $("#Content").load('MainPanel.html');

            // define o menu priniciapl (suspenso)
            $("#MenuBar").load('MenuBar.html');

            // define o menu lateral (sidebar)
            // $("#SideBar").load('SideMenu.html');
            // o bloco abaixo substitiui a chamada comentada acima
            var srcSideMenu = [
                {
                    html: "<img src='images/mailIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>E-mail</span>", items: [
                      { html: "<img src='images/calendarIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Calendário</span>" },
                      { html: "<img src='images/contactsIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Contatos</span>" }
                    ]
                },
                {
                    html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Caixa Entrada</span>", items: [
                      { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Loja</span>" },
                      { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Grande Loja</span>" },
                      { html: "<img src='images/folder.png'/><span style='position: relative; left: 3px; top: -2px;'>Outros</span>" }]
                },
                    { html: "<img src='images/recycle.png'/><span style='position: relative; left: 3px; top: -2px;'>Ítens excluidos</span>" },
                    { html: "<img src='images/notesIcon.png'/><span style='position: relative; left: 3px; top: -2px;'>Notas</span>" },
                    { html: "<img src='images/settings.png'/><span style='position: relative; left: 3px; top: -2px;'>Confiurações</span>" },
                    { html: "<img src='images/favorites.png'/><span style='position: relative; left: 3px; top: -2px;'>Favoritos</span>" }
            ];

            $("#SideMenu").jqxMenu({
                source: srcSideMenu,
                theme: tema,
                width: '100%',
                height: '1000px',
                mode: 'vertical'
            });
            $("#SideMenu").css('visibility', 'visible');
            // fim do bloco que forma o menu lateral

            // inicia a sidebar fechada    
            $("#SplitV").jqxSplitter('collapse');
        });
    </script>
</head>
<body>
    <!-- cabeçalho -->
    <div style="position: absolute; width: 100%; height: 80px; background: blue">
        Cabeçalho
    </div>
    <!-- corpo útil 
             nota: padding-top tem que ser igual ao height do cabeçalho e 
                   padding-bottim tem que ser igual ao height do rodapé
    -->
    <div style="position: absolute; box-sizing: border-box; -moz-box-sizing: border-box; padding-top: 80px; padding-bottom: 20px; width: 100%; height: 100%;">
        <div id="SplitH">
            <div id="MenuBar" style="border: none;">
            </div>
            Barra de menus suspensos
            <div>
                <div id="SplitV">
                    <!-- renderiza o side bar [esquerdo] -->
                    <div>
                        <div id="SideMenu" style="height: 100%; width: 100%; visibility: hidden; border: none; overflow: hidden;">
                        </div>
                        <!-- renderiza o painel prinicial -->
                    </div>
                    <div id="Content" style="border: none; overflow: hidden;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- rodapé -->
    <div class="rodape" style="position: absolute; bottom: 0; width: 100%; height: 20px;">
        Rodapé
    </div>
</body>
</html>

MenuBar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var tema = "artic";

                var srcMenuBar =
                [
                    { label: "Inicío", value: "1" },
                    {
                        label: "Pessoal", value: "2", items: [
                              { label: "Meus dados", value: "2.1" },
                              { label: "Minhas finanças", value: "2.2" }
                        ]
                    },
                    { label: "Secretaria", value: "3" },
                    { label: "Tesouraria", value: "4" },
                    { label: "Chancelaria", value: "5" },
                    { label: "Biblioteca", value: "6" },
                    { label: "Minha loja", value: "7" }
                ];

                $("#MenuBar").jqxMenu({
                    source: srcMenuBar,
                    theme: tema,
                    width: '99.7%',
                    height: '100%',
                    autoSizeMainItems: false,
                    showTopLevelArrows: true
                });
                /*                
                                $('#jqxMenu').on('itemclick', function (event) {
                                    var element = event.args;
                                    if (element.textContent == "Secretaria") {
                                        $('#ContentPanel').load('test.thml');
                                        }    
                                });                    
                */

                $('#MenuBar').on('itemclick', function (event) {
                    alert($(event.target).text() + " item has been clicked");
                });
            });
        </script>
        <div id='MenuBar'>
        </div>
    </div>
</body>
</html>

MainPanel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body class='default'>
    <div>This is a main panel.</div>
</body>
</html>

Best Regards,
Nadezhda

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

February 18, 2015 at 12:28 pm alter panel content from another page. is it possible? #67312

boxmga

Participant

Hi Nadezhda,

1) I think it would be better to initialize MenuBar(main menu) in the main page and the SideMenu(menu from sidebar) in other page(s) because if I understand you correctly you don’t want to change the items of main menu. In this case you can check which item of the main menu is selected and then to load the SideMenu.
You can do it from the same page or from another pages.

In fact, this is inverted. I just did this to test how each mode works.

Let me see if I correctly understood (I’m at working now and can’t test the code): once you created the widget on the main page, it can be handled by any child page? It means that new pages will inherit the objects created/placed in the father pages? I know this behavior is default in desktop languages (sorry, but, as I said, I’m not a professional programmer) but didn’t had confidence for the web programming. It’s correct?

2)With “value” field you can get the item’s value. Unfortunately, the “value” field is not
accessible at the moment. You can alse use $(event.target).text(); (see MenuBar.html).

I would suggest you to reference the script files only in the main page if you are using main page and another page(s). For example:

Again, I can’t test now, but I’ll do. What I want here is handle the menu choice by a ID or index (that will be a constant), not by the label, which can change (in future site upgrades, for example) or be duplicate (in sub-menus).

Thank you so much.

Cristiano

February 19, 2015 at 7:42 am alter panel content from another page. is it possible? #67345

Nadezhda

Participant

Hi Cristiano,

If you want to get menu item’s id you can achieve it from main page and from another page. You can achieve it with ‘itemclick’ event. Here is an example:

$('#SideMenu').on('itemclick', function (event) {
    var elementId = event.args.id;
    alert(elementId);
});

I hope it would be helpful.

Best Regards,
Nadezhda

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

February 22, 2015 at 11:08 pm alter panel content from another page. is it possible? #67453

boxmga

Participant

Just a new question: on message above, in the “MainPage.html”, I initialized the variable “tema” with the value “orange”.

When I load “MenuBar.html” to the “#MenuBar” <div>, how can I get the this value to pass to set the same (or another) variable in “MenuBar.html”?

February 23, 2015 at 8:19 am alter panel content from another page. is it possible? #67476

Nadezhda

Participant

Hi Cristiano,

You can not get the theme property from another page. If you want to use the same theme for “MenuBar” and “SideMenu” you should set the same theme name in both files. In “MenuBar.html” page it is not necessary to refer theme css file because you refer it in “MainPage.html”.

Best Regards,
Nadezhda

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

February 23, 2015 at 4:10 pm alter panel content from another page. is it possible? #67530

boxmga

Participant

So, there is no way to pass the theme variable value used in some page to his child page?

I use the variable “tema” to set the value of “theme” property for each widget I create (I set his var by hand in each page). But I wanna be sure that all variables declared in all sub-pages (child pages) has the same value definied in the main page without have to set manualy his value.

I would like to get automaticaly the value of previous/father page, can I do this?

February 24, 2015 at 7:01 am alter panel content from another page. is it possible? #67547

Nadezhda

Participant

Hi Cristiano,

You can try to add the following line var style = $("#SideMenu").jqxMenu('theme'); after document ready function in another page(i.e in MenuBar.html). You should set ‘theme’ to ‘style’. I hope it would be helpful.

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.