Populate Tabular form field value with change of another field

Question

There is a Tabular form with description, previous_value, unit_price fields in my Oracle Apex app.

I need to populate value of previous_value field with data on description field. I have a query to get value for previous_value field from database. i need to add onChange event to description field. with the changes in description field, value for previous_value field should be populate using my query.

how could i do this ?

Answer 1

You can bind the change event to the field in several ways. Target through the td headers, or edit the column, and in the "Element attributes" field you could add a class (eg "fireAjax"). You can then bind to the event with either javascript code, or do this via a dynamic action.

You can do an ajax call in either of these 2 forms: through htmldb_Get or with jquery.post:

$('td[headers="ENAME"] input').change(function(){   
   var ajaxRequest = new htmldb_Get( null , $v('pFlowId') , 'APPLICATION_PROCESS=get_job' , $v('pFlowStepId'));
   ajaxRequest.addParam('x01', $(this).val());
   ajaxResult = ajaxRequest.get();
   $(this).closest("tr").find("td[headers='JOB'] input").val(ajaxResult);
});

OR

$('td[headers="ENAME"] input').change(function(){
var that = this;
$.post('wwv_flow.show', 
       {"p_request"      : "APPLICATION_PROCESS=get_job",
        "p_flow_id"      : $v('pFlowId'),
        "p_flow_step_id" : $v('pFlowStepId'),
        "p_instance"     : $v('pInstance'),
        "x01"            : $(this).val()
        },
        function(data){ 
           var eJob = $(that).closest("tr").find("td[headers='JOB'] input");
           eJob.val(data);
        },
        "text"
      );
});

With this application process, defined on the page with execution point "AJAX Callback":
Name: get_job

DECLARE
   l_job emp.job%TYPE;
BEGIN
   SELECT job
   INTO l_job
   FROM emp
   WHERE ename = apex_application.g_x01;

   htp.p(l_job);
EXCEPTION WHEN no_data_found THEN
   htp.p('');
END;

Remember, handling errors and return in this process is up to you! Make sure you catch common errors such as no_data_found and/or too_many_rows. If they occur and are not trapped, chances are big you will encounter javascript errors because your javascript callback code can not handle the error (which in apex will be a full page html with the error message in it).
Also, as you can see i'm using the x01 variable, which is one of the 10 global temporary variables in apex. This way it is not required to use a page item and submit the value to session state for it.

If you want to put this code in a dynamic action you can. Pick "Change" as event and jQuery selector if you go for a dynamic action, and as true action pick execute javascript code. You can then put the function code in there. With the exception that $(this)will need to be $(this.triggeringElement)