APEX_ITEM Parte 3 Guardando automáticamente los valores de un apex_item con Ajax + Oracle Apex + Jquery

Continuando con los apex_item, en esta oportunidad vamos a ver como usar datepicker, lista de valores y campos de input, haciendo que se guarden automaticamente, cada vez que modifiquemos algun valor.

apex_item parte 1
apex_item parte 2
como integrar alertify / plugin

Link demo: user: demo/ pass: demo

Video explicacion:

Lo primero es crear un interactive report con la siguiente consulta, donde ya he creado mis apex_item de datepicker, lista de valores y entrada de texto.

select e.empno
     , e.ename
   --, e.deptno
   --, e.sal
   --, e.hiredate
    -- apex items
     , apex_item.hidden( p_idx    => 1
                       , p_value  => e.empno)  ||
       apex_item.date_popup2(p_idx           => 2
                            , p_value        => e.hiredate
                            , p_date_format  => :APP_DATE_TIME_FORMAT
                            , p_size         => 20) hiredate
     , apex_item.select_list_from_lov(p_idx        => 3
                                    , p_value      => e.deptno
                                    , p_lov        => 'DEPARTAMENTOS'
                                    , p_attributes => 'style="width: 200px;"'
                                    , p_show_null  => 'NO') deptno
     , apex_item.text(p_idx   => 4
                    , p_value => e.sal
                    , p_size  => 5) sal
  from emp e

Luego crearemos una accion dinamica para capturar el cambio de algun apex item en la region del reporte.

#empleados_ir tr:gt(1)

actualizarEmpleado(this.triggeringElement);

Creamos la funcion en la definicion de la pagina y hacemos el llamado al proceso ajax.

var empno, hiredate, deptno, sal;


function actualizarEmpleado(elem){

  empno    = $(elem).find("input[name='f01']").val();
  hiredate = $(elem).find("input[name='f02']").val();
  deptno   =  $(elem).find("select[name='f03']").val();
  sal      = $(elem).find("input[name='f04']").val(); 

 console.log(empno + ' / ' +  hiredate + ' / ' +  deptno + ' / ' + sal);

 ajax_process_actualizar(empno,hiredate,deptno,sal);

}


function ajax_process_actualizar(empno,hiredate,deptno,sal){

  apex.server.process("ActualizarEmpleado",
       {  x01: empno
        , x02: hiredate
        , x03: deptno
        , x04: sal 
       }
     , {success: function(pData){ 
       
           if (pData.ind_error == 1){

             alertify.error(pData.mensaje);
             apex.event.trigger( "#empleados_ir", "apexrefresh" );
           } else {
             alertify.success(pData.mensaje);
           }

          }
       }
     //, {dataType: "text"}
   ); 
}

Creamos el proceso ajax callback, que retorna el mensaje de actualizacion correcta o de error.

begin

  update emp
     set hiredate = to_date(apex_application.g_x02,:APP_DATE_TIME_FORMAT)
       , deptno   = apex_application.g_x03
       , sal      = apex_application.g_x04
  where empno = apex_application.g_x01;

  apex_json.open_object;
  apex_json.write(p_name => 'mensaje', p_value=> 'Actualizado correctamente');
  apex_json.write(p_name => 'ind_error', p_value=> 0);
  apex_json.close_object;
exception
  when others then
  apex_json.open_object;
  apex_json.write(p_name => 'mensaje', p_value=> 'Error al actualizar');
  apex_json.write(p_name => 'ind_error', p_value=> 1);
  apex_json.close_object;

end;