This discussion is archived
14 Replies Latest reply: Dec 18, 2008 9:03 PM by 614588 RSS

Use navigation keys in tabular form

435127 Newbie
Currently Being Moderated
Has anyone any javascript or other method that allows the arrow keys to navigate around a tabular form ?

In particular I wish to allow the user to move between rows using the key up / down.

Thanks

Seán
  • 1. Re: Use navigation keys in tabular form
    VANJ Journeyer
    Currently Being Moderated
    This is not possible.
  • 2. Re: Use navigation keys in tabular form
    VANJ Journeyer
    Currently Being Moderated
    Oh all right, I guess nothing is impossible.

    See

    http://htmldb.oracle.com/pls/otn/f?p=24317:122

    Pressing the Up or Down keys in any input field takes you to the next/previous row.

    See the HTML source for all the code.

    Hope this helps.
  • 3. Re: Use navigation keys in tabular form
    VANJ Journeyer
    Currently Being Moderated
    In FF, when I do this, everything works, but I keep getting the following error in the JS console

    Error: [Exception... "'Permission denied to get property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: http://htmldb.oracle.com/pls/otn/f?p=24317:122:17041431671267201002::::: :: NextRow :: line 113" data: no]
    Source File: http://htmldb.oracle.com/pls/otn/f?p=24317:122:17041431671267201002:::::
    Line: 113

    Thats because the Down arrow triggers the INPUT fields autocomplete dropdown and my event handler is stepping on that one.

    If I go to that column and add autocomplete="off" in the Form Element Attributes, I dont get this error.

    Question:

    Is there a quick way to add this autocomplete="off" to the Form Element Attributes for all columns in a Report region? I couldnt see a way to add it to the template.

    Thanks
  • 4. Re: Use navigation keys in tabular form
    435127 Newbie
    Currently Being Moderated
    Excellent , thanks .
  • 5. Re: Use navigation keys in tabular form
    VANJ Journeyer
    Currently Being Moderated
    Is there a quick way to add this autocomplete="off"
    to the Form Element Attributes for all columns in a
    Report region? I couldnt see a way to add it to the
    template.
    There is no way to do this. There really should be a quick way to add/modify all Form Element Attributes of a tabular form.

    Please consider this an enhancement request.

    Aw, what the heck, who needs an enhancement when a little DOM hacking does the trick!

    Added the following to the region footer to make FF suppress the autocomplete dropdown on the text fields.
    <script type="text/javascript">
    var cell=html_GetElement('ENAME')
    var table=html_CascadeUpTill(cell,'TABLE')
    var inputs=table.getElementsByTagName('input')
    for (j=0;j<inputs.length;j++) {
        if (inputs[j].type=="text" && inputs[j].setAttribute)
            inputs[j].setAttribute("autocomplete","off")
    }
    </script>
  • 6. Re: Use navigation keys in tabular form
    3180 Newbie
    Currently Being Moderated
    Vikas,

    The link <http://htmldb.oracle.com/pls/otn/f?p=24317:122> seems to be broken, I think you might have removed this page.

    Is there any chance you can create this example again ?

    thanks

    Vishal
  • 7. Re: Use navigation keys in tabular form
    135285 Oracle ACE
    Currently Being Moderated
    Hi,

    I have included a similar functionality as Vikas describes into my ApexLib Framework. One API call is enough to activate it for all tabular forms (manual and updateable) in an application.

    See http://inside-apex.blogspot.com/2007/02/tabular-form-record-navigation-with.html for details.

    Patrick
    ------------------------------------------------------------------------------------
    Check out my APEX-blog: http://inside-apex.blogspot.com
  • 8. Re: Use navigation keys in tabular form
    614588 Newbie
    Currently Being Moderated
    Hi All,

    Do we have solution for this, without downloading the complete ApexLib Framework mentioned in the thread.

    Please suggest.

    Regards
    Ravijeet
  • 9. Re: Use navigation keys in tabular form
    614588 Newbie
    Currently Being Moderated
    Hi Team

    Has any one got solution for this, other than downloading complete ApExLib Framework?

    Regards,
    Ravijeet
  • 10. Re: Use navigation keys in tabular form
    Roel Oracle ACE Director
    Currently Being Moderated
    Hello,

    Yep. See [my blog|http://roelhartman.blogspot.com/2008/12/moving-through-tabular-forms-using.html] .

    BTW : There is absolutely nothing wrong with the ApexLib FrameWork....

    Greetings,
    Roel

    http://roelhartman.blogspot.com/
    http://www.bloggingaboutoracle.org/
    http://www.logica.com/

    You can award this reply to your question by marking it as either Helpful or Correct ;-)
  • 11. Re: Use navigation keys in tabular form
    614588 Newbie
    Currently Being Moderated
    Hi Roel

    Many Thanks for your valuable inputs, this answers my question exactly I wanted, have marked the question as answered :-)

    If you can just put condition that arrow down key should not be executed on last row and similarly arrow up Key should not execute on first row (else we get error), that would be great.Its small change , I did today on My Local Application and it works fine.

    Thanks Again!

    Hi Andy

    Thanks as usual for helping on this too.

    As per the solution provided by Roel, it works. Extra requirement as per our discussion on thread regarding clicking a row on tabular form (& the application on OTN ) mentioned in this thread: Re: OnClick Event on Standard Report/Tabular Form Row
    would be that whenever cursor moves to next record or previous record as per the Key pressed, it should populate the items in the last region (display region) as per Row's hidden column values on which cursor is on.
    I tried doing it today on my local application(Not on OTN one ,not to disturb it) using the following extra code in Roel's codes:

    Tabular form's field (say salary in our case) element attributes: onkeyup="moveUpDown(this, event)"

    Page HTML Header:
    <script language="JavaScript" type="text/javascript">
    function moveUpDown(pThis, pEvent)
    {  
    var keynum;
    var current;
    vCurrent = pThis.name;
    var l= document.getElementsByName(vCurrent).length;
    if(window.event) // IE
    { keynum = pEvent.keyCode; }
    else if(pEvent.which) // Netscape/Firefox/Opera
    { keynum = pEvent.which; }
    if (keynum == 40 || keynum == 38 || keynum == 13) // Key-Up or Key-Down or Enter
    { for (i=0;i < document.getElementsByName(vCurrent).length;i++)  
    { if ( document.getElementsByName(vCurrent)[i].id == pThis.id ) // This is current row
    { if (keynum == 40 || keynum == 13 && i != l-1) // Move down  
    { document.getElementsByName(vCurrent)[i+1].focus();
    passValues(r.rows[i+2]);
    }
    if(keynum == 38 && i !=0)
    { document.getElementsByName(vCurrent)[i-1].focus();
    passValues(r.rows);}
    }
    }
    }
    }</script>

    Just called our java script function "passValues" with the global variable "r" and I see that it worked.
    Was Just wondering How you would do it Andy & if this is correct Approach?

    Many Thanks as usual for your great help.

    Regards,
    Ravijeet
  • 12. Re: Use navigation keys in tabular form
    ATD Guru
    Currently Being Moderated
    Hi Ravijeet,

    I would have to say that "if it works, it's correct"!!!

    But, yes, it is the sort of thing that I would have done.

    Andy
  • 13. Re: Use navigation keys in tabular form
    Roel Oracle ACE Director
    Currently Being Moderated
    Hello,

    I updated the code to prevent the javascript errors on the first and last row....

    Greetings,
    Roel

    http://roelhartman.blogspot.com/
    http://www.bloggingaboutoracle.org/
    http://www.logica.com/

    You can award this reply to your question by marking it as either Helpful or Correct ;-)
  • 14. Re: Use navigation keys in tabular form
    614588 Newbie
    Currently Being Moderated
    Many Thanks Andy, Roel for your help on this.

    Regards
    Ravijeet