jQWidgets Forums

Tagged: focus, jqxwindow, tab index, window

This topic contains 3 replies, has 3 voices, and was last updated by Peter Stoev 11 years, 10 months ago.

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

Author

Tab index problem in window Posts

July 18, 2013 at 6:23 am Tab index problem in window #25391

Participant

I have a form with several input controls open in a window.From that window I have to open another window with some text input controls. But when I press tab key in 2nd window from 1st textbox control its focus to 1st control of 1st window and again.Tab index cannot go to 2nd textbox of 2nd window. I have use this

 $("#ChangeMobileSMSVerificationform").jqxWindow({keyboardNavigation: true, height: 300, width: 700, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.30, initContent: function () {
            $('#ChangeMobileSMSVerificationform').jqxWindow('focus');
        }

July 19, 2013 at 6:53 am Tab index problem in window #25461

Dimitar

Participant

Hello basumrinmoy,

We tested the following example for the reported issue using the latest version of jQWidgets (2.9.3). The focus correctly goes from the second window to the first and second text inputs in it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxwindow1").jqxWindow({ height: 300, width: 700, theme: 'summer' });
                $("#jqxwindow2").jqxWindow({ keyboardNavigation: true, height: 100, width: 500, resizable: false, theme: "summer", isModal: true, autoOpen: false, modalOpacity: 0.30, initContent: function () {
                    $('#jqxwindow2').jqxWindow('focus');
                }
                });
                $("#open").click(function () {
                    $("#jqxwindow2").jqxWindow("open");
                });
            });
        </script>
        <div id='jqxwindow1'>
            <div>
                Header</div>
            <div>
                <input type="text" />
                <input type="text" />
                <button id="open">
                    Open window.</button>
            </div>
        </div>
        <div id='jqxwindow2'>
            <div>
                Header</div>
            <div>
                <input type="text" />
                <input type="text" />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

July 19, 2013 at 3:08 pm Tab index problem in window #25513

basumrinmoy

Participant

I follow same procedure as you show example . I am using 2.8.3 version. But problem remains.

July 21, 2013 at 7:24 am Tab index problem in window #25527

Peter Stoev

Keymaster

Hi basumrinmoy,

As Dimitar pointed out, the described behavior is not reproducible with version 2.9.3, not 2.8.3. I suggest you to consider moving to 2.9.3.

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.