0

Tenho um cshtml, que é mostrado assim: Um sequencia de filtros que são fixos. Quando eu clico em pesquisar, aí pego o retorno de um método na controller via json por uma função jquery e no sucesso do ajax, monto os restante do html na página. Quando eu coloquei tudo fixo primeiro, para testar design e etc, essa linha ia para o fim de tudo e não aparecia. Agora que é o comportamento natural da página, essa linha fica abaixo dos filtros, mas corta o restante dos componentes. Veja como fica. Achei ter alguma div perdida, mas não achei. Veja como fica a página. Veja a linha cortando a palavra CNPJ, Razão Social e etc.. inserir a descrição da imagem aqui

Aqui está meu 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 = "";
............

Aqui está meu CSHTML e a posição onde entra o código.

<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>

O método da 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);
        }

Aí está todo meu html das abas.

@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>

Veja a nova imagem de outra tab, dentro de uma tab. Não coloquei controle nenhum e já podem ver que existe uma linha delimitadora.

inserir a descrição da imagem aqui

2 Respostas 2

1

Remova o comentário da linha no JS:

//str += '<div>';

E também remova no final a linha:

str += '</table>';

São apenas erros de abre e fecha elementos.

JS corrigido:

    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>';
    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++;
     $('#montaPesquisaGrid').html(str);
     str = "";
5
  • Experimenta usar o firebug para ver de onde vem a barra, tente ver se não está faltando algum outro elemento também ou se tem algum a mais, tente comparar com o código que havia dado certo. Commented 27/06/2014 às 16:07
  • Verifique se não precisa de algum elemento pai para todos os elementos... Commented 27/06/2014 às 16:28
  • Teria como postar o código que deu certo? Commented 27/06/2014 às 16:32
  • Você já usou o Firebug ou alguma Ferramenta do Desenvolvedor? Eles vão poder te ajudar a identificar quais elementos estão faltando... Commented 30/06/2014 às 14:39
  • Acho que eu sei qual é o problema. O menu tab é montado primeiro e ele gera essa linha delimitadora. Acontece, que quando eu monto meu html dinamicamente, ele(tab) já está montado e o html é jogado em cima dele, já com a linha delimitadora, por isso eu não consigo remover essa linha. Tenho que bolar uma forma de montar esse menu dinamicamente.
    – pnet
    Commented 30/06/2014 às 17:28
0

Resolvi o problema da linha.

<div id="tabs" style="border:none"> => BORDER NONE

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .