Bug multiples modals bootstrap

Asked

Viewed 331 times

1

I have two modals on the same page, one to change and one to remove information from the bank.

The code of the first modal is this:

    <!-- Modal Editar -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Alterar Informações Instituição de Insino</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Salvar alterações</button>
      </div>
    </div>
  </div>
</div>

The code that fills the modal is this:

    <script>
  $(".btn[data-target='#myModal']").click(function () {
    var columnHeadings = $("thead th").map(function () {
      return $(this).text();
    }).get();
    columnHeadings.pop();
    var columnValues = $(this).parent().siblings().map(function () {
      return $(this).text();
    }).get();
    var modalBody = $('<div id="modalContent"></div>');
    var modalForm = $('<form role="form" name="modalForm" action="/ies/atualizar" method="post"></form>');
    $.each(columnHeadings, function (i, columnHeader) {
      var formGroup = $('<div class="form-group"></div>');
      formGroup.append('<label for="' + columnHeader + '">' + columnHeader + '</label>');
      formGroup.append('<input class="form-control" name="' + columnHeader + i + '" id="' + columnHeader + i + '" value="' + columnValues[i] + '" />');
      modalForm.append(formGroup);
    });
    modalBody.append(modalForm);
    $('.modal-body').html(modalBody);
  });
  $('.modal-footer .btn-primary').click(function () {
    $('form[name="modalForm"]').submit();
  });
</script>

The codes of the second modal are these:

<!-- Modal Deletar -->
<div class="modal fade" id="modalDeletar">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Deseja Apagar Instituição de Insino?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Remover</button>
      </div>
    </div>
  </div>
</div>

    <script>
  $(".btn[data-target='#modalDeletar']").click(function () {
    var columnHeadings = $("thead th").map(function () {
      return $(this).text();
    }).get();
    columnHeadings.pop();
    var columnValues = $(this).parent().siblings().map(function () {
      return $(this).text();
    }).get();
    var modalBody = $('<div id="modalContentDelete"></div>');
    var modalForm = $('<form role="form" name="modalFormDelete" action="/ies/deletar" method="post"></form>');
    $.each(columnHeadings, function (i, columnHeader) {
      var formGroup = $('<div class="form-group"></div>');
      formGroup.append('<label for="' + columnHeader + '">' + columnHeader + '</label>');
      formGroup.append('<input class="form-control" name="' + columnHeader + i + '" id="' + columnHeader + i + '" value="' + columnValues[i] + '" />');
      modalForm.append(formGroup);
    });
    modalBody.append(modalForm);
    $('.modal-body').html(modalBody);
  });
  $('.modal-footer .btn-primary').click(function () {
    $('form[name="modalForm"]').submit();
  });
</script>

What happens is this, when I only have the edit modal in the code, I can normally edit the values in the database, when I add the delete modal, it can no longer update, but delete works normally.

What could be causing this error?

html css node.js twitter-bootstrap modal

  • I do this modal to delete in a simpler way, do not need to do the modal on the page, calls it via js.

  • I will post an answer explaining

1 answer

1

I have a modal that appears inside a js:


$(document).ready(function(){
    $('a[data-del]').click(function(ev){
        var href = $(this).attr('href');
        if(!$('#confirm-Del').length){
            $('body').append('    Deseja Deletar?  ×    
Não há como recuperar dados apagados.
   Não Sim    ');

            }
        $('#dataDelOK').attr('href', href);
        $('#confirm-Del').modal({show: true});
        return false;

    });
});

So I call her by php: < to data-del href="delete.php? id="> Del< /a>

and make a link from the js file at the bottom of the page or place it inside the page already, without being external. Tag "< to >" by calling the page inside while.

Explaining the script: In the js code, if the button with the attribute "date-out" is clicked calls the code. It creates on the page a modal referring to the id. And there are two buttons with 2 quit or give ok attributes that calls php delete to delete. Or some other page, in my case I create a connection to the comic, and delete the corresponding id.

working online: https://jsfiddle.net/PH7Jack/1u29gpfb/

Browser other questions tagged html css node.js twitter-bootstrap modal

You are not signed in. Login or sign up in order to post.