jQWidgets Forums

Tagged: Button, close, created, focus, jqxwindow, window

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

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

Author

Window focus setting Posts
March 16, 2013 at 8:06 pm Window focus setting #17214

Ivalde
Participant

Within my site I have a window with an OK button.

When the window is opened, I would like it to be focused so that the user can close it directly with either the Esc key or the Enter key (ie. simulating OK button click). For the standard JQuery dialog box this is built-in standard mechanismes. So how to make it work for your jqxWindow?

Within $(document).ready(function () … I have the following window initialization:

$(‘#jqxWindow’).jqxWindow({ theme: ‘classic’, isModal: true , width: 300, minHeight: 100, resizable: false,
okButton: $(‘#jqxBtnOK’)
});

Within $(document).ready(function () … I then tried with the following:

$(‘#jqxWindow’).on(‘open’, function (event) {
$(‘#jqxWindow’).jqxWindow(‘focus’);
});

Resulting in no window focus when window is opened. User still have to click inside the opened window for the Esc key closure mechanism to work.

How to set this window’s focus?

For the Enter key to simulate the OK button click, How to set the OK button focus so that user can close window with an Enter key strike?

March 18, 2013 at 9:15 am Window focus setting #17275
Dimitar
Participant
Hello Ivalde,

Here is the solution:
```
<!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.9.1.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 () {
                $('#jqxwindow').on('created', function (event) {
                    $('#okButton').focus()
                });
                $("#jqxwindow").jqxWindow({ height: 90, width: 150, theme: 'summer', okButton: $('#okButton'), isModal: true });
            });
        </script>
        <button id="123">
            Open</button>
        <div id='jqxwindow'>
            <div>
                Header</div>
            <div>
                Content
                <button id="okButton">
                    OK</button>
            </div>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
March 19, 2013 at 7:52 pm Window focus setting #17497

Ivalde
Participant

Dimitar,

Thanks a lot for the solution to this.

For this window with this OK button, I have another question also:

The window is to be opened when an ajax data update request is completed, for the user to be known to the completion. The window open event is then set to:

$(‘#jqxWindow’).on(‘open’, function (event) {
$(‘#jqxBtnOK’).focus()
});

So long so good, it does operates correct.

However, whenever I would like to manipulate the window content for the completion msg, the okButton disappears. The code for the window content manipulation together with the window opening is set to:

$(‘#jqxWindowOK’).jqxWindow({ content: “Detaljene er oppdatert” });
$(‘#jqxWindowOK’).jqxWindow(‘open’);

What then happen is that window button is gone… and I’m lost…

Best regards,
Ivalde

March 21, 2013 at 3:11 pm Window focus setting #17649

Ivalde
Participant

Is there no solution to this with the existing software?

That means, whenever we would like a runtime content change, the button is missed as it belongs to the original contents now changed?

Please confirm whether there is no solution.

March 25, 2013 at 10:58 pm Window focus setting #17984

Ivalde
Participant

Do you plan for a solution to this in coming release?

March 26, 2013 at 11:28 am Window focus setting #18042
Dimitar
Participant
Hi Ivalde,

The button is part of the content. The solution is to attach it each time you’d like to change the content, e.g.:
```
$(‘#jqxWindowOK’).jqxWindow({ content: “Detaljene er oppdatert<br /><button id='OKButton'>OK</button>” });
```
Best Regards,
Dimitar

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

Posts

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

You must be logged in to reply to this topic.