I have to fill some combobox at the click of a button.
When I click this button it first loads a modal and the second time I click it it creates the modal by loading the data I need by doing the ajax request.
How do you send 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");
}
})
});