14 Replies Latest reply: Dec 18, 2008 11:03 PM by 614588 RSS

    Use navigation keys in tabular form

    435127
      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
          This is not possible.
          • 2. Re: Use navigation keys in tabular form
            VANJ
            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
              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
                Excellent , thanks .
                • 5. Re: Use navigation keys in tabular form
                  VANJ
                  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
                    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
                      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
                        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
                          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 Hartman
                            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
                              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
                                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 Hartman
                                  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
                                    Many Thanks Andy, Roel for your help on this.

                                    Regards
                                    Ravijeet