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:

1 comment:

  1. Hi
    Your article is great but I am looking for the same exact solution but using "Select All" check box to select all rows in the report page and preserve the selections while pagination to use the checked values "Record ID" for processing another process in a PL/SQL process.

    Thank you,

    ReplyDelete

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