1

Me encuentro con el desarrollo de un proyecto con JavaScript, HTML y CSS, y estoy con un problema a la hora de pasar un parámetro a un modal. Os comento más en detalle.

Tengo un archivo (controlWeb.js) javascript que se encarga de dibujar en el html, y sería donde se llamaría al archivo modal que se encuentra en el archivo HTML (index.html), este modal, necesita un parámetro (id) que le pasaría desde controlWeb.js. El modal, es el típico de ¿Estás seguro que quieres eliminarlo?, y si le damos a aceptar lo elimina y sino no, pues bien, si le damos aceptar necesitaría ese parámetro que se le pasaría de controlWeb.js. Estoy utilizando bootstrap. Adjunto código:

ControlWeb.js

//Más código que dibuja diferentes partes, incluido el boton que se ve


$('.eliminar').on('click', function(){
  var id = $(this).data('datos-id');
  //rest.eliminarEjercicio(id);//Esto es lo que quiero hacer en el modal
  $('#myModal').modal({backdrop: false});

});

index.html

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style='color:green'>¿Estás seguro que quieres eliminarlo?</h4>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" href="#">Cerrar</button>

        // El id sería lo que quiero pasar
        <button type="button" class="btn btn-danger" href="#" onclick="rest.eliminarEjercicio(id)">Eliminar</button>
      </div>
    </div>    
  </div>
</div>

1 respuesta 1

1

Lo único que debes hacer es usar un elemento conocido, pues al estar todo en la misma página puedes acceder a su valor tanto desde el botón como desde la ventana modal. En este caso lo hago en un atributo personalizado en la propia modal (data-id_elemento), pero podrías usar un input normal o incluso una variable javascript global.

Se añade el seteo del id que quieres eliminar en el javascript, antes de mostrar la ventana modal, pues ya existe en el DOM: $('#myModal').data('id_elemento',id);

y en la ventana modal modifico la llamada del evento, llamandolo de la siguiente forma: onclick="rest.eliminarEjercicio($('#myModal').data('id_elemento'))"

El código completo quedaría así:

ControlWeb.js

$('.eliminar').on('click', function(){
  var id = $(this).data('datos-id');
  //rest.eliminarEjercicio(id);//Esto es lo que quiero hacer en el modal
  $('#myModal').data('id_elemento',id);

  $('#myModal').modal({backdrop: false});

});

index.html

  <div class="modal fade" id="myModal" role="dialog"  data-id_elemento="">
    <div class="modal-dialog">
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" style='color:green'>¿Estás seguro que quieres eliminarlo?</h4>
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" href="#">Cerrar</button>
        <button type="button" class="btn btn-danger" href="#" onclick="rest.eliminarEjercicio($('#myModal').data('id_elemento'))">Eliminar</button>
      </div>
    </div>    
  </div>
</div>
7
  • Buenas, gracias por contestar. Verás, me sale un error Uncaught ReferenceError: Invalid left-hand side in assignment en $('#myModal').data('id_elemento') = id. Donde dices que usas un atributo personalizado data-id_elemento lo defines en algún lado antes o solo en el onclick del modal? Gracias por la ayuda el 2 may. 2019 a las 11:22
  • Perdón, la asignación se haría así: $('#myModal').data('id_elemento',id) poniendo el valor como segundo parámetro. Fuente: api.jquery.com/data ya corregí la respuesta
    – Fly
    el 2 may. 2019 a las 11:55
  • Está definido en el HTML del modal, por alguna causa no se veía lo que había en el editor: : <div class="modal fade" id="myModal" role="dialog" data-id_elemento="">
    – Fly
    el 2 may. 2019 a las 12:25
  • Vale, lo he probado, sin embargo me sale como undefined el atributo id al pasarlo al modal. Por lo que he leído en esa documentación es así. Voy a ver si veo el error por el que es undefined. Muchas gracias por la ayuda, si tienes alguna sugerencia encantado. el 2 may. 2019 a las 18:09
  • 1
    Solucionado, faltaba mostrar que era el id a lo que haciamos referencia onclick="rest.eliminarEjercicio($('#myModal').data('id_elemento'))" el 2 may. 2019 a las 18:26

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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