Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Tabular form with jquery/javascript need a bit help

ravi.apexApr 11 2017 — edited Apr 15 2017

Creating tabular form on oracle apex 5.0 DB 11g.

Basically there will be two regions on page first is header and second is Tabular Form.Header region contains Autocomplete ITEM which will fetch data from database and show it while we type.

Now I wanted to get that value of autocomplete ITEM and based on value i want to add rows in tabular form. Here i am using ajax call to capture value of ITEM and add values as rows in tabular form.

what i have on page :

1) Tabular form based on sql.

2) Ajax process to get data from table and add it to Tabular form rows as ITEM value change

3) page level js which will handle apex.server.process

So basically i am stuck at fetching value from Autocmplete and on change of value assign it to tabular form rows.So what ever values are changed from autocomplete item based on it will add more rows to tabular form.

$( "#P21_EMP" ).change(function() {

  var str = document.getElementById("P21_EMP").value;

  var get_val = str.substring(0, str.indexOf(":"));

  apex.widget.tabular.addRow();

  var main_id =  $('input[name="f02"]')[0].id; 

  console.log("main_id====>"+main_id);

  // var item_id  =  pThis.value; 

  var row_id  =  main_id.substr(4);

  console.log("row_id=====>"+row_id);

  // var row_id  = pThis.id.substr(4);

  apex.server.process ( "get_value",   

  { 

  x01: get_val

  },

  { type: "GET", dataType: "json", success: function( json )

  { 

   var e_no = json.EMP_NO; 

   var e_name = json.EMP_NAME;

   var e_Dept = json.EMP_DEPT;

   var e_job = json.EMP_JOB;

  

   $('#f02_'+row_id).val(e_no);  //Change with id of column that we fetched before in step 4

   $('#f03_'+row_id).val(e_name);

   $('#f09_'+row_id).val(e_Dept);

   $('#f04_'+row_id).val(e_job);

  } 

  }

 

                      ); 

});

       

Ajax call:

Declare 

  p_cascadid  number ; 

  p_name      varchar2(200); 

  p_empno       number; 

  p_type      varchar2(20);

  p_job       varchar2(20);

  l_json_str  varchar2(4000) := null; 

  Begin

 

select  empno,

  ename,

  deptno,

  job

  into p_empno,

  p_name,

  p_type,

  p_job

  from emp  where empno = substr(apex_application.g_x02, 1, instr(apex_application.g_x02, ':') -1);

  -- build a JSON string to return 

  l_json_str  := '{ 

  "NAME": "'||p_empno||'", 

  "AGE": "'||p_name||'",

   "TYPE": "'||p_type ||'",

   "JOB": "'||p_job ||'"

  }'; 

  

  sys.htp.p(l_json_str); 

End;

Sampe database app

page 21

tabular_apex/test/test

Message was edited by: ravi.apex added code to get more response (hoping)

This post has been answered by Pranav.shah on Apr 12 2017
Jump to Answer
Comments
Locked Post
New comments cannot be posted to this locked post.
Post Details
Locked on May 10 2017
Added on Apr 11 2017
1 comment
567 views