Buenas tardes, como el titulo lo menciona tengo dos ei-cuadro que traen información relevante, lo que deseo es limitar el evento “seleccionar”, es decir que tome la ultima fila seleccionada en los cuadros visibles, la interacción de des-tildar una fila de un cuadro a otro esta realizada pero el evento seleccionar que posee cada cuadro sigue existiendo aunque no tenga una fila tildada, ademas quite la clase css que se crea en el tr (“ei-cuadro-fila-sel”), pero sigue tomando el evento del ultimo cuadro.
Comparto código y pantallas.
Como se ve en la siguiente pantalla tengo dos cuadros con sus filas disponibles para poder seleccionar, antes de seleccionar LETRAS AUTOADHESIVAS habia seleccionado Vaso Descartable en el último cuadro.
Si llegan a observar no trae el seleccionado sino el ultimo seleccionado del anterior cuadro. Los arrays que se visualizan en el subtitulo son los datos que capturo cada cuadro en el evento “seleccionar”.
Se comparte el javascript donde se aplica el cambio de estado del input de un cuadro a otro.
Por otro lado estoy evaluando usar la función “deseleccionar_todos()” en un cuadro que no tiene tildado ninguna opción, por el momento no lo he logrado.
class cuadro_catalogo_unpaz extends jurumi_ei_cuadro
{
function extender_objeto_js()
{
echo "
var inputs = document.querySelectorAll('input[type=\"radio\"]');
for(var input of inputs){
input.addEventListener('change', showSelected);
}
function showSelected(e){
var fila = document.querySelector(\"tr.ei-cuadro-fila-sel\");
if (fila) {
fila.classList.remove('ei-cuadro-fila-sel');
}else{
alert(fila);
}
for(var i of inputs){
if(this.value!=i.value){
i.checked = false;
}else{
//{$this->objeto_js}.deseleccionar_todos('seleccion');
this.checked = true;
}
}
}";
}
}
En base a lo presentado, tiene una manera de como obtener solo el dato seleccionado ?
Versión de Toba 3.3.25
Si necesitan mas información, lo estaré compartiendo.
quiero ver si termino de entender correctamente la situacion que planteas.
Como el titulo lo menciona tengo dos ei-cuadro que traen información relevante, lo que deseo es limitar el evento “seleccionar”, es decir que tome la ultima fila seleccionada en los cuadros visibles, la interacción de des-tildar una fila de un cuadro a otro esta realizada
La idea es que un cuadro actue como una “cascada” del anterior o entendi mal?.
Si ambos estan visibles todo el tiempo, como filtras un catalogo dispar?
No termino de entender si hay una dependencia o jerarquia implicita entre ambos cuadros o no… aunque de tu redaccion pareciera eso.
pero el evento seleccionar que posee cada cuadro sigue existiendo aunque no tenga una fila tildada, ademas quite la clase css que se crea en el tr (“ei-cuadro-fila-sel”), pero sigue tomando el evento del ultimo cuadro.
Si, ya que cada cuadro mantiene como “estado” aquella fila seleccionada hasta tanto se produzca un pedido de pagina en cuyo caso enviaran su estado al servidor.
La unica diferencia entre este mecanismo y los “botones” es que no te generan un pedido de pagina apenas los clickeas, sino que necesitas otro evento aparte que dispare la interaccion.
Por otro lado estoy evaluando usar la función “deseleccionar_todos()” en un cuadro que no tiene tildado ninguna opción, por el momento no lo he logrado.
Ese metodo esta pensado para los eventos de seleccion multiple, por lo que al no ser uno de ellos retorna inmediatamente… si necesitas dicha funcionalidad deberias redefinir dicho metodo.
Contame un poco mas acerca de lo que buscas como funcionalidad a ver si te puedo ofrecer una opcion.
La idea no es mostrar una cascada, sino que cada cuadro sea independiente, por eso cuando filtre en el campo nombre por “vas” me trajo los resultados de cada cuadro.
A continuación explico a detalle para tener un mayor panorama de lo consultado.
El primer cuadro trae información del catalogo de diaguita, y el segundo trae un catalogo interno propio de la institución, el sistema estaba preparado con un solo cuadro, pero necesito poder visualizar ambos catálogos y tomar solo el dato que se encuentre seleccionado en uno de los cuadros. Por eso mismo se realizo la personalización.
Exacto eso pasa con el solo hecho de clickear en una de las filas, el cuadro sigue manteniendo su estado aunque haya seleccionado otra fila de otro cuadro, con el código de javascript que compartí, logro que no se visualice en pantalla pero el “estado” sigue existiendo.
A continuación quito el javascript y comparto captura de como se ve visualmente.
ahora entiendo mejor lo que deseas lograr, creo que el mayor inconveniente seria que se disparen los listeners de los radio/checkbox de manera cruzada entre los cuadros, ya que eso terminaria en un ciclo endemoniado.
Sacando eso de lado, una opcion podria ser que cada cuadro al seleccionar actualice un campo hidden especifico y en el servidor te limitas a respetar el valor de dicho campo en lugar de tomar en cuenta los estados de los cuadros.
De alguna manera el listener (disparado automagicamente en el otro cuadro) tiene que ser capaz de recibir un parametro extra que le indique que no debe replicar la accion ya que no se trata de una interaccion del usuario u otra opcion es utilizar el estado final del radio para determinar si debe accionar o no.
Esto seria:
→ Activado → acciono sobre el otro componente
→ Desactivado → termino la ejecucion sin hacer mas que limpiar el estado del check/radio
