How to trigger a "Change" event of the Combobox to make a Post from a Modal?

0

I have an ASP.NET MVC project where I have a PartialView INDEX and another CREATE. in my INDEX, I have a Generic MODAL block where my PartialViews open in Modal form.

<div class="modal fade" data-backdrop="static" id="pessoaHistory" role="dialog">
    <div class="modal-dialog" style="width: 95%; height: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Histórico de Alterações</h4>
            </div>
            <div class="modal-body scoll-tree">
                <p id="pessoaHistoryData"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

To call my CREATE PartialView I use the btnNew button that makes a call via JavaScrip / Ajax and everything works perfectly!

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

My JS File:

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    $('a[data-modal]').on('click', function (e) {
        // Abre la ventana modal con el formulario solicitado 
        openmodal(this.href);
        return false;
    });
    $('#modalPessoa').on('hidden.bs.modal', function () {
        $('#contentModal').html('');
    });       
           
});
function openmodal(url) {
    $('#contentModal').load(url, function () {
        $('#modalPessoa').modal({
            keyboard: true
        }, 'show'); 
        //$("#PessoaNatureza").change(function () {
        //   document.getElementById('frmCreate').submit();
        //});        
        
        // Suscribe el evento submit
        bindForm(this);
    });
}
function bindForm(dialog) {
    $('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) {
                    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;
        }
    });
}

@using SistemaComercial.Domain.ValueObjects
@model SistemaComercial.Application.ViewModels.Pessoa.PessoaViewModel
@{
    ViewData["Title"] = "Cadastrar Nova Pessoa";
}

<div>
    <form asp-action="Create" asp-controller="Pessoa" id="frmCreate">
        @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="tab-pane active" id="exampleTabsOne" role="tabpanel">
                                <div class="form-horizontal">

                                    <div class="form-group row">
										<label  asp-for="PessoaNatureza" class="col-md-2 control-label"></label>
										<div class="col-md-3">
											<select asp-for="PessoaNatureza" asp-items="Model.PessoasNaturezas" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
											<span asp-validation-for="PessoaNatureza" class="text-danger"></span>
										</div>									   
									</div>

                                    @if (Model.PessoaNatureza == PessoaNatureza.Fisica)
                                    {
                                        @*<div id="divPessoaJuridica">
                                                @await Html.PartialAsync("_PessoaJuridica")
                                            </div>*@
                                        <div id="divPessoaFisica">
                                            @await Html.PartialAsync("_PessoaFisica")
                                        </div>
                                    }
                                    else if (Model.PessoaNatureza == PessoaNatureza.Juridica)
                                    {
                                        @*<div id="divPessoaFisica" style="display:none">
                                                @await Html.PartialAsync("_PessoaFisica")
                                            </div>*@
                                        <div id="divPessoaJuridica">
                                            @await Html.PartialAsync("_PessoaJuridica")
                                        </div>
                                    }

                                </div>
                           
                    </div>

                    @*<div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-success"><i class="icon wb-check" aria-hidden="true"></i> Gravar</button>
                                <a asp-action="Index" class="btn btn-danger">
                                    <span title="Retornar à Lista" class="icon wb-arrow-left"></span> Retornar à lista
                                </a>
                            </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>
The problem is that in my PartialViewCreate, I have a combobox PersonNature, in which whenever I select a type of person, it should make a post from my PartialView CREATE (This will be done in the Controller and I did not quote here because is unnecessary) and return to PartialView in Modal form again. How and where should I create a method in my JS file to do this? It would be something like this: "$ ('a [data-modal]'). Change ('change', function (e) {...." or maybe, without using "data-modal" ...

Thank you all!

    
asked by anonymous 14.05.2018 / 23:54

0 answers