Changing tools in the toolbar - anomalous behaviour - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 2 replies, has 2 voices, and was last updated by alastairwalker 4 years, 11 months ago.

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

Author

Changing tools in the toolbar – anomalous behaviour Posts

November 8, 2019 at 2:30 pm Changing tools in the toolbar – anomalous behaviour #107286

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>

November 11, 2019 at 11:15 am Changing tools in the toolbar – anomalous behaviour #107298

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

November 11, 2019 at 12:16 pm Changing tools in the toolbar – anomalous behaviour #107301

alastairwalker

Participant

Ok – I get it!

Thank you for the comments!

Best regards,

Alastair

Author

Posts

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

You must be logged in to reply to this topic.