1

Quiero poder lograr cambiar el dataset de un botón dinámicamente al ejecutar una función de acuerdo al activo presionado obteniendo su id.

Anexo el código para mejorar la compresión del problema:

// Función que despliega un modal sencillo de múltiples activos (Botones, entidades)
$(document).ready(function() {
  $(".viewAttributes").click(function() {
    /* este valor cambia de acuerdo al activo que presionaste
    ES EL VALOR QUE NECESITO CAMBIAR DINAMICAMENTE EN EL DATASET DEL HTML*/
    var id_activo = $(this).data("id") || "0";

    /* **CODIGO JS SIN ENFOQUE CREANDO UNA TABLA**
    Append para ya mandar la tabla al html */
    $("#table_attributes").empty().append(html);
  });
});

Del lado HTML, donde se encuentra el botón, está de esta manera:

<div class="row justify-content-center">
  <table
    class="table table-hover table-striped table-hover table-responsive-lg " id="attributeActivoTable">
    <thead class="text-uppercase text-dark font-weight-bold">
      <tr style="text-align: center;">
        <th scope="col">Titulo</th>
        <th scope="col">Contenido</th>
      </tr>
    </thead>

    <tbody id="table_attributes" class="text-center">
      <!--Imprime la tabla generada por Javascript-->
    </tbody>
  </table>
</div>

<div class="row">
  <div class="col-md-4 mt-2">
    <button type="button" class="btn btn-danger pr-2" data-dismiss="modal">
      Cancelar
    </button>

    <!--BOTÓN QUE NECESITO CAMBIAR EL DATASET DE ACTIVO
    La clase editAttribute sirve para abrir un modal y en la función detectar el id de acuerdo a su dataset-->
    <input type="button" id="editAttribute" class="btn btn-primary buttonEvent editAttribute" data-activo="" value="Editar Valores del Template" />
  </div>
</div>

Al presionar el botón HTML debió haber capturado data-activo que anteriormente identificó dinámicamente.

$(document).ready(function() {
  $(".editAttribute").click(function() {
    var idActivo = $(this).data('activo') || '0';
    console.log(idActivo);
  });
});
0

1 respuesta 1

2

La propiedad dataset

Partiendo de lo que planteas en tu pregunta, cito:

"Quiero poder lograr cambiar el dataset de un botón dinámicamente al ejecutar una función de acuerdo al activo presionado obteniendo su id..."

Y partiendo del fragmento de código:

$(".viewAttributes").click(function() {
  var id_activo = $(this).data('id') || '0';;
  ...
});

Además de éste:

$(".editAttribute").click(function() {
  var idActivo = $(this).data("activo") || "0";
  ...
});

Se entiende que lo que lo que deseas lograr es que el valor del atributo data-id de la propiedad dataset de los elementos que contenga la clase .viewAttributes, al presionarse sobre uno de ellos se asigne el valor al atributo data-activo de la propiedad dataset del botón.

Esto se puede lograr realizando el siguiente cambio:

$( ".viewAttributes" ).on( "click", function() {
  editAttribute.dataset.activo = $( this ).data( "id" );
});

Ten en cuenta que en el fragmento anterior de código editAttribute es el id del botón al que se le quiere cambiar el valor del atributo data-activo, es decir, id="editAttribute".

Entendiendo un poco dataset

Para acceder desde JavaScript a los atributos de la propiedad dataset de un elemento dado, como por ejemplo:

<div id="elemento" data-elemento-html="valor"></div>

Debe realizarlo siguiendo el estilo camelCase:

elemento.dataset.elementoHtml;

Donde elementoHtml es, en el código HTML ,elemento-html; mientras que en jQuery se haría de la siguiente manera:

$( "#elemento" ).data( 'elemento-html' );

Reproduciendo ejemplo

El fragmento de código publicado más abajo, en el ejemplo que se ejecutará, contará con código CSS que se utilizará solo con fines ilustrativos para permitirle visualizar que efectivamente se ha hecho la selección de un elemento dado.

Debe seleccionar uno de los elementos y luego presionar el botón Editar Valores del Template para visualizar los resultados.

Además se recomienda, tras presionar el botón Ejecutar hacer clic en el enlace «Página completa» del Snippet que sigue más abajo.

Fragmento de código:

$(function() {
  $ ( ".viewAttributes" ).on( "click", function() {
    // Cambiando el valor de los atributos de la propiedad
    // dataset del elemento:
    editAttribute.dataset.activo = $( this ).data( 'id');
    
    // Estas dos (02) líneas sólo son relevantes en la ilustración:
    $( ".viewAttributes" ).removeClass( 'selected' );
    $( this ).addClass( 'selected' );
  });
  
  // Mostrar los resultados en la consola al presionar
  // el botón:
  editAttribute.onclick = function() {
    console.log( "data-activo=\"" + this.dataset.activo + "\"" );
  };
});
/* 
  Estos estilos solamente son relevantes
  para fines ilustrativos. Es decir, permitirle
  visualizar que efectivamente ha seleccionado 
  el elemento
*/
   
body {
  font-family: "Open Sans", sans-serif, arial;
  font-size: 14px;
}

.viewAttributes {
  background-color: silver;
  min-height: 30px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  padding: 2px 10px;
  cursor: pointer;
}

.selected {
  background-color: #006ab0;
  color: white;
  transition: 300ms ease;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Asumiendo que son los activos con un data-id -->
<div class="viewAttributes" data-id="1">data-id="1" | Presione aquí y luego «Editar Valores del Template»</div>
<div class="viewAttributes" data-id="2">data-id="2" | Presione aquí y luego «Editar Valores del Template»</div>
<div class="viewAttributes" data-id="3">data-id="3" | Presione aquí y luego «Editar Valores del Template»</div>

<hr>

<!-- Botón al que se le cambiará el «dataset» -->
<button id="editAttribute" data-activo="">Editar Valores del Template</button>

NOTA:

Se omite código irrelevante en el problema. Solo se tomó en cuenta el código mínimo necesario para entender cómo resolver el problema planteado.

Puede consultar las siguientes fuentes, publicada en la página oficial de Mozilla MDN para ampliar un poco sobre la propiedad dataset:

2
  • 2
    Completisima respuesta!
    – harifo
    Commented el 27 feb. 2020 a las 12:22
  • 1
    Muchisimas gracias amigo, por el tiempo, esfuerzo que invertiste para responderme, se agradece, he podido solucionarlo con tu ayuda. Commented el 27 feb. 2020 a las 16:32

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.