Passing value of select list through Jquery in Oracle Apex 4.2

Question

The following classic report which when we select specific row pops up with new modal region called addExtraDetails with some data grabbed from row and some new additional info required from user: enter image description here

When (+) is being clicked the new modal region pops up, with populated values taken from the report row. So: in Column link I put:

javascript:function_to_add_to_basket('E',#ID#, 'Extra#ROWNUM#', #PRICE#,'DUMMY');

Then external js function is responsible for passing information. The problem is it does not refresh every time (+) is populated instead it keeps values of the first input.

I found better solution(and cleaner), upon clicking (+) Column Link is passing:

javascript:$s('P4_SET_QUANTITY','#QUANTITY#');
javascript:$s('P4_SET_TYPE','E');
javascript:$s('P4_SET_OBJECT_ID','#ID#'); 
javascript:$s('P4_SET_ELEMENT_ID','Extra#ROWNUM#'); 
javascript:$s('P4_SET_COST','#PRICE#'); 
javascript:$s('P4_SET_DISCOUNT','DUMMY');
javascript:openModal('addExtraDetails');

Now it updates everytime when we select various rows HOWEVER since we have dropdown javascript grabs all possible value of Quantity column so for this code:

javascript:$s('P4_SET_QUANTITY','#QUANTITY#');

the output is: '012345678910'.

How can I pass all values to modal region and make it to work with new values every time its being called ?

Tom Tom · Accepted Answer · 2014-05-21T13:54:38

You need to retrieve the value of the select list when you click the modal button. The value is not static, unlike the other values. The substitution strings are replaced with their value when the page is rendered.
It isn't really necessary to do all those item sets if all you want to do is use them in a javascript function. Your first idea was probably just as good but I'll just run with openModal.

First, determine how to target the select list. You did not specify whether your report is a wizard-generated tabular form or a manual tabular form (ie used apex_item to make the select list). You could either target the select list by the name attribute, which refers to an array, or select by header of the column. Also see this article. Eg, with the column name for the select list being QUANTITY, selecting the list would be:

td[headers=QUANTITY] select:visible

Alternatively, if you determine the array you can be more precise in targetting the element. Eg if the NAME attribute is set to f02 then you could select the select lists with

input[name=f02]

Then modify the openModal function to select the list value on the same row as pThis - which would be the triggering element, the anchor :

function openModal(pThis, pMethod){
  //fetch the value of the select list on the same row
  //I use the second method of selecting here
  var lListValue = $(pThis).closest('tr').find('input[name=f02]').val();
  ...
}

You'll also need to adjust your call to openModal:

javascript:openModal(this, 'addExtraDetails');

Passing value of select list through Jquery in Oracle Apex 4.2

1 Answers