send request at the first button click

Asked

Viewed 75 times

0

I have to fill some combobox at the click of a button.

When I click on this button it first loads a modal and the second time I click it creates the modal loading the data I need, making the request ajax.

How to make him submit this request the first time?

MY HTML

INDEX.CSHTML

@{
    ViewBag.Title = "Pedidos";
}

<h2>@ViewBag.Title</h2>

<p>
    <a href="#" class="btn btn-success" data-action="Create" data-toggle='tooltip' data-placement='top' title='Cadastrar' id="btnNovoPedido">
        <span class="glyphicon glyphicon-plus"></span>
        Nova
    </a>
</p>


<table id="gridDados">
    <thead>
        <tr>
            <th data-column-id="NPedido" data-order="asc">Numero do Pedido</th>
            <th data-column-id="Item" data-order="asc">Item</th>
            <th data-column-id="Descricao" data-order="asc">Descrição</th>
            @*<th data-formatter ="DescricaoGAreaCliente">Gestor da Area do Cliente</th>*@
            <th data-formatter="atualizar" data-sortable="false">Ações</th>
        </tr>

    </thead>
</table>

<div class="modal fade" id="minhaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div id="conteudoModal"></div>
            </div>
        </div>
    </div>
</div>
<div class="form-actions no-color">
    @Html.ActionLink("Menu Básico", "Index", "CBs")
</div>
@section scripts{
    <script src="~/Scripts/jquery.bootgrid.js"></script>
    <script src="~/Scripts/Projeto/ControlarGrid.js"></script>

    <script src="~/Scripts/psp/Create_Pedidos.js"></script>
    <script type="text/javascript">

        var controller = "Pedidos";

        var urlListar = "@Url.Action("Listar")";

        $(document).ready(configurarControles);

    </script>

}

CREATE.CSHTML

@model PortalAdmCC.Models.Pedidos

@{
    ViewBag.Title = "Novo Pedido";
}

<h2><span class="glyphicon glyphicon-plus"></span> @ViewBag.Title</h2>
<hr />

@using (Html.BeginForm("Create", "Pedidos", FormMethod.Post, new { id = "formCrud" }))
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="NPedido">Número do Pedido</label>
            @Html.EditorFor(model => model.NPedido, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.NPedido, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Item)
            @Html.EditorFor(model => model.Item, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Item, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Descricao)
            @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
        </div>

    </div>
    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Imobilizado)
            @Html.EditorFor(model => model.Imobilizado, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Imobilizado, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.OS)
            @Html.EditorFor(model => model.OS, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.OS, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="ReservaSaldo">Reserva Saldo</label>
            @Html.EditorFor(model => model.ReservaSaldo, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ReservaSaldo, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="DtPedido">Data do Pedido</label>
            @Html.EditorFor(model => model.DtPedido, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DtPedido, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Valor)
            @Html.EditorFor(model => model.Valor, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Valor, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="row">

        <div class="form-group col-xs-8">
            <label for="CustoFixoVariado">Custo Fixo Variado</label>
            @Html.EditorFor(model => model.CustoFixoVariado, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.CustoFixoVariado, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.LPU)
            @Html.EditorFor(model => model.LPU, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.LPU, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.SSFD)
            @Html.EditorFor(model => model.SSFD, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.SSFD, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="ServEspeciais">Serviços Especiais</label>
            @Html.EditorFor(model => model.ServEspeciais, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ServEspeciais, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="BonusGlossa">Bonus Glossa</label>
            @Html.EditorFor(model => model.BonusGlossa, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BonusGlossa, "", new { @class = "text-danger" })
        </div>

    </div>
    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.FLPU)
            @Html.EditorFor(model => model.FLPU, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.FLPU, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="ColaboradorID">Criado Por</label><br />

            <select class="form-control" name="ColaboradorID" id="ColaboradorID">
                <option value="">Selecione um Colaborador</option>
            </select>

        </div>

    </div>


    <div class="row">
        <div class="form-group col-xs-8">
            <label for="DestinatarioID">Destinatário</label><br />

            <select class="form-control" name="DestinatarioID" id="DestinatarioID">
                <option value="">Selecione um Destinatario</option>
            </select>

        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ContratoID">Contrato</label><br />

            <select class="form-control" name="ContratoID" id="ContratoID">
                <option value="">Selecione um Contrato</option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ItemContratoID">Item do Contrato</label><br />

            <select class="form-control" name="ItemContratoID" id="ItemContratoID">
                <option value="">Selecione um item do contrato</option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ReqCompraId">Requisição de Compra</label><br />

            <select class="form-control" name="ReqCompraId" id="ReqCompraId">
                <option value="">Selecione uma requisição de compra</option>
            </select>

        </div>
    </div>


    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ItemRCId">Item da Requisição de Compra</label><br />

            <select class="form-control" name="ItemRCId" id="ItemRCId">
                <option value="">Selecione um item</option>
            </select>

        </div>
    </div>


    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ContaContabilId">Conta contabil</label><br />

            <select class="form-control" name="ContaContabilId" id="ContaContabilId">
                <option value="">Selecione uma conta contabil</option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="CentroCustoId">Centro de Custo</label><br />

            <select class="form-control" name="CentroCustoId" id="CentroCustoId">
                <option value="">Selecione um centro de custo </option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ObjetoCustoId">Objeto de Custo</label><br />

            <select class="form-control" name="ObjetoCustoId" id="ObjetoCustoId">
                <option value="">Selecione um objeto de custo </option>
            </select>

        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-8">
            <label for="AreaReclamacaoId">Área de Reclamação</label><br />

            <select class="form-control" name="AreaReclamacaoId" id="AreaReclamacaoId">
                <option value="">Selecione uma área de reclamação </option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="MotivoID">Motivo </label><br />

            <select class="form-control" name="MotivoID" id="MotivoID">
                <option value="">Selecione um motivo </option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="StatusPedidoId">Status do Pedido </label><br />

            <select class="form-control" name="StatusPedidoId" id="StatusPedidoId">
                <option value="">Selecione um status </option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="CidadeId">Cidade</label><br />

            <select class="form-control" name="CidadeId" id="CidadeId">
                <option value="">Selecione uma cidade </option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="TipoCustoID">Objeto de Custo</label><br />

            <select class="form-control" name="TipoCustoID" id="TipoCustoID">
                <option value="">Selecione um Tipo de Custo</option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="SiteID">Site</label><br />

            <select class="form-control" name="SiteID" id="SiteID">
                <option value="">Selecione um Site </option>
            </select>

        </div>
    </div>
    <div class="row">
        <div class="form-group col-xs-8">
            <label for="TipoPedidoId">Tipo Pedido</label><br />

            <select class="form-control" name="TipoPedidoId" id="TipoPedidoId">
                <option value="">Selecione um tipo de Pedido </option>
            </select>

        </div>
    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.DtCompet)
            @Html.EditorFor(model => model.DtCompet, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DtCompet, "", new { @class = "text-danger" })
        </div>

    </div>
    <div class="row">

        <div class="form-group col-xs-8">
            <label for="CodigoPatrimonial">Codigo Patrimonial</label>
            @Html.EditorFor(model => model.CodigoPatrimonial, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.CodigoPatrimonial, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            <label for="nPedidosSistema">Numero Pedido do Sistema</label>
            @Html.EditorFor(model => model.nPedidosSistema, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.nPedidosSistema, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Endereco)
            @Html.EditorFor(model => model.Endereco, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Endereco, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Quantidade)
            @Html.EditorFor(model => model.Quantidade, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Quantidade, "", new { @class = "text-danger" })
        </div>

    </div>


    <div class="row">

        <div class="form-group col-xs-8">
            <label for="ValorReal">Valor Real</label>
            @Html.EditorFor(model => model.ValorReal, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ValorReal, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">

        <div class="form-group col-xs-8">
            @Html.LabelFor(model => model.Observacao)
            @Html.EditorFor(model => model.Observacao, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Observacao, "", new { @class = "text-danger" })
        </div>

    </div>

    <div class="row">
        <div class="form-group col-xs-8">
            <label for="ProtocoloID">Protocolo</label><br />

            <select class="form-control" name="TipoPedidoId" id="ProtocoloID">
                <option value="">Selecione um Protocolo </option>
            </select>

        </div>
    </div>

    <div class="form-group">
        <input type="button" value="Salvar" class="btn btn-success" />
    </div>
}

@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/projeto/EnviarFormulario.js"></script>
<script src="~/Scripts/psp/Create_Pedidos.js"></script>

<script type="text/javascript">

    var btnAcao = $("input[type='button']");
    var formulario = $("#formCrud");

</script>

My JS

$('body').on('click', '#btnNovoPedido', function () {

    $.ajax({

        type: 'GET',
        url: 'Pedidos/GetColaborador',
        dataType: 'json',
        success: function (dados) {
            var selectColaborador = $('#ColaboradorID');
            var selectDestinatario = $('#DestinatarioID');
            $.each(dados, function (i, d) {
                $('<option>').val(d.id).text(d.id).appendTo(selectColaborador);
            });

            $.each(dados, function (i, d) {
                $('<option>').val(d.id).text(d.id).appendTo(selectDestinatario);
            });
        },
        error: function () {
            console.log("Falha de enviar AJAX");
        }
    })

});
  • What button are you talking about?

  • Oops, index, wrong & #Xa;I put index there

  • Use with attribute on your <button onclick="someFunction()"></button>

  • good idea, thanks

  • Comments as a reply, which I will mark as solved @Mayconf.Castro

1 answer

0

Use with attribute on your button:

<button onclick="someFunction()"></button>

I hope I’ve helped.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.