2
I have a view model that has a block that opens modal windows for CRUD actions. I have 4 partial viewls: create, delete, Details and Edit ... All have the Description (Description) field in common. I need to make sure that whenever the modal window opens, the cursor focus is directed to the Description field. This is using javascript. In my case it’s possible?
Thank you!
Modal window block 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>My JS Configuration File:
$(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;
}
});
}My 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>*@
}
What is the CSS you are using?
– novic
Hi Virgilio!! I’m currently using bootstrap classes from a framework called Remark. All I did was create a JS archive as I mentioned on the topic.
– Master JR
I put an example!
– novic