2

Eu tenho uma view model que tem um bloco que abre as janelas modais para ações CRUD. Eu tenho 4 partial viewls: create, delete, details e edit ... Todos em comum têm o campo Descrição (Descrição). Eu preciso fazer que sempre que a janela modal for aberta, o foco do cursor seja direcionado para o campo Descrição. Isso usando javascript. No meu caso é possível?

Obrigado!

Bloco de janela modal Index:

<a id="btnNovo" asp-action="Create" data-modal="" class="btn btn-outline btn-default new" data-toggle="tooltip"
         data-original-title="Cadastrar Novo" data-container="body">
        <span title="Cadastrar Novo" class="icon wb-plus"></span> Cadastrar Novo
    </a>

    <div class="modal fade modal-primary" id="modalPessoaSituacao" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width: 45%; height: 500px;">
            <div class="modal-content">
                <div id="contentModal"></div>
            </div>
        </div>
    </div>
    
     <script src="~/js/cadastros/pessoaSituacao/pessoaSituacao.js"></script>

Meu arquivo de Configuração JS:

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    // busca los elementos el atributo data-modal y le suscribe el evento click
    $('a[data-modal]').on('click', function (e) {
        // Abre la ventana modal con el formulario solicitado 
        openmodal(this.href);
        return false;
    });
    $('#modalPessoaSituacao').on('hidden.bs.modal', function () {
        $('#contentModal').html('');
    })
});
function openmodal(url) {
    // Hace una petición get y carga el formulario en la ventana modal
    $('#contentModal').load(url, function () {
        $('#modalPessoaSituacao').modal({
            keyboard: true
        }, 'show');
        // Suscribe el evento submit
        bindForm(this);
    });
}
function bindForm(dialog) {
    // Suscribe el formulario en la ventana modal con el evento submit
    $('form', dialog).submit(function () {
        if ($(this).valid()) {
            // Realiza una petición ajax
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // Si la petición es satisfactoria, se recarga la página actual
                    if (result.success) {
                        window.location = window.location;
                        window.location.reload(); //Ajuda na exclusao, atualizando o grid

                    } else {
                        $('#contentModal').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        } else {
            return false;
        }
    });
}

Minha PartialView Create:

@using SistemaComercial.Domain.ValueObjects
@model SistemaComercial.Application.ViewModels.PessoaSituacao.PessoaSituacaoViewModel
@{
    ViewData["Title"] = "Cadastrar Situação de Pessoa";
}

<div>
    <form asp-action="Create">
        @Html.AntiForgeryToken()

        <div class="modal-shadow">
            <div class="modal-header modal-header-primary">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-center"> @ViewData["Title"] </h4>
            </div>
            <div class="form-horizontal">
                <div id="validationSummary" class="text-center">
                    <vc:summary />
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label asp-for="Id" class="col-md-3 control-label"></label>
                        <div class="col-md-2">
                            <input asp-for="Id" class="form-control" />
                            <span asp-validation-for="Id" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label asp-for="Descricao" class="col-md-3 control-label"></label>
                        <div class="col-md-7">
                            <input asp-for="Descricao" class="form-control text-uppercase" />
                            <span asp-validation-for="Descricao" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label asp-for="PessoaTipo" class="col-md-3 control-label"></label>
                        <div class="col-md-3">
                            <select asp-for="PessoaTipo" asp-items="Model.PessoasTipos" data-toggle="dropdown" data-plugin="selectpicker" title="Selecione uma opção" class=" form-control show-tick show-menu-arrow"></select>
                            <span asp-validation-for="PessoaTipo" class="text-danger"></span>
                        </div>
                        <div class="col-md-5">
                            <div class="checkbox-custom checkbox-primary">
                                <label asp-for="PadraoSistema"></label>
                                <input asp-for="PadraoSistema" disabled />
                            </div>
                            <span asp-validation-for="PadraoSistema" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
                        <a class="btn btn-danger" data-dismiss="modal">
                            <span title="Fechar" class="icon wb-close"></span> Fechar
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    @*<script type="text/javascript">
            $(function () {
                //allow validation framework to parse DOM
                $.validator.unobtrusive.parse('form');
            });
        </script>*@
}

inserir a descrição da imagem aqui

3
  • Qual é o CSS que está usando?
    – novic
    Commented 10/05/2018 às 23:42
  • 1
    Olá Virgilio!! No momento estou usando classes do bootstrap de um framework chamado Remark. A única coisa que fiz, foi criar um arquivo de JS conforme citei no tópico.
    – Master JR
    Commented 10/05/2018 às 23:50
  • Coloquei um exemplo!
    – novic
    Commented 10/05/2018 às 23:51

1 Resposta 1

3

Se estiver utilizado Bootstrap coloque a configuração no evento shown.bs.modal, que vai proporcionar ter o focus em algum elemento do modal quando o mesmo estiver visivel para o usuário, veja exemplo abaixo:

$('#exampleModalLong').on('shown.bs.modal', function(event) {
  $("#t1").focus();
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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">
        <input type="text" id="t1" class="form-control" focus />
      </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>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

no seu caso em especifico é só adicionar:

$('#modalPessoaSituacao').on('shown.bs.modal', function () {
    $('#Descricao').focus();
});
6
  • O processo de abertura da modal é feito de maneira diferente... function openmodal(url) { $('#contentModal').load(url, function () { $('#modalPessoa').modal({ keyboard: true }, 'show'); bindForm(this); }); }
    – Master JR
    Commented 11/05/2018 às 0:03
  • Agora fiquei com dúvida...
    – Master JR
    Commented 11/05/2018 às 0:04
  • @JalberRomano não importa! cara é só adicionar o evento como exemplo dado, inclusive já fiz edição e passei no seu caso ...!!! a forma que você abre o modal, não importa, ele só precisa ter o evento, como demostrado na resposta!
    – novic
    Commented 11/05/2018 às 0:05
  • A única diferença que é que você precisa carregar antes de mostrar o modal !!! @JalberRomano tem que mudar a ordem de carregamento
    – novic
    Commented 11/05/2018 às 0:11
  • 1
    Obrigado @Virgilio Novic
    – Master JR
    Commented 11/05/2018 às 0:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .