You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Marco Di Sabatino Di Diodoro <ma...@tirasa.net> on 2012/08/20 10:44:52 UTC

Modal Window set focus

Hi all,

I want to set the focus to a ModalWindow when it is opened. This allows me to close the ModalWIndow with the esc key without having to click on it before.

suggestions?

Thanks
M

--

Dott. Marco Di Sabatino Di Diodoro
Tel. +39 3939065570

Tirasa S.r.l.
Viale D'Annunzio 267 - 65127 Pescara
Tel +39 0859116307 / FAX +39 0859111173
http://www.tirasa.net

Apache Syncope PPMC Member
http://people.apache.org/~mdisabatino





Re: Modal Window set focus

Posted by Marco Di Sabatino Di Diodoro <ma...@tirasa.net>.
On Aug 20, 2012, at 12:00 PM, Martin Grigorov wrote:

> Only form elements can be focused in HTML by default.
> To make a normal <div> focusable you need to add 'tabindex' attribute to it.

I set the focus to the ModalWindow by adding the following attribute:

<body onload="window.focus()">
...
...
</body>

It work. Thanks for your help.

> 
> Experiment with Firebug/DevTools first. Find the JS that can focus
> your modal window and then just add it in your Java code.
> 
> On Mon, Aug 20, 2012 at 12:54 PM, Marco Di Sabatino Di Diodoro
> <ma...@tirasa.net> wrote:
>> 
>> I add target.appendJavaScript("document.getElementById('" + editModalWin.getMarkupId() + "').focus();");
>> 
>> But not work...
>> 
>> Here you can found my code:
>> 
>>   final AjaxLink createLink = new IndicatingAjaxLink("createLink") {
>> 
>>            private static final long serialVersionUID = -7978723352517770644L;
>> 
>>            @Override
>>            public void onClick(final AjaxRequestTarget target) {
>>                editModalWin.setPageCreator(new ModalWindow.PageCreator() {
>> 
>>                    private static final long serialVersionUID = -7834632442532690940L;
>> 
>>                    @Override
>>                    public Page createPage() {
>>                        return new EditUserModalPage(Users.this.getPageReference(), editModalWin, new UserTO());
>>                    }
>>                });
>>                target.appendJavaScript("document.getElementById('" + editModalWin.getMarkupId() + "').focus();");
>>                editModalWin.show(target);
>>            }
>>        };
>> 
>> 
>> 
>> On Aug 20, 2012, at 10:49 AM, Martin Grigorov wrote:
>> 
>>> Hi,
>>> 
>>> You open it with modal.show(target), right ?
>>> Since you have the 'target' you can use it to execute an arbitrary
>>> JavaScript after opening the modal: target.append(someJsToFocus).
>>> 
>>> The JS should look like: "document.getElementById("
>>> +modal.getMarkupId()+ ").focus();"
>>> 
>>> On Mon, Aug 20, 2012 at 11:44 AM, Marco Di Sabatino Di Diodoro
>>> <ma...@tirasa.net> wrote:
>>>> Hi all,
>>>> 
>>>> I want to set the focus to a ModalWindow when it is opened. This allows me to close the ModalWIndow with the esc key without having to click on it before.
>>>> 
>>>> suggestions?
>>>> 
>>>> Thanks
>>>> M
>>>> 
>>>> --
>>>> 
>>>> Dott. Marco Di Sabatino Di Diodoro
>>>> Tel. +39 3939065570
>>>> 
>>>> Tirasa S.r.l.
>>>> Viale D'Annunzio 267 - 65127 Pescara
>>>> Tel +39 0859116307 / FAX +39 0859111173
>>>> http://www.tirasa.net
>>>> 
>>>> Apache Syncope PPMC Member
>>>> http://people.apache.org/~mdisabatino
>>>> 
>>>> 
>>>> 
>>>> 
>>> 
>>> 
>>> 
>>> --
>>> Martin Grigorov
>>> jWeekend
>>> Training, Consulting, Development
>>> http://jWeekend.com
>>> 
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>>> For additional commands, e-mail: users-help@wicket.apache.org
>>> 
>> 
>> --
>> 
>> Dott. Marco Di Sabatino Di Diodoro
>> Tel. +39 3939065570
>> 
>> Tirasa S.r.l.
>> Viale D'Annunzio 267 - 65127 Pescara
>> Tel +39 0859116307 / FAX +39 0859111173
>> http://www.tirasa.net
>> 
>> Apache Syncope PPMC Member
>> http://people.apache.org/~mdisabatino
>> 
>> 
>> 
>> 
> 
> 
> 
> -- 
> Martin Grigorov
> jWeekend
> Training, Consulting, Development
> http://jWeekend.com
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
> 

--

Dott. Marco Di Sabatino Di Diodoro
Tel. +39 3939065570

Tirasa S.r.l.
Viale D'Annunzio 267 - 65127 Pescara
Tel +39 0859116307 / FAX +39 0859111173
http://www.tirasa.net

Apache Syncope PPMC Member
http://people.apache.org/~mdisabatino





Re: Modal Window set focus

Posted by Martin Grigorov <mg...@apache.org>.
Only form elements can be focused in HTML by default.
To make a normal <div> focusable you need to add 'tabindex' attribute to it.

Experiment with Firebug/DevTools first. Find the JS that can focus
your modal window and then just add it in your Java code.

On Mon, Aug 20, 2012 at 12:54 PM, Marco Di Sabatino Di Diodoro
<ma...@tirasa.net> wrote:
>
> I add target.appendJavaScript("document.getElementById('" + editModalWin.getMarkupId() + "').focus();");
>
> But not work...
>
> Here you can found my code:
>
>    final AjaxLink createLink = new IndicatingAjaxLink("createLink") {
>
>             private static final long serialVersionUID = -7978723352517770644L;
>
>             @Override
>             public void onClick(final AjaxRequestTarget target) {
>                 editModalWin.setPageCreator(new ModalWindow.PageCreator() {
>
>                     private static final long serialVersionUID = -7834632442532690940L;
>
>                     @Override
>                     public Page createPage() {
>                         return new EditUserModalPage(Users.this.getPageReference(), editModalWin, new UserTO());
>                     }
>                 });
>                 target.appendJavaScript("document.getElementById('" + editModalWin.getMarkupId() + "').focus();");
>                 editModalWin.show(target);
>             }
>         };
>
>
>
> On Aug 20, 2012, at 10:49 AM, Martin Grigorov wrote:
>
>> Hi,
>>
>> You open it with modal.show(target), right ?
>> Since you have the 'target' you can use it to execute an arbitrary
>> JavaScript after opening the modal: target.append(someJsToFocus).
>>
>> The JS should look like: "document.getElementById("
>> +modal.getMarkupId()+ ").focus();"
>>
>> On Mon, Aug 20, 2012 at 11:44 AM, Marco Di Sabatino Di Diodoro
>> <ma...@tirasa.net> wrote:
>>> Hi all,
>>>
>>> I want to set the focus to a ModalWindow when it is opened. This allows me to close the ModalWIndow with the esc key without having to click on it before.
>>>
>>> suggestions?
>>>
>>> Thanks
>>> M
>>>
>>> --
>>>
>>> Dott. Marco Di Sabatino Di Diodoro
>>> Tel. +39 3939065570
>>>
>>> Tirasa S.r.l.
>>> Viale D'Annunzio 267 - 65127 Pescara
>>> Tel +39 0859116307 / FAX +39 0859111173
>>> http://www.tirasa.net
>>>
>>> Apache Syncope PPMC Member
>>> http://people.apache.org/~mdisabatino
>>>
>>>
>>>
>>>
>>
>>
>>
>> --
>> Martin Grigorov
>> jWeekend
>> Training, Consulting, Development
>> http://jWeekend.com
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
>> For additional commands, e-mail: users-help@wicket.apache.org
>>
>
> --
>
> Dott. Marco Di Sabatino Di Diodoro
> Tel. +39 3939065570
>
> Tirasa S.r.l.
> Viale D'Annunzio 267 - 65127 Pescara
> Tel +39 0859116307 / FAX +39 0859111173
> http://www.tirasa.net
>
> Apache Syncope PPMC Member
> http://people.apache.org/~mdisabatino
>
>
>
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org


Re: Modal Window set focus

Posted by Marco Di Sabatino Di Diodoro <ma...@tirasa.net>.
I add target.appendJavaScript("document.getElementById('" + editModalWin.getMarkupId() + "').focus();");  

But not work...

Here you can found my code:

   final AjaxLink createLink = new IndicatingAjaxLink("createLink") {

            private static final long serialVersionUID = -7978723352517770644L;

            @Override
            public void onClick(final AjaxRequestTarget target) {
                editModalWin.setPageCreator(new ModalWindow.PageCreator() {

                    private static final long serialVersionUID = -7834632442532690940L;

                    @Override
                    public Page createPage() {
                        return new EditUserModalPage(Users.this.getPageReference(), editModalWin, new UserTO());
                    }
                });
                target.appendJavaScript("document.getElementById('" + editModalWin.getMarkupId() + "').focus();");
                editModalWin.show(target);
            }
        };



On Aug 20, 2012, at 10:49 AM, Martin Grigorov wrote:

> Hi,
> 
> You open it with modal.show(target), right ?
> Since you have the 'target' you can use it to execute an arbitrary
> JavaScript after opening the modal: target.append(someJsToFocus).
> 
> The JS should look like: "document.getElementById("
> +modal.getMarkupId()+ ").focus();"
> 
> On Mon, Aug 20, 2012 at 11:44 AM, Marco Di Sabatino Di Diodoro
> <ma...@tirasa.net> wrote:
>> Hi all,
>> 
>> I want to set the focus to a ModalWindow when it is opened. This allows me to close the ModalWIndow with the esc key without having to click on it before.
>> 
>> suggestions?
>> 
>> Thanks
>> M
>> 
>> --
>> 
>> Dott. Marco Di Sabatino Di Diodoro
>> Tel. +39 3939065570
>> 
>> Tirasa S.r.l.
>> Viale D'Annunzio 267 - 65127 Pescara
>> Tel +39 0859116307 / FAX +39 0859111173
>> http://www.tirasa.net
>> 
>> Apache Syncope PPMC Member
>> http://people.apache.org/~mdisabatino
>> 
>> 
>> 
>> 
> 
> 
> 
> -- 
> Martin Grigorov
> jWeekend
> Training, Consulting, Development
> http://jWeekend.com
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
> 

--

Dott. Marco Di Sabatino Di Diodoro
Tel. +39 3939065570

Tirasa S.r.l.
Viale D'Annunzio 267 - 65127 Pescara
Tel +39 0859116307 / FAX +39 0859111173
http://www.tirasa.net

Apache Syncope PPMC Member
http://people.apache.org/~mdisabatino





Re: Modal Window set focus

Posted by Martin Grigorov <mg...@apache.org>.
Hi,

You open it with modal.show(target), right ?
Since you have the 'target' you can use it to execute an arbitrary
JavaScript after opening the modal: target.append(someJsToFocus).

The JS should look like: "document.getElementById("
+modal.getMarkupId()+ ").focus();"

On Mon, Aug 20, 2012 at 11:44 AM, Marco Di Sabatino Di Diodoro
<ma...@tirasa.net> wrote:
> Hi all,
>
> I want to set the focus to a ModalWindow when it is opened. This allows me to close the ModalWIndow with the esc key without having to click on it before.
>
> suggestions?
>
> Thanks
> M
>
> --
>
> Dott. Marco Di Sabatino Di Diodoro
> Tel. +39 3939065570
>
> Tirasa S.r.l.
> Viale D'Annunzio 267 - 65127 Pescara
> Tel +39 0859116307 / FAX +39 0859111173
> http://www.tirasa.net
>
> Apache Syncope PPMC Member
> http://people.apache.org/~mdisabatino
>
>
>
>



-- 
Martin Grigorov
jWeekend
Training, Consulting, Development
http://jWeekend.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org