jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Changing tools in the toolbar – anomalous behaviour

This topic contains 2 replies, has 2 voices, and was last updated by  alastairwalker 1 week, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • alastairwalker
    Participant

    I have encountered some strange (or anomalous) behaviour when switching tools (in this case simply buttons) in the toolbar.

    To simulate the problem I have set up a simple demonstration with a single toolbar, but with two variants of a display on the toolbar, that I have called Option A, and Option B.

    Option A (the default display) shows only a single button, while Option B shows two buttons.

    Intuitively, when Selection Option A is clicked – a single button should be displayed on the toolbar. When Select Option B is clicked, the toolbar shows two buttons.

    When the code is initialised, Button A 0 is shown on the toolbar. This is the default option. This is correct.

    If Select Option B is clicked, then the buttons on the toolbar show ‘Button A 0 Button A 0’ It should be ‘Button B 0 Button B 1’.

    If ‘Select Option A’ is then clicked, then ‘Button B 0’ is shown on the toolbar. It should be ‘Button A 0’.

    Clearly, I am misunderstanding something in the toolbar setup/initialisation.

    Any guidance on this matter will be really appreciated!

    Many thanks,

    Alastair

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
        <title>jQuery Toolbar Sample - Anomalous Behaviour when switching tools</title>
        <link type="text/css" rel="Stylesheet" href="libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxtoolbar.js"></script>
        <script type="text/javascript">
            $(document).ready(function () 
            {
            	var initToolsA = function (type, index, tool, menuToolIninitialization) 
                {
                	tool.text("Button A 0")
                }
    
            	var initToolsB = function (type, index, tool, menuToolIninitialization) 
                {
                	switch (index) 
                    {
                    	case 0:
                        	tool.text("Button B 0");
                        break;
                        case 1:
                        	tool.text("Button B 1");
                    	break;
                    }
                }
                
                $("#jqxToolbar").jqxToolBar(
                { 
                	width: "100%",
                	height: 35,
                	tools: "button ",
    	            initTools: initToolsA
                });
    	        $("#jqxOptionA").jqxButton( { width: '150', height: '25'});
    	        $('#jqxOptionA').on('click', function () 
    	        { 
    	            console.log ('Option A');
    			$("#jqxToolbar").jqxToolBar(
    	            { 
    	          		tools: "button ",
    	                initTools: initToolsA
    	            });
    	        }); 
    	        $("#jqxOptionB").jqxButton( { width: '150', height: '25'});
    	        $('#jqxOptionB').on('click', function () 
    	        { 
    	            console.log ('Option B');
    		    $("#jqxToolbar").jqxToolBar(
    	            { 
    	            	tools: "button | button ",
    	                initTools: initToolsB
    	            });
    	        });
             });
        </script>
    </head>
    <body>
        <div id="jqxToolbar"></div>
        <div id="jqxOptionA" style="margin-top: 10px;">Select Option A</div>
        <div id="jqxOptionB" style="margin-top: 10px;">Select Option B</div>
    </body>
    </html>
    
    

    Hristo
    Participant

    Hello Alastair,

    Thank you for the example, it is good to have it for a better understanding of the case.
    As I understand you there should have two different cases for one jqxToolBar.
    For this purpose, the most appropriate approach will be to destroy the widget and create it again depends on the case set there needed buttons.
    Because on the tried way it tries to re-initialize it which is not a correct approach.

    Another option that I think is possible here is to always have two buttons and show/hide it with a change of the content depending on the case.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    alastairwalker
    Participant

    Ok – I get it!

    Thank you for the comments!

    Best regards,

    Alastair

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

You must be logged in to reply to this topic.