locked
manage focus in popups? RRS feed

  • Question

  • hi!

    i've created filter popup (screen is based on query with parameter and i've drag parameter on popup control; also created command which shows wanted popup on "item tap"), now when i click a button, i want to open popup and set focus on parameter textbox, and also it would be nice when i press enter to automatically close popup.. can this be done (and how)? thanks!

    Kivito


    Nobody expects the Spanish Inquisition! (M.P.F.C.)

    Saturday, March 9, 2013 10:57 AM

Answers

  • Hi,

    It's close. A couple of things to note:
    - postRender method is called once when the popup is first created and it will not be invoked again. So you will have to add a custom method to open the popup, then set the focus. You can listen to the popup event as well, but then you will have to unhook the event listeners.
    - You will need to set focus on the input element of the textbox, and due to the timing, a setTimeout is required.

    In your postRender method, also cache the input element of the text box you want to focus.

    var $FilterPartneraInput;
    myapp.Sifrarnici.FilterPartnera_postRender = function (element, contentItem) {    
        attachEnterClosePopup(element, contentItem);
        $FilterPartneraInput = $("input", $(element));
    };
    

    Instead of adding a normal button that show your popup, add a custom method (Write my own method) and write the following code:

    myapp.MyScreen.MyShowPopup_execute = function (screen) {
        screen.showPopup("MyPopupName").then(function () {
            setTimeout(function () {
                $FilterPartneraInput.focus();
            }, 1);
        });
    };
    Hope this helps. Best regards.
    Huy Nguyen
    • Marked as answer by Kivito Wednesday, March 13, 2013 6:48 AM
    Tuesday, March 12, 2013 5:22 PM

All replies

  • this works for closing popup on enter, but i still didn't find a way to put focus in textbox:

    myapp.Sifrarnici.FilterPartnera_postRender = function (element, contentItem) {
        attachEnterClosePopup(element, contentItem);
    };
    
    function attachEnterClosePopup(element, contentItem) {
        $(element).keypress(function (event) {
            if (event.which == 13) {
                contentItem.screen.closePopup();
            }
        });
    };

    is this the correct way?

    Kivito


    Nobody expects the Spanish Inquisition! (M.P.F.C.)

    Sunday, March 10, 2013 7:44 PM
  • Hi,

    It's close. A couple of things to note:
    - postRender method is called once when the popup is first created and it will not be invoked again. So you will have to add a custom method to open the popup, then set the focus. You can listen to the popup event as well, but then you will have to unhook the event listeners.
    - You will need to set focus on the input element of the textbox, and due to the timing, a setTimeout is required.

    In your postRender method, also cache the input element of the text box you want to focus.

    var $FilterPartneraInput;
    myapp.Sifrarnici.FilterPartnera_postRender = function (element, contentItem) {    
        attachEnterClosePopup(element, contentItem);
        $FilterPartneraInput = $("input", $(element));
    };
    

    Instead of adding a normal button that show your popup, add a custom method (Write my own method) and write the following code:

    myapp.MyScreen.MyShowPopup_execute = function (screen) {
        screen.showPopup("MyPopupName").then(function () {
            setTimeout(function () {
                $FilterPartneraInput.focus();
            }, 1);
        });
    };
    Hope this helps. Best regards.
    Huy Nguyen
    • Marked as answer by Kivito Wednesday, March 13, 2013 6:48 AM
    Tuesday, March 12, 2013 5:22 PM
  • hi Huy!

    it works! thank you very much, i guess we need kind of "tips and tricks" section on msdn help! ;)

    cheers!

    Kivito


    Nobody expects the Spanish Inquisition! (M.P.F.C.)

    Wednesday, March 13, 2013 6:48 AM