0

Primero me gustaría ponerlos en contexto:

Hace unas semanas publiqué esta pregunta. El usuario me ayudó muchísimo, no obstante, en ese momento tenía lo siguiente:

La primera columna era de hora y las otras eran numéricas. Actualmente tengo columnas que pueden ser botones (representados en HTML como switch), switches como tal (cambian de color para diferenciarlos del anterior), etc.

Los problemas que estoy teniendo son dos:

  1. No sé cómo "duplicar" los switch con el mismo diseño que la fila anterior
  2. No sé cómo hacer que tome el valor de la fila anterior (si está en ON pues en ON)

Adjunto una captura de pantalla dónde se puede apreciar los dos puntos que mencioné anteriormente:Aquí pueden verla

Como se puede apreciar en la imagen, la fila "duplicada" no coge el diseño ni tampoco el valor (se ve en OFF cuando debería estar en ON).

Mi código está totalmente basado en la respuesta que me dieron a la pregunta realizada que se puede ver en el enlace proporcionado más arriba.

/*Aquí estoy creando los "template", uno por cada tabla (yo tengo una tabla por día).*/
@forelse($dias as $dia)
<template id="plantilla-fila-{{$dia}}">
    <tr class="fila">
        @foreach($columnas as $columna)
        <td class="tfsize">
        @if($columna->tipo == 'selector')
        <input class="switch-input" type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="0" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="warning" data-sid = "{{  $servicio->id }}" data-tid = "{{ $servicio->tipo_id }}" data-cid = "{{ $columna->id }}" data-d="{{ $dia }}" data-h="100">
        @elseif($columna->tipo  == 'boton')
        <input class="switch-input" type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="0" data-on="ON" data-off="OFF" data-onstyle="primary" data-offstyle="secondary" data-sid = "{{  $servicio->id }}" data-tid = "{{ $servicio->tipo_id }}" data-cid = "{{ $columna->id }}" data-d="{{ $dia }}" data-h="100">                                        
        @else
        <a href="" class="updateh fila sinEspacio" data-name="name" data-type="text" data-pk="1" data-sid = "{{ $servicio->id }}" data-tid = "{{ $servicio->tipo_id}}" data-cid = "{{ $columna->id }}" data-d="{{ $dia }}" data-h="100" data-title="Ingresar valor"></a>
        @endif
        </td> 
        @endforeach
        @if(Auth::user()->user_type === 1)
        <td class="tfsize"> <!-- $fila->columna_id -->
            <span data-toggle="modal" data-target="#confirmDeletion">
                <button id="{{ 'delete-button-'.$loop->index }}" class="deleteFila btn btn-xs btn-danger sinEspacio text-white" data-toggle="modal" data-sid="{{$servicio->id}}" data-tid="{{$servicio->tipo_id}}" data-cid="{{$columna->id}}" data-d="{{$dia}}" data-target="#exampleModal" data-placement="bottom" title="Eliminar" onclick=""><i class="material-icons md-10">delete</i></button>
            </span>
        </td>
        @endif  
    </tr>
</template>
@empty
@endforelse
@endif

/*Aquí el código que me proporcionó el usuario. Lo único que he cambiado es que los datos los envía el servidor (incluida la hora), para no tener que calcularla en el frontend.*/ 
    $('.duplicarFila').click(function(e) {
        let _sid = $(this).data("sid");
        let _tid = $(this).data("tid");
        let _d = $(this).data("d");
        let _token = '{{ csrf_token() }}';
        $.ajax({
            method: 'POST',
            url: "{{route('tabla.store')}}",
            data: {
                token: _token,
                sid: _sid,
                tid: _tid,
                d: _d,
            },
            success: function(data) {
                if (data['success'] == true){
                    toastr.success('Agregada correctamente', 'Fila');
                    chooseTable(e.target.id, data['data']);
                }else{
                    toastr.error('Error al agregar', 'Fila');
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){ 
                toastr.error('Error al añadir: ' + errorThrown, 'Fila');
            }  
        });   
    })
    function chooseTable(id, data)
    {
        switch (id){
            case "btn_lunes":
                crearFila('lunes', 'plantilla-fila-lunes', data)
            break
             case "btn_martes":
                 crearFila('martes', 'plantilla-fila-martes', data)
            break
            case "btn_miercoles":
                crearFila('miercoles', 'plantilla-fila-miercoles', data)
             break
             case "btn_jueves":
                    crearFila('jueves', 'plantilla-fila-jueves', data)
            break
            case "btn_viernes":
                crearFila('viernes', 'plantilla-fila-viernes', data)
            break
            case "btn_sabado":
                crearFila('sabado', 'plantilla-fila-sabado', data)
            break
            case "btn_domingo":
                crearFila('domingo', 'plantilla-fila-domingo', data)
            break                                                                                
        }
    }
    function crearFila(tabla, plantilla, datos) {
        //datos contiene la información de la fila duplicada que nos envía el servidor, no obstante, no la utilizamos de momento
        //lo que hacemos es duplicar los datos del lado de frontend 
        console.log(JSON.stringify(datos))
        // asignamos a un objeto jquery el DOM de la plantilla
        const plantillaFila = $(document.getElementById(plantilla).content);
        // analizamos si es la primera fila o no
        //if ($("#" + tabla + " tbody tr").length > 0) {
            
            tiempoSv = datos[0]['hora'] 
            // tiempoSv = (60 x ) / 100

            //---Versión dónde se duplicada la fila anterior, se cogía la hora y se sumaba cierto intervalo (todo desde el frontend)
            // definimos intervalo
            //let intervalo = 50
            // leemos el dato anterior
            //tiempo = $("#" + tabla + " tr:last").find("a").first("a").attr('data-h');
            //valor = $("#" + tabla + " tr:last").find("a").first("a").attr('data-h');
            // sumamos el intervalo que deseamos
            //hour = parseInt(tiempo) + intervalo
            //hour = parseInt(tiempoSv)
        //} else {
            // si es la primera 
            //hour = 0
        //}
        hour = parseInt(tiempoSv);
        if(hour <= 2400){
            // añadimos ceros a la izquierda
            let valor4digitos = hour.toString().padStart(4, "0")
            console.log('valor4digitos: ' + valor4digitos)
            // partimos en dos trozos de 2 caracteres la cadena de 4 dígitos anterior
            let trozos = $(valor4digitos.match(/.{2}/g))
            // convertimos el 50 en 30 para representar la mediahora
            if (trozos[1] == 50) trozos[1] = 30
            else trozos[1] = '00'
            // establecemos la hora
            let hora = trozos[0] + ":" + trozos[1]
            datos.forEach( function(elemento) {
                if(elemento['columna_id'] > 1)
                    plantillaFila.find("a[data-cid='"+elemento['columna_id']+"']").html(elemento['valor'])
                    console.log("El valor que se le está asignando a la nueva fila es de: " + elemento['valor']);
            });
            // modificamos la hora
            plantillaFila.find("a[data-cid='1']").html(hora)
            // modificamos el atributo data-h, data-sid, data-d, data-tid en todos los enlaces <a>
            plantillaFila.find("a").attr('data-h', valor4digitos)
            plantillaFila.find("a").attr('data-sid', datos[0]['servicio_id'])
            plantillaFila.find("a").attr('data-tid', datos[0]['tipo_id'])
            console.log("El tipo_id asignado es: " + datos[0]['tipo_id'])
            plantillaFila.find("a").attr('data-d', datos[0]['dia'])
            // creamos un fragmento en memoria
            const fragment = $(document.createDocumentFragment());
            // clonamos la plantilla en una nueva variable
            const clone = plantillaFila.clone(true)
            // agregamos el clon en el fragmento
            fragment.append(clone)
            // agregamos el fragmento en la tabla
            $("#" + tabla + " tbody").append(fragment)
        }
    }

En base a la primera respuesta donde se me indica que faltan datos, los agregaré aquí debajo:

<a class="btn btn-sm float-right btn-primary text-white" title="Agregar fila"><i id="btn_domingo" data-sid = "{{$servicio->id}}" data-tid = "{{$servicio->tipo_id}}" data-d = "domingo" class="duplicarFila material-icons mic">add</i></a>


//Código de un switch correcto
<td class="tfsize">
<div class="toggle btn btn-success btn-xs slow" data-toggle="toggle" role="button" style="width: 46.4062px; height: 18.5938px;">
    <input type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="1" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="warning" data-sid="1" data-tid="1" data-cid="2" data-d="martes" data-h="2300" checked="">
    <div class="toggle-group">
    <label for="toggle" class="btn btn-success btn-xs toggle-on">ON</label>
    <label for="toggle" class="btn btn-warning btn-xs toggle-off">OFF</label>
    <span class="toggle-handle btn btn-light btn-xs"></span>
    </div>
</div>
</td>

//Código de un switch generado
<td class="tfsize">
    <input type="checkbox" data-size="xs" data-style="slow" data-toggle="toggle" id="toggle" value="0" data-on="ON" data-off="OFF" data-onstyle="success" data-offstyle="warning" data-sid="1" data-tid="1" data-cid="2" data-d="miercoles" data-h="100">
</td>

1 respuesta 1

1

Es dificil de contestar porque faltan datos, como el botón duplicarFila, que no entiendo muy bien como lo estás llamando, o tu CSS, para ver como creas esos switch-input.

Aún así, he podido crear un ejemplo minimo verificable con lo fundamental de tu pregunta, y en mi caso sí que me sale bien el checkbox con el estilo aplicado para que parezca un switch (he usado bootstrap para ello), pero para capturar si está en ON o en OFF hay que mirar si existe el atributo checked.

Ejemplo (ejecútalo y ves cambiando el valor del último switch antes de pulsar de nuevo Duplicar última fila):

$('.duplicarFila').click(function(e) {
  let data = [{
    'checked': $('#lunes').find("tr").last().find("input").is(':checked'),
  }]
  chooseTable('btn_lunes', data);
})

function chooseTable(id, data) {
  switch (id) {
    case "btn_lunes":
      crearFila('lunes', 'plantilla-fila-lunes', data)
      break
  }
}

function crearFila(tabla, plantilla, datos) {
  const plantillaFila = $(document.getElementById(plantilla).content);

  if (datos[0]['checked'] === true) {
    plantillaFila.find("input").attr('checked', 'checked')
  } else {
    plantillaFila.find("input").removeAttr('checked')
  }

  // creamos un fragmento en memoria
  const fragment = $(document.createDocumentFragment());
  // clonamos la plantilla en una nueva variable
  const clone = plantillaFila.clone(true)
  // agregamos el clon en el fragmento
  fragment.append(clone)
  // agregamos el fragmento en la tabla
  $("#" + tabla + " tbody").append(fragment)

  // activamos el switch para los nuevos elementos agregados
  // TOGGLE DATA-API
  // ===============
  $('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle()
  /** si no funciona solo con la linea de arriba descomenta estas tambien
  $(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) {
    var $checkbox = $(this).find('input[type=checkbox]')
    $checkbox.bootstrapToggle('toggle')
    e.preventDefault()
  })}(jQuery);
  */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<button class="duplicarFila">
  Duplicar última fila
</button>

<table id="lunes">
  <tbody>
    <tr>
      <td>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch">
        </div>
      </td>
      <td>
      </td>
    </tr>
  </tbody>
</table>



<template id="plantilla-fila-lunes">
  <tr>
    <td>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch">
        </div>
    </td>
  </tr>
</template>

17
  • Hola, @masterguru, pensé que estabas de vacaciones. No deberías haberte molestado en responderme, pero lo aprecio mucho. En la función $('.duplicarFila').click(function(e){} lo que yo hago es detectar cuando se hace clic en el botón "duplicar fila" y hago una petición al servidor. El servidor me responde con los datos que debo colocar en la nueva fila que se está duplicando (si es "valor" es 1 significa ON y si es 0 significa OFF). En principio, creo que si detecto ese valor puedo saber si debe estar como "checked" o no. (Sigo en el siguiente comentario...)
    – Carlos
    Commented el 22 jun. 2022 a las 8:02
  • La línea tuya: (datos[0]['checked'] =$('#'+tabla).find("tr").last().find("input").is(':checked')) la he colocado en la función function crearFila(tabla, plantilla, datos) {} y ahora funciona bien (aparece ON cuando la fila anterior es ON y OFF cuando es OFF, valga la redundancia). El problema es que me sigue sin coger el diseño (como se puede apreciar en el adjunto de la pregunta inicial).
    – Carlos
    Commented el 22 jun. 2022 a las 8:04
  • Eso del diseño ya es más raro, a mi me lo coge bien (usando bootstrap, no he podido reproducir tu caso porque no has aportado el CSS que se corresponde con la clase switch-input)... pero tambien lo probé con un diseño manual y tambien me funcionó bien. Lo que yo haria en tu caso es inspeccionar el elemento que no se muestra bien para ver que le ocurre a nivel de código HTML, pues no tiene sentido,
    – masterguru
    Commented el 22 jun. 2022 a las 8:07
  • Acabo de editar mi pregunta añadiendo el código del botón en cuestión. Con respecto a la clase que comentas, lo he chequeado y no existe, por ende, he eliminado class="switch-input". Esto no afecta en nada pero tampoco soluciona el problema. Haré lo comentas
    – Carlos
    Commented el 22 jun. 2022 a las 8:12
  • Vale, ya veo cuál es el problema. No se está generando todo el HTML necesario. Acabo de volver a editar la pregunta añadiendo el código que se genera para los swtich cuando cargas la página (el correcto) y el que se genera al duplicar una fila.
    – Carlos
    Commented el 22 jun. 2022 a las 8:16

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.