How to update records in tables in Oracle APEX using javascript/html?

Question

Currently I have a page in Oracle APEX that all html based. The page actually consists for a map and a region with the coordinates of the location that the user clicks on the map.

I'm stuck at how do I update my tables in APEX using the values from my html page.

Thanks for any guidance or help.

Answer 1

There is simplest way:
Dynamic Action on button, Execute Javascript code

var oDBGet = new htmldb_Get(null, $v('pFlowId'), "APPLICATION_PROCESS=SAVE_COORDS", $v('pFlowStepId'));
oDBGet.add('P25_NAME', $v("P25_NAME"));
oDBGet.add('P25_XCOORD', $v("P25_XCOORD"));
oDBGet.add('P25_YCOORD', $v("P25_YCOORD"));

oDBGet.get();

Page Process, AJAX Callback:

insert into coordinates
(name, xcoord, ycoord)
values
(:P25_NAME, :P25_XCOORD, :P25_YCOORD);

Answer 2

I made a quick mock-up: try it here

This is my page setup:

Dynamic Action on my button, Execute Javascript code (i used a button, could just as well bind this to any other element):

var oDBGet = new htmldb_Get(null, $v('pFlowId'), "APPLICATION_PROCESS=SAVE_COORDS", $v('pFlowStepId'));
oDBGet.addParam('x01', $v("P25_NAME"));
oDBGet.addParam('x02', $v("P25_XCOORD"));
oDBGet.addParam('x03', $v("P25_YCOORD"));

oDBGet.get();

the refresh is on the report region, to show it works.

htmldb_Get is a bit of an undocumented function in apex.

• parameter 1: session id -> unnecessary hence null
• parameter 2: application id (so you could use &APP_ID. for substitution string, but this is unusable in a .js file)
• parameter 3: the process to be executed. This can be an application or page process. Defined by parameter 4
• parameter 4: page id (again, &APP_PAGE_ID. is usable). If not provided the process is assumed to be an application level process (shared components->...)

apex_application.g_x##, 01 through 10 are 10 possible variables used for temporary storage. You pass them on like i showed: x01, x02, ... In the application process you can then reference them through apex_application.g_x##.

Page Process, AJAX Callback:

insert into coordinates
(name, xcoord, ycoord)
values
(apex_application.g_x01, apex_application.g_x02, apex_application.g_x03);

To customize this to your needs, you'll need to bind the event to the correct selectors, and provide the correct variables.

Answer 3

Might it be possible that in APEX 4.1 the add method does not work?