Saturday, June 30, 2018

APEX_ITEM Parte 2 Guardando Check Boxes con Ajax y manteniendo el valor en paginación + Oracle Apex + Jquery

Buen dia , continuando con el manejo de apex_items, hoy veremos como guardar el valor de un checkbox sin necesidad de hacer submit a la pagina y manteniendo el valor si  usamos la paginacion en un reporte.



En mi anterior tutorial veiamos  el manejo simple de un checkbox

Para este fin vamos a usar:

  • Colecciones / Collections
  • Ajax / apex.server.process
  • Interactive report
  • PlSql
Video demo:



Link demo apex, user: demo / pass: demo

Primero crearemos una coleccion, nombre: 'EMPLEADOS_COL' , y se creara a partir de un query de los empleados, notemos que tengo una columna donde me indica si el empleado pertenece al departamento seleccionado.

Documentacion  de colecciones


declare
  l_sql varchar2(4000);
  l_nombre_coleccion  varchar2(4000) := 'EMPLEADOS_COL';
begin

  if apex_collection.collection_exists (p_collection_name => l_nombre_coleccion)
  then
    apex_collection.delete_collection(p_collection_name => l_nombre_coleccion);
  end if;

  l_sql :='select empno
         , ename
         , deptno
         , sal
         , case when deptno = :P23_DEPARTAMENTO then 1 else 0 end pertenece
         , 0 ind_cambio
      from emp';

  apex_collection.create_collection_from_query_b
  (
      p_collection_name => l_nombre_coleccion
    , p_query           => l_sql
    , p_names           => apex_util.string_to_table('P23_DEPARTAMENTO')
    , p_values          => apex_util.string_to_table(:P23_DEPARTAMENTO)
  );

end;


Luego usaremos crearemos un reporte con la coleccion, aqui agregaremos el apex_item.checkbox2.


select seq_id
     , c001  empno
     , c002  ename
     , c003  deptno
     , c004  sal
     , apex_item.hidden(p_idx   => 1
                      , p_value => seq_id) ||
       apex_item.checkbox2(p_idx   => 2
                         , p_value => c005
                         , p_checked_values => 1)  pertenece
     , c006  ind_cambio
  from apex_collections
  where collection_name = 'EMPLEADOS_COL'

Luego crearemos una accion dinamica para capturar el click en el checkbox.

Dentro crearemos una accion de JavaScript, aqui llamaremos un proceso AJAX (apex.server.process), para actualizar la coleccion.

console.log(this.triggeringElement);

var elem = this.triggeringElement;
var estaMarcado = $(elem).is(':checked');
var seqId = $(elem).parent().find("input[name='f01']").val();

//console.log(estaMarcado);
//console.log(seqId);

apex.server.process("Actualizar_Coleccion",
        {  x01: seqId
         , x02: estaMarcado
        } 
      , {success: function(pdata){
          console.log(pdata.mensaje);  
                  }
        }
      // , {dataType: "text"}
    );
    






En el proceso AJAX .



* Actualizamos el atributo 6 del coleccion que es nuestro indicador que hubo un cambio en ese registro.
* Actualizamos el atributo 5 con 1 si esta el valor CHECKED y 0 si no lo es.
* Escribimos un objeto JSON para luego si deseamos personalizar el mensaje de nuestro cambio.


begin
  apex_collection.update_member_attribute (
      p_collection_name =>  'EMPLEADOS_COL',
      p_seq => apex_application.g_x01,
      p_attr_number => 5,
      p_attr_value => case when apex_application.g_x02 = 'true' then '1' else '0' end
      );
      
  apex_collection.update_member_attribute (
      p_collection_name =>  'EMPLEADOS_COL',
      p_seq => apex_application.g_x01,
      p_attr_number => 6,
      p_attr_value => 1
      );      
      
  apex_json.open_object;  
  apex_json.write(p_name => 'mensaje', p_value=> 'Actualizado correctamente');  
  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.close_object;

end;

Finalmente creamos un proceso Pl/Sql para actualizar los valores en tabla.




* Notemos que en el proceso de ajax podemos hacer esta actualizacion.


for c_emp in (select c001 empno
                   , c005 pertenece  -- c005 es de pertenencia 
                from apex_collections
               where collection_name = 'EMPLEADOS_COL'
                 and c006 != 0 -- todos los que han cambiado de valor              
)
loop

  if c_emp.pertenece = 1 then 
    update emp
       set deptno = :P22_DEPARTAMENTO
     where empno = c_emp.empno; 
     
  else 
    update emp
       set deptno = null
     where empno = c_emp.empno; 
  end if;
 
end loop;










Share:

0 comentarios:

Post a Comment

Acerca de mi:

img

Angel O. Flores Torres, soy Ingeniero de Sistemas CIP: 193925 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