jqwidgets: initiating button inside window

793 Views Asked by At

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>

1

There are 1 best solutions below

0
On

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.