Soy nuevo en javascript y quiero abrir múltiples modales diferentes según la etiqueta o el nombre del botón.
Estoy haciendo una llamada ajax que luego abrirá un modal basado en la etiqueta/nombre del botón.
Si alguien puede indicarme la dirección correcta, sería genial. A continuación se muestra lo que estoy usando actualmente, que funciona con un modal pero no se adapta a diferentes identificadores modales. Cualquier ayuda será apreciada.
//form button script <form action="https://test.com/testme.html" method="post" class="ajax"> <button class="item" id="test1" name="testing" value="1" data-toggle="tooltip" data-placement="top" type="submit" title="" data-original-title="test1"> </button> </form> //javascript <script> $(document).ready(function() { $('form.ajax').on('submit', function(event) { event.preventDefault(); var that = $(this), url = that.attr('action'), type = that.attr('method'), data = {}; that.find('[name]').each(function(index, value) { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; }); // AJAX request $.ajax({ url: url, type: type, data: data, success: function(response){ // Add response in Modal body $('.modal-body').html(response); // Display Modal $('#MyModal').modal('show');//want #MyModal to be var button id test1 so $('#test1').modal('show') } }); }); }); </script>
Puedes hacer algo como:
<form action="https://test.com/testme.html" method="post" class="ajax"> <button class="item" id="test1" data-model-name="modal1" value="1" data-toggle="tooltip" data-placement="top" type="submit" title="" data-original-title="test1"> </button> <button class="item" id="test2" data-model-name="modal2" value="2" data-toggle="tooltip" data-placement="top" type="submit" title="" data-original-title="test2"> </button> </form>
En jquery:
$('form.ajax').on('submit', function(event) { event.preventDefault(); let activeButton = $(document.activeElement).data('model-name'); $(`#${activeButton}`).modal('show'); }