0
I have a cshtml, which is shown like this: A sequence of filters that are fixed. When I click 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 mount the rest of the html on the page. When I put everything fixed first, to test design and etc, this line went to the end of everything and did not appear. Now that is the natural behavior of the page, this line is below the filters, but cuts the rest of the components. See how it looks. I thought I had some lost div, but I couldn’t find it.
See how the page looks. See the line by cutting the word CNPJ, Social Reason and etc..
Here is my jquery.
........
$.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 enters.
<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 method of the controller:
[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’s all my html tabs.
@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>
See the new image of another tab, inside a tab. I didn’t put any control and you can see that there is a delimiter line.
Try using firebug to see where the bar is coming from, try to see if there is another element missing too, or if there is one more, try to compare with the code that had worked.
– Luís Henrique Bevilaqua
Make sure you don’t need any parent elements for all elements...
– Luís Henrique Bevilaqua
I would have been able to post the code that worked?
– Luís Henrique Bevilaqua
Have you ever used Firebug or any Developer Tool? They will be able to help you identify which elements are missing...
– Luís Henrique Bevilaqua
I think I know what the problem is. The tab menu is mounted first and it generates this delimiting line. It turns out, when I assemble my html dynamically, it(tab) is already mounted and the html is thrown on top of it, already with the bounding line, so I can’t remove that line. I have to figure out a way to dynamically assemble this menu.
– pnet