Tengo una etiqueta <a> que alterna mostrar/ocultar de un Bootstrap Modal .
<a href="#" data-toggle="modal" data-foo=${FOO} data-target="#emailFoo"></a> Dónde se ve modal emailFoo
<div class="modal fade" id="emailFoo"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-footer"> <button id="sendEmail">OK</button> </div> </div> </div> </div> Quiero obtener los datos de FOO al hacer clic en el event de un botón #email dentro de #emailFoo
¿Cómo puedo obtener el valor de foo del botón que abrió el modal en el evento de clic #sendEmail?
$( "#sendEmail" ).click(function() { //Get foo here from Parent modal that button is inside //$('#emailFoo').dataset['foo'] });Como solución alternativa, puedo obtener foo desde que se abre el modal por primera vez. Estaba pensando que puedo establecer este valor en otro lugar para que el clic del botón pueda obtenerlo.
Es decir
$('#emailFoo').on('show.bs.modal', function () { //This works! How can I do the same thing from the `sendEmail` click event above? const callerFromAnchorTag = $(e.relatedTarget); const foo = callerFromAnchorTag [0].dataset['foo']; });parece que quieres obtener el valor foo de esta manera:
$( "#sendEmail" ).click(function() { const btn = $(this); const modal_id = btn.parents('.modal').attr('id'); let toggler = $('body').find('[data-target="#' + modal_id +'"]'); console.log(toggler.attr('data-foo')); });ACTUALIZAR:
parte nueva:
así que tenemos varios conmutadores en una página, ¿quieres detectar qué conmutador es el llamador de modal?
Una forma elegante de lograr esto (por objetos js):
class Modal { constructor(selector) { this.$modal = $(selector); this.modal_id = this.$modal.attr('id'); this.$toggler = null; this.init(); this.events(); } init() { const obj = this; } events() { const obj = this; $('[data-toggle="modal"]').on('click', function () { const $a_toggler = $(this); if ($a_toggler.attr('data-target') === '#' + obj.modal_id) obj.$toggler = $(this); }); } get_toggler() { return this.$toggler; } }uso:
creando un nuevo objeto modal (al principio de su código):
const my_modal = new Modal($('#emailFoo'));
devolver el objeto jquery toggler (donde quiera obtenerlo):
console.log(my_modal.get_toggler());
otra forma sencilla:
haga una entrada oculta dentro de su modal como esta:
<a href="#" data-toggle="modal" data-foo=${FOO} data-target="#emailFoo" data-toggler="toggler-1"></a> <div class="modal fade" id="emailFoo"> <input type="hidden" class="js-toggler__input" value="" hidden> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-footer"> <button id="sendEmail">OK</button> </div> </div> </div> </div> después de hacer clic en los conmutadores, guarde su id o algún atributo como data-toggler="__toggler-number__" (utilicé el atributo de datos):
$('[data-toggle="modal"]').on('click', function () { const toggler = $(this); const toggler_identifier = toggler.attr('data-toggler'); let modal_id = toggler.attr('data-target'); $(modal_id).find('.js-toggler__input').val(toggler_identifier); });para que pueda obtener el alternador por jQuery:
let toggler_identifier = $("#sendEmail").parents('.modal').find('.js-toggler__input').val(); console.log($('[data-toggler="' + toggler_identifier + '"]'))ten cuidado con:
los atributos data-toggler deben ser únicos
algunos puntos:
es mejor usar clases sobre atributos de datos para seleccionar DOM, los atributos de datos deben usarse para almacenar pocos datos.
Puede probar esto en lugar de asignar foo al botón data-attr
$('#emailFoo').on('show.bs.modal', function () { const callerFromAnchorTag = $(e.relatedTarget); const foo = callerFromAnchorTag [0].dataset['foo']; $('#sendEmail').attr('data-foo', foo); });después
$('#sendEmail').click(function(){ const foo = $(this).data('foo'); });La respuesta de Ali funciona, pero también puedes probar esto:
Agregue un campo oculto en el modal: <input type="hidden" id="hidden-value">
Al hacer clic en el interruptor modal, establezca el valor de este hidden-value :
$('#open-modal').on('click', function(event) { $('#hidden-value').val($(this).data('foo')); });Al hacer clic en el botón Aceptar , obtenga el valor (simplemente inicie sesión aquí):
$( "#sendEmail" ).on('click', function() { console.log($('#hidden-value').val()); });Esta es una respuesta más en la forma de 'establecer el valor en algún lugar, luego obtenerlo al hacer clic'.