1

Estimados, junto con saludar, les comento mi inconveniente.

Tengo un formulario con varias tablas (en estas tablas tengo info básica de propietarios, representantes, etc.) validadas con jquery validate. Aparte dentro de las tablas, en la parte del nombre tengo el campo separado en nombres, apellido paterno y materno. En el próximo 'td' esta el rut. Si el rut supera los 50 millones es un rut de empresa sino es de una persona natural. Hasta aquí, todo bien con las validaciones. Pero al intentar realizar esta misma validación en otra tabla, a continuación esta NO FUNCIONA.

Aparte les comento, que en las tablas, tengo un 'agregar' de forma dinámica que realizo también con JQuery. Les adjunto mi código, para que lo vean y me guíen por el camino correcto.

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <form role="form" method="post" action="index.php" name="form_" id="form_" class="forms_formularios" enctype="multipart/form-data">
        <table border="0" class="tablaConBorde table clone-group1" id="" >
            <thead>
                <tr class="fondoResaltado_1">
                    <td style="width: 70%;" >
                        NOMBRES DEL PROPIETARIO 
                    </td>
                    <td style="width: 20%;" align="center">
                        RUT
                    </td>
                    <td style="width: 10%;" align="center">
                        Agregar / Eliminar
                    </td>
                </tr>
            </thead>
            <tbody >
                <tr class="form-group clone1" >
                    <td>
                        <input class="form-control 2_nombres_prop" placeholder="Nombres" style="width: 38%; display: inline;" disabled id="2_nombres_prop" value="" name="2_nombres_prop[]" type="text" />
                        <input class="form-control 2_ape_p_prop" placeholder="Apellido Paterno" style="width: 30%; display: inline;" disabled id="2_ape_p_prop" value="" name="2_ape_p_prop[]" type="text" />
                        <input class="form-control 2_ape_m_prop" placeholder="Apellido Materno" style="width: 30%; display: inline;" disabled id="2_ape_m_prop" value="" name="2_ape_m_prop[]" type="text" />
                    </td>
                    <td >
                        <input class="form-control 2_rut_prop" onblur="valida_rut_pro( $(this).val(), $(this).parents('tr').attr('id') )" id="2_rut_prop" value="" name="2_rut_prop[]" type="text" />
                    </td>
                    <td align="center" >
                        <button type="button" class="btn btn-primary addButton1" aria-label="Left Align" id="">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <table border="0" class="tablaConBorde table clone-group2" id="" >
            <thead>
                <tr class="fondoResaltado_1">
                    <td style="width: 70%">
                        REPRESENTANTE LEGAL
                    </td>
                    <td style="width: 20%;" align="center" >
                        RUT
                    </td>
                    <td style="width: 10%;" align="center">
                        Agregar / Eliminar
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr class="form-group clone2" >
                    <td >
                        <input class="form-control 2_rep_legal_nombres" placeholder="Nombres" style="width: 38%; display: inline;" disabled id="2_rep_legal_nombres" value="" name="2_rep_legal_nombres[]" type="text" />
                        <input class="form-control 2_rep_legal_ape_p" placeholder="Apellido Paterno" style="width: 30%; display: inline;" disabled id="2_rep_legal_ape_p" value="" name="2_rep_legal_ape_p[]" type="text" />
                        <input class="form-control 2_rep_legal_ape_m" placeholder="Apellido Materno" style="width: 30%; display: inline;" disabled id="2_rep_legal_ape_m" value="" name="2_rep_legal_ape_m[]" type="text" />
                    </td>
                    <td>
                        <input class="form-control 2_rep_legal_rut" onblur="valida_rut_rp( $(this).val(), $(this).parents('tr').attr('id') )" id="2_rep_legal_rut" value="" name="2_rep_legal_rut[]" type="text" />
                    </td>

                    <td align="center" >
                        <button type="button" class="btn btn-primary addButton2" aria-label="Left Align" id="">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <input type="hidden" class="n_item_1" name="n_item_1" value="0">
        <input type="hidden" class="n_item_2" name="n_item_2" value="0">


    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/validate_v_shcl.js"></script>
    <script type="text/javascript" src="js/datepicker-es.js"></script>
    <script type="text/javascript" src="js/jquery.Rut.js"></script> 
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/additional-methods.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>

</body>

Código JS para agregar las tablas dinámicamente

$(function(){
/********************* PARA DINAMICAS - NUEVA FORMA ******************************/
// PROPIETARIO
// var i = 0;
var i = parseInt($('.n_item_1').val(), 10);
var bFlag1=i;
var cloneItem = $(".clone1:last");//class de la tabla
var cloneWrap = $(".clone-group1");//div
$(".addButton1").on("click", function () {
    bFlag1++;
    if(i < 4){          
        i=i+1;
        var clon = cloneItem.clone(true).attr('id', '_'+bFlag1).appendTo(cloneWrap);
        clon.find('[type=text]').val('');

        clon.find(".addButton1")
        .replaceWith( '<button type="button" class="btn btn-primary remButton1" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');

        $( ".n_item_1" ).remove();
        str_id = '<input type="hidden" class="n_item_1" name="n_item_1" value="'+i+'">';
        $("#form_").append(str_id);

    }
});
$("body").on("click", ".remButton1", function () {
    $(this).closest(".clone1").remove();
    i=i-1;
    $( ".n_item_1" ).remove();
    str_id = '<input type="hidden"  class="n_item_1" name="n_item_1" value="'+i+'">';
    $("#form_").append(str_id);
});

// REP LEGAL
// var i2 = 0;
var i2 = parseInt($('.n_item_2').val(), 10);
var bFlag2=i2;
var cloneItem2 = $(".clone2:last");//class de la tabla
var cloneWrap2  = $(".clone-group2");// div
$(".addButton2").on("click", function () {
    bFlag2++;
    if(i2 < 4){
        i2 = i2 + 1; 
        var clon = cloneItem2.clone(true).attr('id', '_'+bFlag2).appendTo(cloneWrap2);
        clon.find('[type=text]').val('');
        // clon.find('[type=email]').val(''); // para input text de tipo email

        clon.find(".addButton2")
        .replaceWith( '<button type="button" class="btn btn-primary remButton2" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');

        $( ".n_item_2" ).remove();
        str_id2 = '<input type="hidden" class="n_item_2" name="n_item_2" value="'+i2+'">';
        $("#form_").append(str_id2);

    }
});
$("body").on("click", ".remButton2", function () {

    $(this).closest(".clone2").remove();
    i2 = i2 - 1;

    $( ".n_item_2" ).remove();
    str_id2 = '<input type="hidden"  class="n_item_2" name="n_item_2" value="'+i2+'">';
    $("#form_").append(str_id2);
}); });

Código JS para validar lo indicado en el campo rut:

function valida_rut_pro(xRut, id){
    // ARMAMOS LA VARIABLE 'ID' DEL TAG
    var clone1='#'+id;
    // alert("1.:"+xRut);
    var xurl="vws/ajax_validar_rut.php?rut="+xRut;
    // alert(1);
    $.ajax({
        url: xurl,
        type: "GET",
        beforeSend: function(){
            $(clone1+" #2_nombres_prop").prop('disabled', true);
            $(clone1+" #2_ape_p_prop").prop('disabled', true);
            $(clone1+" #2_ape_m_prop").prop('disabled', true);  
            // alert(2);
        },
        success: function(data){
            // alert(3)
            if(data){
                // alert(4);
                if(data==1){
                    $(clone1+" #2_ape_p_prop").prop('disabled', false);
                    $(clone1+" #2_ape_p_prop").focus();
                    // alert(5);
                }
                else if(data==0){
                    $(clone1+" #2_nombres_prop").prop('disabled', false);
                    $(clone1+" #2_nombres_prop").focus();
                    $(clone1+" #2_ape_p_prop").prop('disabled', false);
                    $(clone1+" #2_ape_m_prop").prop('disabled', false);
                    // alert(6);
                }
            }
        },
        error: function(){
            // alert("cuek!");
        }
    });
}

function valida_rut_rp(xRut, id){
    // ARMAMOS LA VARIABLE 'ID' DEL TAG
    var clone2='#'+id;
    // alert("1.:"+xRut);
    var xurl="vws/ajax_validar_rut.php?rut="+xRut;
    alert(1);
    $.ajax({
        url: xurl,
        type: "GET",
        beforeSend: function(){
            $(clone2+" #2_rep_legal_nombres").prop('disabled', true);
            $(clone2+" #2_rep_legal_ape_p").prop('disabled', true);
            $(clone2+" #2_rep_legal_ape_m").prop('disabled', true); 
            alert(2);
        },
        success: function(data){
            alert(3)
            if(data){
                alert(4);
                if(data==1){
                    alert("clone2: "+clone2)
                    $(clone2+" #2_rep_legal_ape_p").prop('disabled', false);
                    $(clone2+" #2_rep_legal_ape_p").focus();
                    alert(5);
                }
                else if(data==0){
                    $(clone2+" #2_rep_legal_nombres").prop('disabled', false);
                    $(clone2+" #2_rep_legal_nombres").focus();
                    $(clone2+" #2_rep_legal_ape_p").prop('disabled', false);
                    $(clone2+" #2_rep_legal_ape_m").prop('disabled', false);
                    alert(6);
                }
            }
        },
        error: function(){
            // alert("cuek!");
        }
    });
}

Esto ultimo es para el ID del TR dinamico

$(document).ready(function(){

    // le damos/iniciamos un id en el clon hijo
    var r=0;
    $(".clone-group1 tbody tr").each(function(){
        $(this).attr('id','_'+r);
        r++;
    });

    // le damos/iniciamos un id en el clon hijo
    var r=0;
    $(".clone-group2 tbody tr").each(function(){
        $(this).attr('id','_'+r);
        r++;
    });

});

Esto funciona en la tabla de propietario, pero no en la de Representante..

8
  • Por favor, especifica un poco más la pregunta: ¿Cómo no funciona?¿Da un mensaje de error?¿Sólo valida el primer registro?¿Hasta dónde valida (veo que hay alerts en el código)?¿Da fallo en una línea en concreto?¿Falla en el front-end o en el back-end (están las etiquetas de PHP y AJAX)?
    – Alvaro Montoro
    Commented el 9 mar. 2016 a las 19:01
  • Como dato adicional (aunque no sé si es lo que está causando el problema): el código de arriba tendrá id's repetidos (los id's deberían ser únicos) y algunos de los id's no serán válidos (deben empezar con una letra)
    – Alvaro Montoro
    Commented el 9 mar. 2016 a las 19:59
  • Como mencione las tablas se van agregando dinamicamente, si hacen click en el boton agregar. Coloque por ahi un codigo, para ir agregando un correlativo al ID del TR que se agrega (asi que los ID no se repiten). Lo que sucede es que valida y hace lo que corresponde en la primera tabla, pero no en la segunda, pero si en esta segunda tabla, agrego un nuevo TR, si lo valida.. se entiende? No hay mensajes de errores, solo que deja de validar. Agradecido, quedo atento!! Saludos!
    – x_Mario
    Commented el 9 mar. 2016 a las 20:09
  • al menos el id _0 estará repetido. Y mirando un poco el código, me atrevería a decir que sí se repetirán más id's porque se basan en los valores de n_item_1 y n_item_2 que son independientes y se actualizan con cada fila que se agrega y borra
    – Alvaro Montoro
    Commented el 9 mar. 2016 a las 20:24
  • Al iniciar los dinamicos, me baso en el n_item, pero despues los aumento con bFlag, aparte del 'i' o 'i2' segun corresponda justamente para no repetirlos (ese problema lo tuve al principio, por eso hice otra variable llamada 'bFlag'.. tengo implementado este codigo y corriendo y te aseguro que no se repiten los ID =).. Estimado, muy Agradecido.. quedo atento... Saludos!!
    – x_Mario
    Commented el 10 mar. 2016 a las 13:21

2 respuestas 2

4

Paso 0: Introducción

Voy a poner aquí tu código de manera ejecutable (mcve) que ayudará a ver el problema mucho mejor. La parte de la validación la voy a dejar de lado temporalmente porque no hace falta en este momento (aunque luego explicaré por qué falla) y me voy a centrar en el HTML y los otros dos snippets de JS:

$(function(){
  /********************* PARA DINAMICAS - NUEVA FORMA ******************************/
  // PROPIETARIO
  // var i = 0;
  var i = parseInt($('.n_item_1').val(), 10);
  var bFlag1=i;
  var cloneItem = $(".clone1:last");//class de la tabla
  var cloneWrap = $(".clone-group1");//div
  $(".addButton1").on("click", function () {
    bFlag1++;
    if(i < 4){          
      i=i+1;
      var clon = cloneItem.clone(true).attr('id', '_'+bFlag1).appendTo(cloneWrap);
      clon.find('[type=text]').val('');

      clon.find(".addButton1")
      .replaceWith( '<button type="button" class="btn btn-primary remButton1" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');

      $( ".n_item_1" ).remove();
      str_id = '<input type="hidden" class="n_item_1" name="n_item_1" value="'+i+'">';
      $("#form_").append(str_id);

    }
  });
  $("body").on("click", ".remButton1", function () {
    $(this).closest(".clone1").remove();
    i=i-1;
    $( ".n_item_1" ).remove();
    str_id = '<input type="hidden"  class="n_item_1" name="n_item_1" value="'+i+'">';
    $("#form_").append(str_id);
  });

  // REP LEGAL
  // var i2 = 0;
  var i2 = parseInt($('.n_item_2').val(), 10);
  var bFlag2=i2;
  var cloneItem2 = $(".clone2:last");//class de la tabla
  var cloneWrap2  = $(".clone-group2");// div
  $(".addButton2").on("click", function () {
    bFlag2++;
    if(i2 < 4){
      i2 = i2 + 1; 
      var clon = cloneItem2.clone(true).attr('id', '_'+bFlag2).appendTo(cloneWrap2);
      clon.find('[type=text]').val('');
      // clon.find('[type=email]').val(''); // para input text de tipo email

      clon.find(".addButton2")
      .replaceWith( '<button type="button" class="btn btn-primary remButton2" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');

      $( ".n_item_2" ).remove();
      str_id2 = '<input type="hidden" class="n_item_2" name="n_item_2" value="'+i2+'">';
      $("#form_").append(str_id2);

    }
  });
  $("body").on("click", ".remButton2", function () {

    $(this).closest(".clone2").remove();
    i2 = i2 - 1;

    $( ".n_item_2" ).remove();
    str_id2 = '<input type="hidden"  class="n_item_2" name="n_item_2" value="'+i2+'">';
    $("#form_").append(str_id2);
  }); });

$(document).ready(function(){

  // le damos/iniciamos un id en el clon hijo
  var r=0;
  $(".clone-group1 tbody tr").each(function(){
    $(this).attr('id','_'+r);
    r++;
  });

  // le damos/iniciamos un id en el clon hijo
  var r=0;
  $(".clone-group2 tbody tr").each(function(){
    $(this).attr('id','_'+r);
    r++;
  });

});
<form role="form" method="post" action="index.php" name="form_" id="form_" class="forms_formularios" enctype="multipart/form-data">
  <table border="0" class="tablaConBorde table clone-group1" id="" >
    <thead>
      <tr class="fondoResaltado_1">
        <td style="width: 70%;" >
          NOMBRES DEL PROPIETARIO 
        </td>
        <td style="width: 20%;" align="center">
          RUT
        </td>
        <td style="width: 10%;" align="center">
          Agregar / Eliminar
        </td>
      </tr>
    </thead>
    <tbody >
      <tr class="form-group clone1" >
        <td>
          <input class="form-control 2_nombres_prop" placeholder="Nombres" style="width: 38%; display: inline;" disabled id="2_nombres_prop" value="" name="2_nombres_prop[]" type="text" />
          <input class="form-control 2_ape_p_prop" placeholder="Apellido Paterno" style="width: 30%; display: inline;" disabled id="2_ape_p_prop" value="" name="2_ape_p_prop[]" type="text" />
          <input class="form-control 2_ape_m_prop" placeholder="Apellido Materno" style="width: 30%; display: inline;" disabled id="2_ape_m_prop" value="" name="2_ape_m_prop[]" type="text" />
        </td>
        <td >
          <input class="form-control 2_rut_prop" onblur="valida_rut_pro( $(this).val(), $(this).parents('tr').attr('id') )" id="2_rut_prop" value="" name="2_rut_prop[]" type="text" />
        </td>
        <td align="center" >
          <button type="button" class="btn btn-primary addButton1" aria-label="Left Align" id="">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
          </button>
        </td>
      </tr>
    </tbody>
  </table>

  <table border="0" class="tablaConBorde table clone-group2" id="" >
    <thead>
      <tr class="fondoResaltado_1">
        <td style="width: 70%">
          REPRESENTANTE LEGAL
        </td>
        <td style="width: 20%;" align="center" >
          RUT
        </td>
        <td style="width: 10%;" align="center">
          Agregar / Eliminar
        </td>
      </tr>
    </thead>
    <tbody>
      <tr class="form-group clone2" >
        <td >
          <input class="form-control 2_rep_legal_nombres" placeholder="Nombres" style="width: 38%; display: inline;" disabled id="2_rep_legal_nombres" value="" name="2_rep_legal_nombres[]" type="text" />
          <input class="form-control 2_rep_legal_ape_p" placeholder="Apellido Paterno" style="width: 30%; display: inline;" disabled id="2_rep_legal_ape_p" value="" name="2_rep_legal_ape_p[]" type="text" />
          <input class="form-control 2_rep_legal_ape_m" placeholder="Apellido Materno" style="width: 30%; display: inline;" disabled id="2_rep_legal_ape_m" value="" name="2_rep_legal_ape_m[]" type="text" />
        </td>
        <td>
          <input class="form-control 2_rep_legal_rut" onblur="valida_rut_rp( $(this).val(), $(this).parents('tr').attr('id') )" id="2_rep_legal_rut" value="" name="2_rep_legal_rut[]" type="text" />
        </td>

        <td align="center" >
          <button type="button" class="btn btn-primary addButton2" aria-label="Left Align" id="">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Agregar
          </button>
        </td>
      </tr>
    </tbody>
  </table>

  <input type="hidden" class="n_item_1" name="n_item_1" value="0">
  <input type="hidden" class="n_item_2" name="n_item_2" value="0">


</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Paso 1: Demostrar que hay ID's duplicados

Pulsa en el botón de "Ejecutar fragmento de código"... Ya hay ID's duplicados. Puede que no se repitan en la misma tabla, pero sí en el documento. El id _0 aparece dos veces en el documento: en la primera fila de la tabla de propietarios y en la primera fila de la tabla de representantes.

Nota: el id _0 es incorrecto. Según la definición de HTML:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Que se podría traducir como

ID y NAME deben empezar por una letra ([A-Za-z]) y pueden estar seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_"), dos-puntos (":"), and puntos (".").

Y todo viene de este código:

$(document).ready(function(){

    // le damos/iniciamos un id en el clon hijo
    var r=0;
    $(".clone-group1 tbody tr").each(function(){
        $(this).attr('id','_'+r);
        r++;
    });

    // le damos/iniciamos un id en el clon hijo
    var r=0;
    $(".clone-group2 tbody tr").each(function(){
        $(this).attr('id','_'+r);
        r++;
    });

});

donde el valor de r se inicializa antes de cada bucle, por lo que los ID's generados serán similares en ambas tablas.

Y como en los anuncios: "¡pero aún hay más!". Cada vez que se añade una fila en cada una de las tablas pulsando el botón "Agregar" se asigna un id a la nueva fila. Este id es consecutivo y dependiente del número de filas creadas en esa tabla (valor que se guarda en bFlag1 y bFlag2 respectivamente)...

Pero hay dos tablas y esos valores son independientes el uno del otro. ¿Qué significa eso? Pues que al igual que con el id _0, el id _1 aparecerá dos veces en el documento si se añade una fila a cada tabla, y lo mismo con los ID's _2, _3, _4... La misma tabla no contendrá IDs duplicados, pero eso no importa; lo que importa es el documento completo.

¿No me crees? Inspecciona el código y empieza a añadir filas en las dos tablas, verás que hay algo como esto (captura de pantalla de este JSFiddle):

Captura de pantalla con IDs repetidos

Paso 2: Demostrar como esos ID's duplicados causan el problema

Ahora que ya hemos visto que existen ID's, vamos a ver cómo esos ID's causan el problema en la "validación" sólo de la segunda tabla (tabla de los representantes). Y para eso ya sí que vamos a usar el código JS de la validación:

function valida_rut_rp(xRut, id){
    // ARMAMOS LA VARIABLE 'ID' DEL TAG
    var clone2='#'+id;
    // alert("1.:"+xRut);
    var xurl="vws/ajax_validar_rut.php?rut="+xRut;
    alert(1);
    $.ajax({
        url: xurl,
        type: "GET",
        beforeSend: function(){
            $(clone2+" #2_rep_legal_nombres").prop('disabled', true);
            $(clone2+" #2_rep_legal_ape_p").prop('disabled', true);
            $(clone2+" #2_rep_legal_ape_m").prop('disabled', true); 
            alert(2);
        },
        success: function(data){
            alert(3)
            if(data){
                alert(4);
                if(data==1){
                    alert("clone2: "+clone2)
                    $(clone2+" #2_rep_legal_ape_p").prop('disabled', false);
                    $(clone2+" #2_rep_legal_ape_p").focus();
                    alert(5);
                }
                else if(data==0){
                    $(clone2+" #2_rep_legal_nombres").prop('disabled', false);
                    $(clone2+" #2_rep_legal_nombres").focus();
                    $(clone2+" #2_rep_legal_ape_p").prop('disabled', false);
                    $(clone2+" #2_rep_legal_ape_m").prop('disabled', false);
                    alert(6);
                }
            }
        },
        error: function(){
            // alert("cuek!");
        }
    });
}

Independientemente de la validación que se haga en PHP (vamos a asumir que funciona bien), en la función de arriba hay un problema con los selectores. Los selectores en sí están bien, pero al haber ID's duplicados, entonces el resultado no es el esperado. Por ejemplo:

$(clone2+" #2_rep_legal_nombres").prop('disabled', true);

Imagina que has escrito en la primera caja de texto (#_0) el valor "123456" y te sales de ella, entonces se llama a la función valida_rut_rp con los valores "123456" y "_0". Por lo que el selector de arriba quedará como:

$("#_0 #2_rep_legal_nombres").prop('disabled', true);

Que resultará en... nada. Ninguna acción se ejecutará y ningún campo se deshabilitará porque el selector #_0 #2_rep_legal_nombres no devuelve nada, incluso cuando existe la fila con id _0 que contiene el campo con id 2_rep_legal_nombres.

Pero, ¿por qué ocurre eso? Por cómo se seleccionan los elementos en jQuery. El selector #_0 #2_rep_legal_nombres buscará el primer elemento con id _0 y dentro de ese buscará el primer elemento con id 2_rep_legal_nombres... y ahí es donde está el problema: el primer elemento con id _0 está en la tabla de propietarios y no en el de representantes, y dentro de la tabla de propietarios no hay ningún campo con id 2_rep_legal_nombres.

Independientemente de las otras acciones de la validación, los selectores son incorrectos para la tabla de representantes y no funcionarán.

Paso 3: Cómo solucionar el problema

Una posible solución: combina bFlag1 y bFlag2 en una única variable. De este modo no ocurrirán duplicados en los ID's de las filas entre las dos tablas ni en el documento.

El cambio mínimo sólo debe ocurrir en estas líneas donde borraremos la declaración de bFlag2 y reemplazaremos su uso por bFlag1:

  // REP LEGAL
  // var i2 = 0;
  var i2 = parseInt($('.n_item_2').val(), 10);
  //var bFlag2=i2;
  var cloneItem2 = $(".clone2:last");//class de la tabla
  var cloneWrap2  = $(".clone-group2");// div
  $(".addButton2").on("click", function () {
    bFlag1++;
    if(i2 < 4){
      i2 = i2 + 1; 
      var clon = cloneItem2.clone(true).attr('id', '_'+bFlag1).appendTo(cloneWrap2);
      clon.find('[type=text]').val('');
      // clon.find('[type=email]').val(''); // para input text de tipo email

      clon.find(".addButton2")
        .replaceWith( '<button type="button" class="btn btn-primary remButton2" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Eliminar</button>');

      $( ".n_item_2" ).remove();
      str_id2 = '<input type="hidden" class="n_item_2" name="n_item_2" value="'+i2+'">';
      $("#form_").append(str_id2);

    }
  });

Nota: esto no elimina el problema de los ID's duplicados, que los seguirá habiendo porque los diferentes campos dentro de la fila tienen igual id en las diferentes filas.

Puedes ver el código completo con los cambios especificados arriba en este JSFiddle; Y si analizas el código, verás que las filas ya no tienen ID's duplicados y los selectores funcionan correctamente.

Una vez solucionado ese problema, y teniendo en cuenta que la URL de validación de RUTs es la misma para propietarios y representantes y que funciona correctamente para propietarios, debería funcionar también para los representantes... Aunque siempre puede haber algo que falle :)

Espero que esto haya ayudado (sé que es muy largo). Buena suerte.

1
  • Estimado, primero que nada MUCHISIMAS GRACIAS por darte el tiempo. Desde que me comentaste el tema de los ID en las tablas, revise todo mi codigo (..me ausente un por eso, ya que lo que deje aqui, es solo una parte..) y efectivamente los ID eran el problema. Resolvi los ID duplicados, dandoles letras el momento de asignarlo y al inicializarlos en las tablas. Leer tu respuesta, me afirmo lo que resolvi ayer. <!--var clon = cloneItem2.clone(true).attr('id', '_'+bFlag1).appendTo(cloneWrap2);-->
    – x_Mario
    Commented el 11 mar. 2016 a las 12:56
0

Desde que comentaste el tema de los ID en las tablas, revise todo mi código (..me ausente un por eso, pues lo que deje aquí, es solo una parte..) y efectivamente los ID eran el problema. Resolví los ID duplicados, dándoles letras el momento de asignarlo y al inicializarlos en las tablas.

En esta linea;

var clon = cloneItem2.clone(true).attr('id', '_'+bFlag1).appendTo(cloneWrap2);

Lo deje asi;

var clon = cloneItem2.clone(true).attr('id', 'rp_'+bFlag1).appendTo(cloneWrap2);

Obviamente cambiando las letras para cada tabla.

Y en el $(document).ready(function(){ tambien, ya que este parte inicializa el ID en cada TR de cada tabla

var r=0;
$(".clone-group2 tbody tr").each(function(){
    $(this).attr('id','rp_'+r);
    r++;
});

Leer tu última respuesta, me afirmo lo que resolví ayer. Con esto, corregí lo que me estaba complicando la existencia.

Adicional a esta respuesta, este código funciona en tablas con los registros de forma lineal, es decir con `TR´ dinámicos. Para hacerlos funcionar en tablas dinámicas con varios registros, cambiar en el HTML en el atributo 'onblur' en la parte donde esta el parents, dice tr, cambiarlo a table y funciona a la perfección.

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.