jqwidgets: initiating button inside window

Question

I have a problem when initiating jqxButton inside jqxWindow:

Expected: When I click Add button, the Confirm button caption will be set to "Add", otherwise when I click Edit button.

Problem: The Confirm button caption is set to proper button at the first time I clicked, but then the caption will not changed.

Note: The problem raised if i set window property autoOpen: false.

This problem raised when I use jQWidgets V5.1.0. When I use jQWidgets v4.3.0, this problem does not happen.

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta name="description" content="" />
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxwindow.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/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        
        $(document).ready(function () {              
            $('#btnAdd').click(function () {
                $('#window').jqxWindow('open');                    
                $("#confirm").jqxButton({ value: "Add" });
            });

            $('#btnEdit').click(function () {
                $('#window').jqxWindow('open');                    
                $("#confirm").jqxButton({ value: "Edit" });
            });

            var jqxWidget = $('#jqxWidget');
            var offset = jqxWidget.offset();

            $('#window').jqxWindow({                
                autoOpen: false, 
                minWidth: 200, 
                height: 300, 
                width: 500,
                initContent: function () 
                {                   
                    $("#confirm").jqxButton();
                }
            });         

            
        });

    </script>
</head>
<body class='default'>
    <div id="jqxWidget">
        <div style="float: left;">
            <div>
                <input type="button" value="Add" id="btnAdd" />
                <input type="button" value="Edit" id="btnEdit" />
            </div>
            
        </div>
        <div id="mainDemoContainer">
            <div id="window">            
                <div  id="windowContent">
                    <input type="button" id="confirm" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Remember, that bold formatting is helpful to emphasize parts of your post. If you mark half of your text as bold you take away the benefits of it and it starts to look pretty distracting. Less is more. — Noel Widmer

jgarcias jgarcias · Accepted Answer · 2020-01-10T03:34:15

This comes late of course, but does the change in the caption have to occur through the jqxButtons properties only? After testing your code I came to following:

$('#btnAdd').click(function () {
    $('#window').jqxWindow('open');
    $("#confirm").attr('value', "Add");              // Works !
    //$("#confirm").jqxButton('val', "New Value");   // Does not work the first time only
    //$('#confirm').jqxButton({ value: "Button" });  // uncaught exception: Invalid property: value
});

$('#btnEdit').click(function () {
    $('#window').jqxWindow('open');
    $("#confirm").attr('value', 'Edit');
});

May this answer help others who meet this issue.

jqwidgets: initiating button inside window

1 Answers