Jin
Jin

Reputation: 143

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

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.

Upvotes: 1

Views: 10424

Answers (3)

user1054310
user1054310

Reputation: 171

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

Upvotes: 0

andy.v
andy.v

Reputation: 56

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);

Upvotes: 4

Tom
Tom

Reputation: 7028

I made a quick mock-up: try it here

This is my page setup: 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.

Upvotes: 5

Related Questions