0

Quiero clonar la clasetcal en el input FECHA y la función foco del mismo input, la clase es para convertir el input en calendario y la función para que al perder el foco pase al siguiente input, todo esto funciona correctamente en el la tabla base, pero al clonar no copia la función, he intentado hacerlo de la forma en la que copio las otras funciones y no me funciona, dejo todo el código para saber que estoy haciendo mal.

SCRIPT

function limpiar_valor(input){ 
  if(input.tagName == 'INPUT'){ 
    //Dejamos el valor en ''. 
    input.value = ''; 
  } 
} 

function foco(CUENTA){ 
  document.getElementById(CUENTA).focus(); 
} 

$(function(){ 
  // Clona la fila oculta que tiene los campos base 
  $("#adicional").on('click', function(){ 

    //Tenemos que añadirle los eventos a los input de tipo text 
    var fila_clonada = $("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija'), 

    //Los hijos 6, 8 y 10 son los que contienen los inputs que deberan tener los eventos. 
    celdas = fila_clonada[0].getElementsByTagName('td'); 

    //Removemos los atributos a los inputs clonados. 
    limpiar_valor(celdas[0].getElementsByTagName('input')[0]); 
    limpiar_valor(celdas[6].getElementsByTagName('input')[0]); 
    limpiar_valor(celdas[8].getElementsByTagName('input')[0]); 
    limpiar_valor(celdas[10].getElementsByTagName('input')[0]); 

    //Añadimos la fila clonada 
    $("#tabla").append( fila_clonada ); 

  }); 

  // Evento que selecciona la fila y la elimina 
  $(document).on("click",".eliminar",function(){ 
    var parent = $(this).parents().get(0); 
    $(parent).remove(); 
  }); 
});

HTML

<link rel="stylesheet" type="text/css" href="tcal.css" /><script 
type="text/javascript" src="tcal.js"></script>

<form method="post" action="" name="form">
<table class="table bg-info" id="tabla">
  <tr class="fila-fija">
    <td><input type="text" value="" name="FECHA[]" id="FECHA" class="tcal" onblur="foco('CUENTA');" /> 
    </td> 
    <td align="center"><input value="" type="text" name="CUENTA[]" id="CUENTA" />
    </td> 
    <td align="center"><input type="number" name="OT[]" id="OT" value=""/> 
    </td> 
    <td> 
        <select name="CIUDAD[]" id="CIUDAD" title="Ciudad"> 
            <option value="">Selecciones...</option> 
            <option value="CALI">CALI</option> 
            <option value="JAMUNDI">JAMUNDI</option> 
        </select> 
    </td> 
    <td> 
        <select name="TIPO_ACTIVIDAD[]" id="TIPO_ACTIVIDAD" onchange='cargarSUBTIPO(this);'> 
            <option value="">Selecciones...</option> 
            <option value="Cambios de equipos">Cambios de equipos</option> 
            <option value="Control Remoto">Control Remoto</option> 
        </select> 
    </td> 
    <td> 
        <select name="SUBTIPO[]" id="SUBTIPO" disabled="disabled" onchange="seleccionado_SUBTIPO(this.value);"> 
            <option value="">Selecciones...</option> 
        </select> 
    </td> 
    <td align="center"><input placeholder="Item" value="" type="text" name="ITEM_RE[]" id="ITEM_RE" onkeyup="cargar_precio(this.value.toUpperCase(), this.parentNode.parentNode.getElementsByTagName('td')[10].getElementsByTagName('input')[0]);"/> 
    </td> 
    <td> 
        <select name="OBSERVACIONES[]" id="OBSERVACIONES"> 
            <option value="">Selecciones...</option> 
            <option value="Mover Toma">Mover Toma</option> 
            <option value="Extender Toma">Extender Toma</option> 
         </select> 
    </td> 
    <td align="center"><input placeholder="Cantidad" value="" type="number" name="CANTIDAD[]" id="CANTIDAD" onkeyup="operacion(this, this.parentNode.parentNode.getElementsByTagName('td')[10].getElementsByTagName('input')[0], this.parentNode.parentNode.getElementsByTagName('td')[6].getElementsByTagName('input')[0]);" title="cantidad" /> 
    </td> 
    <td align="center"><input value="" type="text" name="OT_RECUPERADA[]" id="OT_RECUPERADA"/> 
    </td> 
    <td align="center"><input placeholder="Valor" value="" type="text" name="VALOR_RE_MO[]" id="VALOR_RE_MO"/> 
    </td><input type="hidden" name="USUARIO[]" id="USUARIO" value="<?php echo $_SESSION['MM_Username']; ?>"> 

    <td class="eliminar"> 
        <button>Eliminar src="../IMAGENES/eliminar3.png" style="width: 12px; height: 13px;"> 
        </button> 
    </td>  

    <div class="btn-der" align="center">
        <button id="adicional" name="adicional" type="button" class="btn btn-warning">+ Filas</button>
        <input type="submit" name="insertar" id="insertar" value="Guardar" class="btn btn-info"/>
    </div>
</form>
8
  • la clase tcal funciona implícitamente sobre todos los elementos con class="tcal" y tú quieres que los elementos añadidos dinámicamente también tengan este comportamiento?
    – ffflabs
    Commented el 17 nov. 2017 a las 0:07
  • si, exactamente.
    – Anderviver
    Commented el 17 nov. 2017 a las 12:21
  • Entonces tendrías que ver en la documentación de tcal.js cómo inicializar manualmente un elemento, porque esa "magia" de instanciar un tcal en cada elemento con className tcal ocurre sólo cuando recién se renderea el DOM. No se aplica a los nodos insertados a posteriori
    – ffflabs
    Commented el 17 nov. 2017 a las 12:40
  • Que puedo hacer para darle solución a esto?
    – Anderviver
    Commented el 17 nov. 2017 a las 13:04
  • Revisa la documentación de tcal.js como te dije. Debe haber un método del tipo $('#contenedor').tcal();
    – ffflabs
    Commented el 17 nov. 2017 a las 13:33

2 respuestas 2

1

Primero: comportamiento tipo calendario

Considerando que tcal.js es o se parece a lo que hay en este repositorio de github, vemos que esa librería fija un listener al evento window.load (cuando termina de cargar el DOM) que gatilla la función f_tcalInit:

function f_tcalInit () {

    if (!document.getElementsByTagName)
        return;

    var e_input, a_inputs = f_tcalGetInputs();
    for (var n = 0; n < a_inputs.length; n++) {
        e_input = a_inputs[n];
        e_input.onclick = f_tcalOnClick;
        f_tcalAddClass(e_input, A_TCALCONF.cssprefix + 'Input');
    }

    window.A_TCALTOKENS_IDX = {};
    for (n = 0; n < A_TCALTOKENS.length; n++)
        A_TCALTOKENS_IDX[A_TCALTOKENS[n]['t']] = A_TCALTOKENS[n];
}

Y lo que hace esa función es

  1. Traerse todos los elementos input de tipo text que tengan la clase tcal
  2. A cada uno, añadirle el comportamiento onclick de gatillar la función f_tcalOnClick
  3. A cada uno añadirle una clase (que en este caso es tcalInput)

Respecto al último punto, si el elemento ya tiene esa clase, tiene la inteligencia de no añadirla por segunda vez. En cuando a sobreescribir la propiedad onclick también es inofensivo redeclararla una y otra vez.

En conclusión, cada vez que clones una fila, debes llamar tú mismo a f_tcalInit() y con eso las filas nuevas tendrán el comportamiento de calendario.

Esto lo harías poniendo:

$("#tabla").append( fila_clonada );
f_tcalInit();

Puedes llamar la función porque el script tcal.js ya la declaró en el ámbito global.

Segundo: comportamiento onblur

Respecto a onblur, la función que le estás pasando manda a fijar el foco en un elemento con id #CUENTA. Pero resulta que ese id ya está en la primera fila y los ID deben ser únicos en el documento. Si todas tus filas clonadas tienen un elemento con ese ID, siempre te mandará al primero. Mi sugerencia es que en cambio le asignes una clase 'CUENTA'.

En vez de

  <input value="" type="text" name="CUENTA[]" id="CUENTA" />

poner

  <input value="" type="text" name="CUENTA[]" class="CUENTA" />

Y en vez de poner en duro la propiedad onblur, declararla mediante un listener que escuche a toda la tabla:

En vez de tener la función

function foco(CUENTA){ 
  document.getElementById(CUENTA).focus(); 
} 

Y ponerla en duro como

<input type="text" value="" name="FECHA[]" id="FECHA" class="tcal" onblur="foco('CUENTA');" /> 

Sólo deja

<input type="text" value="" name="FECHA[]" id="FECHA" class="tcal" /> 

Y declara un listener usando jQuery (afuera del evento que clona las filas)

$(function(){ 

  $("#tabla").on('blur','.tcal', function() {
    $(this).closest('tr').find('.CUENTA').focus();
  });

  // Clona la fila oculta que tiene los campos base 
  $("#adicional").on('click', function(){ 
     ...
  });

});

Que significa: "pon un listener sobre la tabla en donde cada vez que ocurra un evento blur en un elemento con clase tcal, encuentra un elemento con clase CUENTA que esté en la misma fila (o sea el mismo elemento tr), y dale focus a ese elemento".

Y con eso creo que todo debiera funcionar.

1
  • Excelente muchas gracias, me sirvió para otras funciones que tenia, gracias por tu interés y tiempo.
    – Anderviver
    Commented el 17 nov. 2017 a las 21:55
0

Clonar objeto y función:

Object.prototype.clone = function(){return this};
Function.prototype.clone = function(){return this};

function ES0(){
 this.version = "0.001";
}
function consoled(){console.log('Clicked');}

var clase = new ES0(),
    clonobj = clase.clone(),
    clonfunc = consoled.clone();

window.addEventListener("click", clonfunc); // Funcion clonada.
console.log(clonobj.version); // Objeto clonado.

var directa = clase;
console.log(`Copia directa: ${directa.version}`); // Copia directa.

10
  • Hmmm pero eso podría hacerse via asignación directa. clonobj=clase según entiendo. ¿No es así?
    – ffflabs
    Commented el 17 nov. 2017 a las 13:47
  • Claro, se puede hacer de muchísimas formas.
    – ESCM
    Commented el 17 nov. 2017 a las 13:49
  • De hecho, la edite para que lo vea el que preguntó.
    – ESCM
    Commented el 17 nov. 2017 a las 13:51
  • De acuerdo, probare de la forma en la que lo colocaste.
    – Anderviver
    Commented el 17 nov. 2017 a las 13:52
  • 1
    Pero esto en realidad no responde a la pregunta. Lo que quiere el OP no es saber la forma genérica de clonar objetos o funciones, sino cómo aplicar un comportamiento a un DOMElement clonado después del evento load del documento, considerando que usa una librería que mágicamente asigna comportamientos cuando el documento se renderea
    – ffflabs
    Commented el 17 nov. 2017 a las 13:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.