0

Necesito de su ayuda, ya que me encuentro realizando una lista dinámica para el cobro de unos servicios, lo que quiero realizar es detectar el nuevo árbol de nodos agregados(fragmento HTML nuevo) de forma dinámica, esto con la finalidad de acceder al select de cada fila agregada y agregar los servicios disponibles desde la BD, ya investigue y lo intente hacer con MutationObserver pero no se que estoy haciendo mal, ya que solo modifica la primera fila y no la que se acaba de agregar.

El contexto es que al generar cada select(producto o servicio) se cargara con los datos de servicios o productos que un cliente pudo haber adquirido en una visita a la peluquería, estos pueden ser uno o varios, por eso obtengo los datos del Array como ejemplo de la BD, esta lista se ira sumando en un total que dará el costo total para dicho cliente.

window.addEventListener('DOMContentLoaded', function() {
  let dataServices = [{
      "ID": "1",
      "NOM_SERV": "CORTE DE PELO",
      "PRECIO": "60"
    },
    {
      "ID": "2",
      "NOM_SERV": "CORTE DE NIÑO",
      "PRECIO": "50"
    },
    {
      "ID": "3",
      "NOM_SERV": "CEJA",
      "PRECIO": "30"
    }
  ];

//FUNCION PARA AGREGAR LAS OPTIONS AL SELECT RECIEN AGREGADO
  function optionsServices(dataServices, element) {
    for (let j = 0; j < dataServices.length; j++) {
      element.innerHTML += '<option value="1">' + dataServices[j].NOM_SERV + '</option>';
      console.log(dataServices[j].NOM_SERV)
    }
  }

//APARTADO DEL OBSERVER
  // selecciona el nodo target
  var target = document.querySelector("#show_item");
  // Crea una instancia de observer
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      if (m.type == 'childList') {
        var targetNewElement = m.target.children[2].children[0].children[0];
        console.log(targetNewElement);

        optionsServices(dataServices, targetNewElement);

      } else if (m.type == 'attributes') {

      }
    });
  });
  // Configura el observer:
  var config = {
    attributes: true,
    childList: true,
    characterData: true
  };
  // pasa al observer el nodo y la configuracion
  observer.observe(target, config);


  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('add_item_btn') && e.target.tagName === 'BUTTON') {
      e.preventDefault();
      let containerItems = document.getElementById('show_item');
      containerItems.innerHTML += '<div class="append_item">' +
        '<div class="item">' +
        '<select class="services" name="product[]" required>' +
        '<option value="">SELECCIONE</option>' +
        '</select>' +
        '<span class="price">200</span>' +
        '<button class="remove_item_btn">Cancelar</button>' +
        '</div>' +
        '</div>';
    } else if (e.target.classList.contains('remove_item_btn') && e.target.tagName === 'BUTTON') {
      e.preventDefault();
      let row_item = e.target.parentNode.parentNode;
      row_item.remove();
      total();
    }
  })

  document.addEventListener('change', function(e) {
    if (e.target.classList.contains('services') && e.target.tagName === 'SELECT') {
      total();
    }
  })

  function total() {
    let elementPrice = document.querySelectorAll('.price');
    let total = 0;
    elementPrice.forEach(el => {
      total = parseInt(el.textContent) + total
      //console.log(parseInt(el.textContent))
    });
    console.log(total)
    document.getElementById('total').innerText = '$' + total;
  }
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <main class="page payment-page">
    <section class="payment-form dark">
      <div class="container">
        <div class="block-heading">
          <h2>Lista de cobro de productos y servicios</h2>
          <p></p>
        </div>

        <form action="#" id="form">
          <div id="show_item" class="products">
            <h3 class="title">Productos o Servicios</h3>
            <button class="add_item_btn">Agregar</button>
          </div>
          <input type="submit" value="Registrar">
          <div>
            <div class="">Total &nbsp;<span id="total"></span></div>
          </div>
        </form>
      </div>
    </section>
  </main>
</body>

</html>

5
  • Hola. El planteamiento de la pregunta es confuso. Explica por favor qué quieres decir con lo que quiero realizar es detectar el nuevo árbol de nodos agregados de forma dinámica, esto con la finalidad de acceder al select de cada fila agregada y agregar los servicios disponibles desde la BD. Parece que hay un error de enfoque, y de ahí viene el problema. Intentando adivinar, ¿esos servicios: corte de pelo, cejas, etc no son fijos? ¿Qué es lo que quieres hacer partiendo de esos servicios? ¿Es por ejemplo que un nuevo cliente solicita uno o varios de esos servicios? Falta explicar el contexto.
    – A. Cedano
    Commented el 7 ago. a las 0:08
  • Actualmente esta pregunta incluye múltiples preguntas en una. Debería centrarse en un solo problema. Commented el 7 ago. a las 2:19
  • Hola Antonio, veo al menos 4 errores. 1) Al agregar una fila usas .innerHTML +=, cuando deberías usar .append. 2) Cuando generas el HTML de la fila, no creas los option para el select. 3) Cuando creas los option no guardas ni el id ni el precio. 4) Cuando detectas el cambio en los select no cambias el precio, por lo que el total va a ser incorrecto.
    – Marcos
    Commented el 7 ago. a las 10:41
  • Muchas gracias a todos, ya he modificado la pregunta y centrado en un solo problema, @Marcos cierto lo del append lo realizare así, y lo que mencionas con los precios de momento si, no estoy tomando los especificados en el array solo son de ejemplo para ver si funcionaba mi función de total, estoy centrándome con los select que no me quedan. Commented el 7 ago. a las 16:34
  • @Cedano he modificado la pregunta, espero se entienda mejor lo que quiero realizar, los servicios son fijos pero se pueden ira agregando mas a la BD(los del Array por el momento) y estos se tendrán que ver reflejados en los select. Commented el 7 ago. a las 16:36

1 respuesta 1

1

Estás tomando como referencia siempre el tercer hijo de #show_items que siempre será el primer select que hayas insertado. En el siguiente ejemplo cambié la referencia para apuntar al último hijo insertado:

var targetNewElement = m.target.children[(m.target.children.length - 1)].children[0].children[0];

window.addEventListener('DOMContentLoaded', function() {
  let dataServices = [{
      "ID": "1",
      "NOM_SERV": "CORTE DE PELO",
      "PRECIO": "60"
    },
    {
      "ID": "2",
      "NOM_SERV": "CORTE DE NIÑO",
      "PRECIO": "50"
    },
    {
      "ID": "3",
      "NOM_SERV": "CEJA",
      "PRECIO": "30"
    }
  ];

  //FUNCION PARA AGREGAR LAS OPTIONS AL SELECT RECIEN AGREGADO
  function optionsServices(dataServices, element) {
    for (let j = 0; j < dataServices.length; j++) {
      element.innerHTML += '<option value="1">' + dataServices[j].NOM_SERV + '</option>';
    }
  }

  //APARTADO DEL OBSERVER
  // selecciona el nodo target
  var target = document.querySelector("#show_item");
  // Crea una instancia de observer
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      if (m.type === 'childList' && m.addedNodes.length) {

        var targetNewElement = m.target.children[(m.target.children.length - 1)].children[0].children[0];

        optionsServices(dataServices, targetNewElement);

      } else if (m.type == 'attributes') {

      }
    });
  });
  // Configura el observer:
  var config = {
    attributes: true,
    childList: true,
    characterData: true
  };
  // pasa al observer el nodo y la configuracion
  observer.observe(target, config);


  document.addEventListener('click', function(e) {
    if (e.target.classList.contains('add_item_btn') && e.target.tagName === 'BUTTON') {
      e.preventDefault();
      let containerItems = document.getElementById('show_item');
      containerItems.innerHTML += '<div class="append_item">' +
        '<div class="item">' +
        '<select class="services" name="product[]" required>' +
        '<option value="">SELECCIONE</option>' +
        '</select>' +
        '<span class="price">200</span>' +
        '<button class="remove_item_btn">Cancelar</button>' +
        '</div>' +
        '</div>';
    } else if (e.target.classList.contains('remove_item_btn') && e.target.tagName === 'BUTTON') {
      e.preventDefault();
      let row_item = e.target.parentNode.parentNode;
      row_item.remove();
      total();
    }
  })

  document.addEventListener('change', function(e) {
    if (e.target.classList.contains('services') && e.target.tagName === 'SELECT') {
      total();
    }
  })

  function total() {
    let elementPrice = document.querySelectorAll('.price');
    let total = 0;
    elementPrice.forEach(el => {
      total = parseInt(el.textContent) + total
      //console.log(parseInt(el.textContent))
    });
    document.getElementById('total').innerText = '$' + total;
  }
})
.append_item>div {
  margin: 5px 3px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  flex-basis: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <main class="page payment-page">
    <section class="payment-form dark">
      <div class="container">
        <div class="block-heading">
          <h2>Lista de cobro de productos y servicios</h2>
          <p></p>
        </div>

        <form action="#" id="form">
          <div id="show_item" class="products">
            <h3 class="title">Productos o Servicios</h3>
            <button class="add_item_btn">Agregar</button>
          </div>
          <hr>
          <input type="submit" value="Registrar">
          <div>
            <div class="">Total &nbsp;<span id="total"></span></div>
          </div>
        </form>
      </div>
    </section>
  </main>
</body>

</html>

EDIT: añadí una verificación para que la modificación del SELECT sólo se gatille cuando el atributo addedNodes de la mutación tiene largo distinto de cero.

6
  • Funciona de maravilla, muchas gracias. Commented el 8 ago. a las 18:06
  • Amigo, revisando mas a detalle y actualizando mi código, incluso en tu ejemplo se puede observar que hay un error, ahora sucede al hacer lo contrario, al presionar el botón cancelar elimina ese elemento pero como el observer apunta al ultimo elemento replica las opciones en el actual ultimo elemento, no se si me explique. Commented el 9 ago. a las 18:29
  • Si usas el observer para ejecutar una acción sobre el último elemento SELECT hijo del formulario efectivamente la acción también se gatillará no sólo en las mutaciones de adición de elementos sino también en la eliminación
    – ffflabs
    Commented el 9 ago. a las 19:12
  • Entiendo, entonces que método puedo utilizar para evitar esa acción y solo afectar el bloque HTML especifico agregado, por lo que dices entonces MutationObserver no es viable para el objetivo que pretendo. Commented el 9 ago. a las 19:19
  • Revisa la edición que le hice a la respuesta
    – ffflabs
    Commented el 9 ago. a las 19:30

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.