How to focus on an object after closing modal bootstrap 4.x?

Navigation
2

I need to focus on an object after closing the modal bootstrap

In the bootstrap.dialog (old) I can do it because I can program in the event close of the close button, but the bootstrap 4 close is generic.

The idea would be as below: 

    $("#btneditar").on("click", function () {

        var codcli = $("#codcli").val();
        if (codcli <= 0) {

            $("#aviso").modal();
            $(".body-aviso").html("Escolha o cliente para editar");
            $("#codcli").focus();
        } else {

            url = "minha url";
            window.location = url;
        }
    });

As we know the (obj) focus line has lost focus when closing modal

How to circumvent this situation?

    
asked by anonymous 21.09.2018 / 22:19

2 answers

1

Use the modal event when it is closed ( documentation ): 

$('#aviso').on('hidden.bs.modal', function(){
   $("#codcli").focus();
});

The hidden.bs.modal executes a function after the modal is closed.

Example: 

$("#btneditar").on("click", function () {

   var codcli = $("#codcli").val();
   if (codcli <= 0) {

      $("#aviso").modal();
      $(".body-aviso").html("Escolha o cliente para editar");
   
   } else {
      url = "minha url";
      window.location = url;
   }
});

$('#aviso').on('hidden.bs.modal', function(){
   $("#codcli").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <p class="body-aviso"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<p>Clique no botão abaixo:</p>
<button id="btneditar">Editar</button>
<input id="codcli">
    
21.09.2018 / 23:35
0

I've set up a temporary solution and I'm going to ask colleagues, maybe new ideas come up ... 

var obj = null;    

$("#btneditar").on("click", function () {

    var codcli = $("#codcli").val();
    if (codcli <= 0) {

        $("#aviso").modal();
        $(".body-aviso").html("Escolha o cliente para editar");
        obj = $("#codcli");
    } else {

        url = "minha url";
        window.location = url;
    }
});

$("#btnclose").on("blur", function(){
   $(obj).focus();
});

I create an empty object and fill in the warning message, when the close button is blurred (in closing) the focus goes to the set object, so it worked, it seems POG but it works.

    
21.09.2018 / 22:52
How to break lines according to a value Browse and retrieve DOM objects via getElement without using WebBrowser