A Bootstrap modal window not open using JQuery

Question

I have several modal windows in a CodeIgniter view and I can not see them when I try to open them using JQuery. I've tried it with .modal ('toggle') and .modal ('show') without success. If I use a button with data-toogle and data-target it works without problems. From what I've seen using the Chrome code inspector and some details I see on the page, when I click to open the modal window the page acts as if it had opened but does not show it to me. I see that in the body tag the modal-open class appears but the window does not appear.

I put here part of the code.

The one of the modal windows:

The code of one of the modal windows

    <!-- MODAL EDIT -->
    <form>
        <div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar Cliente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <input type="hidden" name="cliente_id_edit" id="cliente_id_edit">
              <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Código</label>
                        <div class="col-md-10">
                          <input type="text" name="codigo_cliente_edit" id="codigo_cliente_edit" class="form-control" placeholder="Código do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Nome</label>
                        <div class="col-md-10">
                          <input type="text" name="nome_cliente_edit" id="nome_cliente_edit" class="form-control" placeholder="Nome do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">CPF</label>
                        <div class="col-md-10">
                          <input type="text" name="cpf_cliente_edit" id="cpf_cliente_edit" class="form-control" placeholder="CPF do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Sexo</label>
                        <div class="col-md-10">
                            <div class="form-check-inline form-check">
                                <label for="sexo1" class="form-check-label ">
                                    <input type="radio" id="sexo1_edit" name="sexo_cliente_edit" value="F" class="form-check-input">F
                                </label>&nbsp;&nbsp;
                                <label for="sexo2" class="form-check-label ">
                                    <input type="radio" id="sexo2_edit" name="sexo_cliente_edit" value="M" class="form-check-input">M
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">E-mail</label>
                        <div class="col-md-10">
                          <input type="text" name="email_cliente_edit" id="email_cliente_edit" class="form-control" placeholder="E-mail do cliente">
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="button" type="submit" id="btn_update" class="btn btn-primary">Enviar</button>
              </div>
            </div>
          </div>
        </div>
        </form>
    <!--END MODAL EDIT-->

The JQuery code for open the modal

    $('#show_data').on('click','.item_edit',function(){

        $('#Modal_Edit').modal('show');

    });

The code where the call is made:

<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-codigo_cliente="001" data-nome_cliente="Luis" data-cpf_cliente="123456789" data-sexo_cliente="M" data-email_cliente="[email protected]" data-cliente_id="1">Editar</a>

I tested if the event works and yes. When you click on the Editar

Answer 1

I think it's the <form> tag, try to move it inside the .modal-body instead. Then do

$('#show_data').click(function() {
    $('#Modal_Edit').modal('show');
});

for the submit button:

$('#btn_update').click(function() {
    $('form').submit();
});

Answer 2

Did you maybe try this Bootstrap $('#myModal').modal('show') is not working

These are common mistakes, maybe check them.