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;

Published by Angel O. Flores Torres

System engineer, Applications engineer, working with C# and Oracle Apex 5, 5.1 since 2017. I specialize in Oracle APEX (Oracle Application Express )

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: