How can I execute an apex process from javascript

Question

I am very new to javascript and apex and am learning on the job so to speak.
Let me start of by describing what I want to achieve:
I'm trying to block the Function keys from running/executing the browser functions (F1 to bring up help, F3 for find, etc). I found the javascript code to block them, but do not know what to do after that.
Eg, when a user presses F1 it should not display help, but execute a process in apex.
Such a process could for example be to save all information on the apex page text fields to the database.
How can i do this?

See my example code: instead of the alert, how would I go about executing a process and how do I go about writing such a process?

<script language="javascript">
function my_onkeydown_handler() {
    switch (event.keyCode) {
        case 112: // 'F1'      
            document.onhelp = function() {
                return (false);
            }
            window.onhelp = function() {
                return (false);
            }
            alert("F1");
            NewEntry();
            break;
    }
}
</script>

score 1 · Answer 1 · edited May 23 '17 at 12:12

$(document).keydown(function(e){
   if(e.which===112){
      console.log('F1ed');
      //NewEntry();
      return false;
   };
});

Safe to use jQuery, it comes with apex
Also see Disable specific function key using jquery

Which can be translated to a dynamic action (you didn't specify an apex version. Dynamic actions were introduced with version 4.0). Why would you use them? They're very handy in that you can use them to easily leverage javascript without really knowing a lot about it, and they can be seen in the page structure. This way you don't need javascript cluttering about in several portions of your page. Even for more advanced javascript for which there are no pre-defined actions, you can still put your own code in by using 'Execute Javascript'. Again, accessibility and maintainability! Leverage it!

Create a new dynamic action.

Event: Key Down
Selection Type: DOM Object
DOM Object: document
Condition: None

As for the (true) action:

Action: Execute Javascript Code

Code:

var e = this.browserEvent;
switch (e.which) {
   case 112: // 'F1'      
      alert("F1");
      return false;            
}

Much nicer and cleaner. And better you get comfortable with them now! Read up on them too.

On to the second part:

What i mean is that when eg F1 is pressed it must not display help but execute a process in apex for example I would like to save all information on the apex page text fields to the database. How would I go about it. See my little code, instead of the alert, how would I go about executing a process and how do I go about writing such a process?

This makes me wonder (and frown, but just a little). How familiar are you with apex already? No offense, but this is rather basic functionality you're asking about.

Say you have a report and a form page, generated by the wizard. Say you have no weird things such as this javascript on it, but just barebones.
You go from the report to the form page. Values are fetched through a process and the page is rendered. Now you alter some values and submit the page. The submitted values are then processed in the page processing, and pass through the row processing process, which will insert/update/delete data.

If you are unfamiliar with that concept, i strongly recommend you to at least follow through the Oracle® Database 2 Day + Application Express Developer's Guide (Oracle Apex documentation). Many developers just jump in head-first without giving this guide a glance. Don't. This SHORT (and really, what are maybe a couple of hours) guide will teach you some of the very basics of apex!
Important things such as session state and submitting the page are crucial to understanding what it does.

Now, assuming we have a form page with this bit of javascript on it. Pressing F1 to update the values (read: press F1 to submit the page and invoke the row processing to process the submitted values), you can use the apex javascript api's: apex.submit('APPLY') (DOC).
This will submit the page with request APPLY. This value is important. Note that buttons will submit with their name set to request value aswell, and the row processing does different processing based on a list of valid request values.

var e = this.browserEvent;
switch (e.which) {
   case 112: // 'F1'      
      alert("F1");
      apex.submit('APPLY');
      return false;            
}

Further elaboration: There are also AJAX Callbacks. These are processes on the serverside which can be invoked through a javascript call to the server. These processes are PLSQL-code, and can for example be used to return data to the calling javascript function, and avoid a full page refresh/submit.
It can be used to save data too of course. The data has to be passed to the server, and the process then works with that data. For example, when a field has been changed and you want to immediatly save this to the database but do not want a full page submit. The callback would be a plsql block which performs an update on a table.

Ajax callbacks are very interesting and useful, but i'd advise you to first get a good grip on the basics before tackling this!

score 0 · Answer 2 · answered Oct 01 '12 at 11:34

Modified code: jsfiddle

 <script language="javascript">
   document.onkeydown = function (e) {
    switch (e.keyCode) {
        case 112: // 'F1'      
            e.preventDefault(); // prevent default behavior.
             e.returnValue = false; // for IE to  prevent default behavior.
            alert("F1");
            NewEntry();
            return false;            
    }
}
</script>

How can I execute an apex process from javascript

2 Answers2