Thursday, July 5, 2018

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;















Share:

0 comentarios:

Post a Comment

Subscribe to my Newsletter

Acerca de mi:

img

Ing. Angel O. Flores Torres, soy Ingeniero de Sistemas e Ingeniero de Aplicaciones Oracle Apex, he trabajado con Oracle Apex 5 y 5.1 desde el 2017, En los ultimos años he desarrollado habilidades en CSS, JavaScript, Jquery y PlSql , I specialize in Oracle APEX (Oracle Application Express )

Followers

Popular Posts