I have a cshtml, which is shown like this: A sequence of filters that are fixed. When I click on search, then I get the return of a method in the controller via json by a jquery function and in the success of ajax, I add the rest of the html on the page. When I put everything in place first, to test design and etc, that line went to the end of everything and did not show up. Now that is the natural behavior of the page, this line falls below the filters, but cuts out the rest of the components. Here's how it goes. I thought I had some lost div, but I did not find it. See how the page looks. See the line cutting the word CNPJ, Social Name and etc.
Here'smyjquery.
........$.ajax({url:'/GerenciarPDV/MontaGridPdv',dataType:"json",
contentType: "application/json; charset=utf-8",
type: "POST",
data: JSON.stringify({ carregaGrid: resultado }),
success: function (data) {
str += '<div class="container col-xs-4" id="tabela">';
str += '<table class="table table-striped table-ordered table-bordered">';
str += '<thead>';
str += '<tr>';
str += '<td><strong>CNPJ</strong></td>';
str += '<td><strong>Razão Social</strong></td>';
str += '</tr>';
str += '</thead>';
str += '<tbody>';
$(data.result).each(function () {
str += '<tr>';
str += '<td><a href=""><small>' + this.CNPJ + '</small></a></td>';
str += '<td><a href=""><small>' + this.RazaoSocial + '</small></a></td>';
str += '</tr>';
})
str += '</tbody>';
str += '</table>';
str += '</div>';
str += '<div class="pull-left">';
str += '<div >';
str += '<label><b>Situação:</b></label>';
str += '<label>Label2</label>';
str += '<label><b>Status:</b></label>';
str += '<label>LabelZ</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Razão Social:</b></label>';
str += '<label>Label4</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Nome de Fantasia:</b></label>';
str += '<label>Label6</label>';
str += '</div>';
str += '<div>';
str += '<label><b>CNPJ:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Endereço:</b></label>';
str += '<label>Label6</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Número:</b></label>';
str += '<label>Label8</label>';
str += '<label><b>Complemento:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Bairro:</b></label>';
str += '<label>Label8</label>';
str += '<label><b>CEP:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Cidade:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Estado:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Telefone Fixo:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Celular:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tipo:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Qtde Checkouts:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tipo da Rede:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Nome da Rede:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Contato:</b></label>';
str += '<label>Label6</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tel. Contato:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Cel. Contato:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<div>';
str += '<div class="pull-right">';
//str += '<div>';
str += '<button type="button" class="btn btn-danger">Inativar</button>';
str += '<button type="button" class="btn btn-primary">Add</button>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '<div class="pull-right" id="tabela4">';
str += '<br />';
str += '<table class="table table-striped table-ordered table-bordered col-md-4">';
str += '<thead>';
str += '<tr>';
str += '<td><strong>ID Evento</strong></td>';
str += '<td><strong>Tipo</strong></td>';
str += '<td><strong>Usuário</strong></td>';
str += '<td><strong>Data de Inclusão</strong></td>';
str += '</tr>';
str += '</thead>';
str += '<tbody>';
str += '<tr>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>66579012000120</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>franquia</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>66579012000120</small></td>';
str += '<td class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><small>26/06/2014 14:37:00</small></td>';
str += '</tr>';
str += '</tbody>';
str += '</table>';
str += '</div>';
str += '</div>';
str += '</div>';
cont++;
str += '</table>';
$('#montaPesquisaGrid').html(str);
str = "";
............
Here is my CSHTML and the position where the code comes in.
<div id="tabs-1">
<form role="form"><!--A tag ul contem os titulos das abas-->
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtContato" >Contato:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o contato" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Associativa">Associativa</option>
<option value="Franquia">Franquia</option>
<option value="Propria">Própria</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Ok">Ok</option>
<option value="Atençao">Atenção</option>
<option value="Erro">Erro</option>
<option value="NaoCadastrado">Não Cadastrado</option>
<option value="Desativado">Desativado</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
<option value="Geral">Geral</option>
<option value="SouzaCruz">Souza Cruz</option>
</select>
</div>
<button type="button" class="btn btn-success" onclick=" return MontaGridPdv();">Pesquisar</button>
<br /><br />
</div>
<div id="montaPesquisaGrid">
</div>
</form>
</div>
The controller method:
[HttpPost]
public JsonResult MontaGridPdv(carregaGridPesquisa carregaGrid)//
{
ConsultaGeral geral = new ConsultaGeral();
V99_WEBEntities db = new V99_WEBEntities();
V99_QAEntities dba = new V99_QAEntities();
var resultado = (from web in db.T_PDV
join testab in db.T_TipoEstabelecimento on web.IDTipoEstabelecimento equals (testab.IDTipoEstabelecimento)
join trede in db.T_TipoRede on web.IDTipoRede equals (trede.IDTipoRede)
join tusupdv in db.T_UsuarioPDV on web.IDPdv equals (tusupdv.IDPDV)
join tusu in db.T_Usuario on tusupdv.IDUsuario equals (tusu.IDUsuario)
join tstatus in db.T_CRM_StatusPDV on web.CNPJ equals (tstatus.DE_Cnpj)
select new
{
web.CNPJ,
web.RazaoSocial,
web.NomeFantasia,
web.Endereco,
web.Bairro,
web.Cidade,
web.Estado,
web.CEP,
web.Complemento,
web.Numero,
web.QtdeCheckOuts,
web.Telefone,
web.NomeRede,
web.Email,
web.Celular,
web.IS_Ativo,
tstatus.IT_Status,
trede.Nome,
contato = tusu.Nome,
cel_contato = tusu.Celular
});
if (!string.IsNullOrEmpty(carregaGrid.cnpjRazao))
resultado = resultado.Where(cn => cn.CNPJ == carregaGrid.cnpjRazao);
if (carregaGrid.rede != "SemFiltro")
resultado = resultado.Where(cn => cn.Nome == carregaGrid.rede);
if (carregaGrid.status != "SemFiltro")
resultado = resultado.Where(cn => cn.Nome == carregaGrid.status);
if (carregaGrid.visao == "Souza Cruz")
resultado = resultado.Where(cn => cn.Nome == carregaGrid.visao);
var result = resultado.ToList();
return Json(new { result }, JsonRequestBehavior.AllowGet);
}
There you have all my tabs html.
@model List<V99SuporteTecnico.Models.T_PDV>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="pt-BR" class="no-js">
<!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width" />
<title>GerenciarPDV</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Styles.css" rel="stylesheet" />
@*<link href="~/Content/PosicaoLayout.css" rel="stylesheet" />*@
@*<link href="~/Content/Agendamento.css" rel="stylesheet" />*@
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.pt-BR.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" media="screen"/>
<script src="~/Scripts/bootstrap-datepicker.js" ></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">PDV</a></li>
<li><a href="#tabs-2">Eventos</a></li>
<li><a href="#tabs-3">Formulários</a></li>
@*<li><a href="#agendamento">Agendamento</a></li>*@
<li class="agendamento"><a href="#agendamento">Agendamento</a></li>
</ul>
<div id="tabs-1">
<form role="form"><!--A tag ul contem os titulos das abas-->
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtContato" >Contato:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o contato" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Associativa">Associativa</option>
<option value="Franquia">Franquia</option>
<option value="Propria">Própria</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Ok">Ok</option>
<option value="Atençao">Atenção</option>
<option value="Erro">Erro</option>
<option value="NaoCadastrado">Não Cadastrado</option>
<option value="Desativado">Desativado</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
<option value="Geral">Geral</option>
<option value="SouzaCruz">Souza Cruz</option>
</select>
</div>
<button type="button" class="btn btn-success" onclick=" return MontaGridPdv();">Pesquisar</button>
<br /><br />
</div>
<div id="montaPesquisaGrid">
</div>
</form>
</div>
<div id="tabs-2">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="txtCnpj" class="col-sm-2 control-label">CNPJ:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
</div>
<label for="imgStatus" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<img src="~/Images/Certo.png" class="img-responsive col-md-4 control-label" id="imgStatus"/>
</div>
</div>
<div class="form-group">
<label for="txtRazaoSocial" class="col-md-2 control-label">Razão Social:</label>
<div class="col-md-6">
<input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
</div>
</div>
<div class="form-group">
<label for="txtIdEvento" class="col-md-2 control-label">ID Evento:</label>
<div class="col-md-2">
<input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
</div>
</div>
<div class="form-group">
<label for="txtDescricao" class="col-md-2 control-label">Descrição:</label>
<div class="col-md-3">
<textarea class="form-control" id="txtDescricao" placeholder="Digite uma descrição" rows="4"></textarea>
</div>
<label for="ddlTipoEvento" class="col-md-2 control-label">Tipo Evento:</label>
<div class="col-md-3">
<select class="form-control" name="ddlTipoEvento" id="ddlTipoEvento" >
<option selected="selected" value="0"></option>
<option value="2">Acesso Remoto</option>
<option value="8">Agendamento de Visita Técnica</option>
<option value="6">Alteração de Cadastro</option>
<option value="9">Ativar PDV</option>
<option value="4">Contato Comercial</option>
<option value="11">Contato Técnico</option>
<option value="10">Inativar PDV</option>
<option value="15">Instalação Extrator Cod. Interno</option>
<option value="16">Processo 2</option>
<option value="14">Processo Interno PDV</option>
<option value="12">Sem Intervenção Técnica</option>
<option value="1">Visita Técnica</option>
</select>
</div>
</div>
<div class="form-group">
<label for="ddlAcao" class="col-md-2 control-label">Ação:</label>
<div class="col-md-3">
<select class="form-control" id="ddlAcao" >
<option selected="selected" value="0"></option>
<option value="2">Acesso Remoto</option>
<option value="8">Agendamento de Visita Técnica</option>
<option value="6">Alteração de Cadastro</option>
<option value="9">Ativar PDV</option>
<option value="4">Contato Comercial</option>
<option value="11">Contato Técnico</option>
<option value="10">Inativar PDV</option>
<option value="15">Instalação Extrator Cod. Interno</option>
<option value="16">Processo 2</option>
<option value="14">Processo Interno PDV</option>
<option value="12">Sem Intervenção Técnica</option>
<option value="1">Visita Técnica</option>
</select>
</div>
<label for="ddlUsuario" class="col-md-2 control-label">Usuário:</label>
<div class="col-md-3">
<select class="form-control" id="ddlUsuario" >
<option selected="selected" value="0"></option>
</select>
</div>
</div>
<div class="control-group">
<label for="txtUsuarioData" class="col-md-2 control-label">Usuário:</label>
<div class="col-md-3">
<input type="text" class="datepicker" id="txtUsuarioData"/>
</div>
<button type="button" class="btn btn-success">Finalizar</button>
</div>
<br />
<div id="subtabs">
<ul>
<li><a href="#tabs-11">EventosPDV</a></li>
<li><a href="#tabs-21">Minhas Tarefas</a></li>
</ul>
</div>
<div id="tabs-11">
</div>
<div id="tabs-21">
</div>
</form>
</div>
<div id="tabs-3">
<div id="tabelaFormRazao-1" class="divHorEsquerda-1">
<table>
<tr>
<td>
@Html.Label("Razão Social:")
</td>
<td>
<input type="text" id="txtRazaoSocialForm" />
</td>
</tr>
<tr>
<td>
@Html.Label("CNPJ:")
</td>
<td>
<input type="text" id="txtCnpjForm" />
</td>
</tr>
<tr>
<td>
@Html.Label("Técnico Responsável:")
</td>
<td>
<input type="text" id="txtTecnicoRespForm" />
</td>
</tr>
<tr>
<td>
@Html.Label("Tratou Com:")
</td>
<td>
@Html.TextBox("txtTratouComForm")
</td>
</tr>
</table>
</div>
<div id="tabelaFormRazao-2" class="divHorEsquerda-2">
<table>
<tr>
<td>
@Html.Label("ID:")
</td>
@if(Model != null && Model.Count > 0)
{
<td>
@* @Html.LabelFor(m => m[0].)*@
</td>
}
</tr>
<tr>
<td>
@Html.Label("OS DTI:")
</td>
<td>
@Html.TextBox("txtOsParceiroForm")
</td>
</tr>
<tr>
<td>
@Html.Label("Qtde Checkouts:")
</td>
<td>
@Html.TextBox("txtQtdCheckoutForm")
</td>
</tr>
<tr>
<td>@Html.CheckBox("Acesso Remoto")Acesso Remoto</td>
<td>@Html.CheckBox("Visita Técnica")Visita Técnica</td>
<td>@Html.CheckBox("Contato Técnico")Contato Técnico</td>
</tr>
</table>
</div>
<div class="divHorEsquerda-3">
@Html.Label("1", new { @style="font-size:72px;top:100%;left:3%" })
</div>
<div class="divHorEsquerda-4">
<fieldset>
<table>
<tr>
<td>@Html.RadioButton("Improdutivo","Reagendar")Improdutivo-Reagendar</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","PDV Não Apto")Improdutivo-PDV Não Apto</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","Comercial")Improdutivo-Comercial</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","Infra Estrutura")Improdutivo-Infra Estrutura</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","Finalizado")Finalizado</td>
</tr>
</table>
</fieldset>
</div>
</div>
<div id="agendamento">
<table style="width: 100%;">
<tr>
<td class="Formatlabel"><strong>
<label id="lblCNPJ">CNPJ</label>
</strong></td>
<td class="auto-style25">
<input id="txtCNPJ" type="text"/></td>
</tr>
<tr>
<td class="Formatlabel" style="width: 55px;height: 26px;"><strong>
<label id="lblOS">OS:</label></strong></td>
<td class="auto-style26">
<input id="txtOS" type="text" style="color:blue"/></td>
<td>
<input id="btnPesquisar" type="button" value="Pesquisar" onclick=" return MontaAgendamento();" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div id="filtro">
</div>
</div>
</div>
<input type="hidden" id="txtCnpjRazao" />
</body>
<script src="@Url.Content("~/Scripts/jquery.maskedinput.min.js")"></script>
<script src="@Url.Content("~/Scripts/Menu.js")"></script>
<script src="@Url.Content("~/Scripts/main.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-color.js")"></script>
<script src="@Url.Content("~/Scripts/Util.js")"></script>
<script src="@Url.Content("~/Scripts/GerenciarPDV/GerenciarPDV.js")"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script></html>
Viewthenewimagefromanothertab,insideatab.Ihavenotputanycontrolsandyoucanalreadyseethatthereisaboundingline.