Criar um select com JavaScript e uma tabela

Ewerton, vamos la, para popular um select com ajax vou precisar das seguintes informações.

Controller e Modelo que você precisa popular o select.

Se preferir manda o projeto para mim igual fizemos no outro tópico, fica mais fácil ainda, pois eu monto o código e posto para você.

https://drive.google.com/drive/folders/0B1n2t9Tjxu9GeVZkMWhEV2hCdnM?usp=sharing

Lembrando, é preciso criar o bd ebfvaz

Eu também preciso montar uma tabela dinâmica... Pq pelo controller carregando todos os dados da tabela fica muito pesado... Vc quer que eu abra outro post e te mande o link ?

Obrigado pela ajuda!!

Vamos por vez, espera eu fazer esse código para popular os selects com ajax ai dando certo a gente ja ve sobre a tabela.

Blz, mas todo caso vou tentando montá-la por aqui...

Obrigado!!

Como você monta as tabelas hoje ?

Usa o displaytag, você só faz o include da lista que ele faz o resto sozinho.

Eu tenho meu método no DAO:

    public List<Cliente> lista() {
        TypedQuery<Cliente> query = manager.createQuery("Select c from Cliente c", Cliente.class);
        return query.getResultList();
    }

Invoco ele pelo controller:

    public void lista() {
        List<Cliente> clientes = clienteDao.lista();
        result.include("clientes", clientes);
    }

E na lista.jsp:

        <h3>Lista de clientes</h3>
        <table id="tabClientes" class="table table-striped table-bordered table-condensed dataTable" role="grid" style="width: 150%;">
            <thead>
                <tr>
                     <th>Num.Cadastro</th> 
                     <th>Num.Cad.Antigo</th> 
                     <th>Dt.Cadastro</th> 

                    ***OUTROS CAMPOS ***

                </tr>
            </thead>
            <tbody>
                <c:forEach items="${clientes}" var="cliente">
                    <tr>
                        <td><c:if test="${not empty cliente.numCadastro}">
                            ${cliente.numCadastro}
                        </c:if></td>

                        <td><c:if test="${not empty cliente.numCadAntigo}">
                            ${cliente.numCadAntigo}
                        </c:if></td>

                        <td><c:if test="${not empty cliente.dataCadastro}">
                            <fmt:formatDate value="${cliente.dataCadastro}"
                                        pattern="dd/MM/yyyy" />
                            </c:if></td>

                    ***OUTROS CAMPOS ***

                    <td style="text-align: center"><a
                            href="${linkTo[ClienteController].atualiza}?numCadastro=${cliente.numCadastro}"
                            class="addSelecionaLista" title="Selecionar"> <i
                                class="glyphicon glyphicon-log-in"></i>
                        </a></td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
</body>

Fiz conforme o curso de VRaptor 4 e JPA, para tabelas "pequenas" blz...

Mas quando eu chego em uma tabela grande, como a de clientes, que tem 130 atributos e quase 32 mil registros...

O browse da estouro de cache e não carrega - muita informação...

Como estou trabalhando em uma base, que está em produção, não posso mexer na estrutura da tabela, se não para os outros sistemas...

Trabalha com paginação, traga por padrão os primeiros 100 registros por exemplo, ai o resto você cria páginas para carregar mais.

E como eu faço isso ?

Eu havia tentado colocar condição, no JPQL da TypedQuery, mas não deu certo...

Você pode fazer com o displaytag, ele possui esse recurso de paginação: http://www.displaytag.org/1.2/

E também existe um plugin de paginação do vraptor porém eu nunca usei ele: https://github.com/caelum/vraptor-paginator

Desculpe Matheus, mas não consegui implementar nenhum...

Implementei o modelo do github, porém no meu ClienteDao, no método lista, gera o erro em ".paginate"

@Get("/{page.number}")
    public List<Cliente> lista(Page page) {
        TypedQuery<Cliente> query = manager.createQuery("Select c from Cliente c", Cliente.class).paginate(page);
        return query.getResultList();
    }

Erro:

=> The method paginate(Page) is undefined for the TypedQyery<Cliente>

``` Implentei as classes:

CountQueryProducer CurrentPage JPAPager JPAPaginatedQuery LinkedPageDefinition Page PageCalculator Pages Paginator ThreeDotsDefinition

E as Iinterfaces:

PageDefinition Pager PaginatedQuery

Bom dia Matheus! Tudo bem? Conseguiu ver algo sobre os selects ...

...

Ewerton, desculpe a demora, estou enrolado com uns B.O no meu framework CSS, acredito que entre hoje e amanhã eu ja resolva para você.

Obrigado Matheus !!! Desculpe-me a cobrança... Um abraço!!

Matheus, quanto a questão da paginação da tabela, acabei de falar com o Guilherme e ele me disse que o projeto do GitHub está parado desde 2014, então ele é INCOMPATÍVEL com as versões atuais do VRaptor...

Você tera que usar a paginação do displaytag então.

Matheus, vc tem algum exemplo de uso da displaytag ?

Matheus coloquei uma versão atualizada do fonte => https://drive.google.com/drive/folders/0B1n2t9Tjxu9GckdsZEowUGRxT2s?usp=sharing

OBS.: Lembrando, é preciso criar o Banco de Dados "ebfvaz" no MySQL

Obrigado pela ajuda!!!

Matheus não esquece de mim... Estou tentando implementar o DataTable... Bom Reveillon !!!

Tranquilo, ja estou reescrevendo minha biblioteca de javascript, ai terminando te passo.

Feliz ano novo.

Blz Matheus, obrigado!! Muita paz e saúde pra 2017 !!!

Ewerton, acabei de terminar o script, manda para mim seu projeto mais atualizado.

Bom dia Matheus! Tentei implementar o DataTables, mas não deu muito certo... Vc quer que eu te mande o bkp, SEM essa implementação, ai agente termina os selects e depois vemos o DataTables ? Ou mando COM essa implementação que eu fiz, pra vc ver ?

Matheus, vamos por partes... Atualizei o fonte no Drive, SEM a parte do DataTables... => https://drive.google.com/drive/folders/0B1n2t9Tjxu9GckdsZEowUGRxT2s?usp=sharing

Muito obrigado!!!

Vamos por partes, vamos resolver o select primeiro ai a gente ve a questão do displaytag.

Ja fiz o download do projeto, de noite posto ele atualizado.

Beleza, obrigado Matheus!!

Ewerton, segue projeto atualizado:

https://mega.nz/#!r45EhTBS!u0iwHn8NWurTTJru8kNemtQ6CPooB4HAuog6LE194xg

Apenas adicionei minha biblioteca de JS, fiz modificações nos controllers do Pais, Cidade, Estado e Transportadora.

Abraçooos.

Matheus, tentei cadastrar uma transportadora, mas os select´s não estão listando... Cidade/Estado/Pais...

Você pegou os códigos que lhe mandei ? Aqui deu tudo certo...

Bom dia Matheus!!

Peguei sim... tem a pasta jlib dentro da js, com seus arquivos...

Adicionei a importação do script nos dois .jsp´s do usuário (formulario e o lista), antes de fechar a tag body...

    <script type="text/javascript" src="<c:url value="/js/jlib/jlib.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/jlib/select.js"/>"></script>

Mas quando eu edito um usuário, por exemplo... Não persiste o departamento...

Atah, pensei que era o formulario da transportadora, veja que o transportadora esta correto, de uma olhada nos selects pois precisa informar os atributos data-select e data-url/

Então Matheus, eu testei o cadastro de Transportadora, mas os campos select´s não estão listando as informações cadastradas... Cidade/Estado/Pais... Até dei um DROP no BD, recriei-o e fiz novos cadastros de Cidade/Estado e Pais... Mas continuou não listando...

Ao abrir o formulário da transportadora abra o console do navegador e veja se esta dando algum erro, caso esteja cole aqui para mim.

Desculpe-me Matheus, eu estava testando pelo Eclipse (Run as => Run on server)... Quando eu testei pelo Chrome, para abrir o console do browser, não gerou nenhum erro ao abrir o formulário, e as informações dos select´s foram carregadas perfeitamente... Na listagem está mostrando o código da cidade, vou mudar pro nome e fazer as alterações nas outras telas conforme vc implementou... Agora na parte da manhã eu acho q já termino, e já encerro o post... só pro caso de eu ter alguma dúvida...

Muito obrigado pela ajuda !!!!!

Um abraço!!

Matheus e pra campos que eu tenho o valor "chumbado"...

Como esse:

                     <select name="estado.regiao" id="regiao" class="form-control" required="required"> 
                        <option value="CENTRO_OESTE">CENTRO_OESTE</option>
                        <option value="NORDESTE">NORDESTE</option>
                        <option value="NORTE">NORTE</option>
                        <option value="SUDESTE">SUDESTE</option>
                        <option value="SUL">SUL</option>
                    </select>

Os select´s que buscam as informações em tabelas estão OK... Estou replicando para as outras telas...

E como eu uso o mask.js, por exemplo em um campo CEP:

<input type="text" name="transportadora.endCep" size="10" maxlength="10" id="endCep" class="form-control" value="${transportadora.endCep}" /><br />

Eu importei o js antes de fechar o body:

<script type="text/javascript" src="<c:url value="/js/jlib/mask.js"/>"></script>

Vamos la, para trabalhar com selects onde os options são definidos no próprio HTML basta você ter um input hidden com o mesmo nome do select acrescentado aux no final:

<input name="estado.regiaoaux" type=""hidden" value="${estado.regiao]">

 <select name="estado.regiao" id="regiao" class="form-control" required="required"> 
    <option value="CENTRO_OESTE">CENTRO_OESTE</option>
    <option value="NORDESTE">NORDESTE</option>
    <option value="NORTE">NORTE</option>
    <option value="SUDESTE">SUDESTE</option>
    <option value="SUL">SUL</option>
</select>

Ai ele vai setar o option selecionado de acordo com o banco de dados, veja que eu só utilizado esse input hidden aux para que os selects venham com determinado option selecionado de acordo com o banco de dados.

Para utilizar o mask basta no onkeypress do seu input você adicionar a função mask:

<input onkeypress="mask(nomeDaMask, this, event);" type="text">

Onde o nomeDaMask pode ser qualquer mascara definida no arquivo mask.js.

Abraçooos

A mascara funcionou Matheus, mas o input não...

não entendi...

O input dos campos select, que carregam os dados vindos da tabela estão OK... => Estão persistindo as informações, quando eu seleciono um registro pra alterar...

As máscaras estão OK...

Porém os input dos campos select, que possuem os dados "CHUMBADOS", não estão persistindo as informações, quando eu seleciono um registro pra alterar...

Criou os inputs aux ?

Adiciona esses atributos nos selects: data-select="sl" e data-url="sl", ai vai resolver o problema.

Abraçoos

Matheus, como eu adiciono o data-select="sl" e data-url="sl", pq eu não estou buscando as informações em tabelas... Pra eu adicionar no Dao o Json... Os dados são "chumbados"...

Eu estou perdendo uma propriedade de abas que eu tenho no formulário de cliente, ele possui muitos campos então criei abas, para separar as informações, porém quando eu adiciono a importação do jlib.js ele "mata" as abas...

Código do meu .jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="ebf"%>

<!DOCTYPE html>
<html>

<head>

<title>Módulo de clientes</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<c:url value='/css/bootstrap.min.css'/>"  />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/jquery-ui.css'/>"  />
<link rel="stylesheet" type="text/css" href="<c:url value='/css/style.css'/>"  />
<script type="text/javascript" src="<c:url value="/js/jquery-1.12.4.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-ui.js"/>"></script>

<script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
</script>

</head>

<body>
    <form action="${linkTo[ClienteController].salva(null)}" method="post">
        <input name="cliente.endCidaux" type="hidden" value="${cliente.endCid}">
        <input name="cliente.endEstaux" type="hidden" value="${cliente.endEst}">
        <input name="cliente.endPaisaux" type="hidden" value="${cliente.endPais}">
        <input name="cliente.endECidaux" type="hidden" value="${cliente.endEntgCid}">
        <input name="cliente.endEEstaux" type="hidden" value="${cliente.endEntgEst}">
        <input name="cliente.endEPaisaux" type="hidden" value="${cliente.endEntgPais}">
        <input name="cliente.endPCidaux" type="hidden" value="${cliente.endPagCid}">
        <input name="cliente.endPEstaux" type="hidden" value="${cliente.endPagEst}">
        <input name="cliente.endPPaisaux" type="hidden" value="${cliente.endPagPais}">
        <input name="cliente.numCadRepreaux" type="hidden" value="${cliente.numCadRepre}">
        <input name="cliente.numCadRepreEcoaux" type="hidden" value="${cliente.numCadRepreEco}">
        <input name="cliente.numCadRepreVazLogaux" type="hidden" value="${cliente.numCadRepreVazLog}">
        <input name="cliente.numTranspaux" type="hidden" value="${cliente.numTransp}">

        <input type="hidden" name="hdcliente" id="hdcliente" value="<%=request.getRemoteUser()%>">
        <input type="hidden" value="1" id="controle_cons" name="controle_cons" /> <br />
        <div id="container-fluid">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span> <span class="icon-bar"></span> 
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">INÍCIO CLIENTES</a>
                    </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="${linkTo[LoginController].desloga()}">Deslogar</a></li>
                            <li><a href="${linkTo[IndexController].index()}" id="pgInicial">Pág. Inicial</a></li>
                            <li><a href="${linkTo[ClienteController].lista()}" id="listarClientes">Listar</a></li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>
        <br /> <br /> <br />

        <div class="btn-group" data-toggle="buttons"></div>

        <div class="panel panel-default painelCabecalho">
            <div class="panel-heading">
                <h3 class="panel-title">Informações do Cliente</h3>
            </div>
            <div id="collapse1" class="panel-body panel-collapse collapse">
            </div>
            <br />

        <div id="tabs">
              <ul>
                <li class="active"><a href="#tabs-1">D. PRINCIPAIS</a></li>
                <li><a href="#tabs-2">D. ENTREGA</a></li>
                <li><a href="#tabs-3">D. PAGAMENTO</a></li>
                <li><a href="#tabs-4">D. BANCÁRIOS</a></li>
              </ul>

<!--        DADOS PRINCIPAIS, PRIMEIRA "ABA" -->
              <div id="tabs-1">

            <!--PRIMEIRA LINHA... -->
            <div class="row text-left">
                <input type="hidden" name="cliente.numCadastro" size="7" maxlength="7" id="numCadastro" class="form-control" value="${cliente.numCadastro}" autofocus="autofocus" /><br />
                <ebf:validationMessage name="cliente.numCadastro" />

                <div class="col-md-2">
                    <span>Num.Cad.Antigo:</span> 
                    <input type="text" name="cliente.numCadAntigo" size="50" maxlength="50" id="numCadAntigo" class="form-control" value="${cliente.numCadAntigo}" /><br />
                    <ebf:validationMessage name="cliente.numCadAntigo" />
                </div>

                <input type="hidden" name="cliente.dataCadastro" id="dataCadastro" class="form-control" value="<fmt:formatDate pattern="dd/MM/yyyy" type="date" value="${cliente.dataCadastro}"/>"/> 
                <ebf:validationMessage name="cliente.dataCadastro" /> 

                <div class="col-md-2"></div>
            </div>
            <br />

            <!--SEGUNDA LINHA... -->
            <div class="row text-left">
                <div class="col-md-4">
                    <span>Razão Social:</span> 
                    <input type="text" name="cliente.nomeRazao" size="50" maxlength="50" id="nomeRazao" class="form-control" value="${cliente.nomeRazao}" /><br />
                    <ebf:validationMessage name="cliente.nomeRazao" />
                </div>
                <div class="col-md-4">
                    <span>Nome Fantasia:</span> 
                    <input type="text" name="cliente.nomeFantasia" size="40" maxlength="40" id="nomeFantasia" class="form-control" value="${cliente.nomeFantasia}" /><br />
                    <ebf:validationMessage name="cliente.nomeFantasia" />
                </div>
                <div class="col-md-4"></div>
            </div>
            <br />

            <!--TERCEIRA LINHA... -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>CNPJ:</span> 
                    <input onkeypress="mask(maskCnpj, this, event);" type="text" name="cliente.cnpj" size="20" maxlength="20" id="cnpj" class="form-control" value="${cliente.cnpj}" /><br />
                    <ebf:validationMessage name="cliente.cnpj" />
                </div>
                <div class="col-md-2">
                    <span>Inscr.Estadual:</span>
                    <input onkeypress="mask(maskIe, this, event);" type="text" name="cliente.inscEst" size="20" maxlength="20" id="inscEst" class="form-control" value="${cliente.inscEst}" /><br />
                    <ebf:validationMessage name="cliente.inscEst" />
                </div>
                <div class="col-md-2">
                    <span>CPF:</span>
                    <input onkeypress="mask(maskCpf, this, event);" type="text" name="cliente.cpf" size="14" maxlength="14" id="cpf" class="form-control" value="${cliente.cpf}" /><br />
                    <ebf:validationMessage name="cliente.cpf" />
                </div>

                <div class="col-md-2">
                    <span>RG:</span> 
                    <input onkeypress="mask(maskRg, this, event);" type="text" name="cliente.rg" size="15" maxlength="15" id="rg" class="form-control" value="${cliente.rg}" /><br />
                    <ebf:validationMessage name="cliente.rg" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

            <!--QUARTA LINHA... -->
            <div class="row text-left">
                <div class="col-md-5">
                    <span>Endereço:</span>
                    <input type="text" name="cliente.endRua" size="100" maxlength="100" id="endRua" class="form-control" value="${cliente.endRua}" /><br />
                    <ebf:validationMessage name="cliente.endRua" />
                </div>
                <div class="col-md-1">
                    <span>Número:</span>
                    <input type="text" name="cliente.endNum" size="10" maxlength="10" id="endNum" class="form-control" value="${cliente.endNum}" /><br />
                    <ebf:validationMessage name="cliente.endNum" />
                </div>

                <div class="col-md-2">
                    <span>Complemento:</span> 
                    <input type="text" name="cliente.endCompl" size="50" maxlength="50" id="endCompl" class="form-control" value="${cliente.endCompl}" /><br />
                    <ebf:validationMessage name="cliente.endCompl" />
                </div>
                <div class="col-md-5"></div>
            </div>
            <br />

            <!--QUINTA LINHA... -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>Bairro:</span> 
                    <input type="text" name="cliente.endBair" size="50" maxlength="50" id="endBair" class="form-control" value="${cliente.endBair}" /><br />
                    <ebf:validationMessage name="cliente.endBair" />
                </div>

                <div class="col-md-1">
                    <span>Ident.Cidade:</span> 
                    <input type="text" name="cliente.identCid" size="7" maxlength="7" id="identCid" class="form-control" value="${cliente.identCid}" /><br />
                    <ebf:validationMessage name="cliente.identCid" />
                </div>

                <div class="col-md-3">
                    <span>Cidade:</span> 
                    <select name="cliente.endCid" id="endCid" class="form-control" data-select="slCidadeNome" data-url="slCidade_Json_01"></select>
                    <ebf:validationMessage name="cliente.endCid" />
                </div>

                <div class="col-md-1">
                    <span>UF:</span> 
                    <select name="cliente.endEst" id="endEst" class="form-control" data-select="slEstadoSigla" data-url="slEstado_Json_01"></select>
                    <ebf:validationMessage name="cliente.endEst" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

            <!--SEXTA LINHA... -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>CEP:</span>
                    <input onkeypress="mask(maskCep, this, event);" type="text" name="cliente.endCep" size="10" maxlength="10" id="endCep" class="form-control" value="${cliente.endCep}" /><br />
                    <ebf:validationMessage name="cliente.endCep" />
                </div>

                <div class="col-md-3">
                    <span>Pais:</span>
                    <select name="cliente.endPais" id="endPais" class="form-control" data-select="slPais" data-url="slPais_Json_01"></select>
                    <ebf:validationMessage name="cliente.endPais" />
                </div>

                <div class="col-md-1">
                    <span>DDI:</span> 
                    <input type="text" name="cliente.endDDI" size="5" maxlength="5" id="endDDI" class="form-control" value="${cliente.endDDI}" /><br />
                    <ebf:validationMessage name="cliente.endDDI" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

            <!--SÉTIMA LINHA... -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>DDD:</span>
                    <input type="text" name="cliente.endDDD" size="4" maxlength="2" id="endDDD" class="form-control" value="${cliente.endDDD}" /><br />
                    <ebf:validationMessage name="cliente.endDDD" />
                </div>
                <div class="col-md-2">
                    <span>Telefone:</span> 
                    <input onkeypress="mask(maskTelefone, this, event);" type="text" name="cliente.endTel" size="50" maxlength="50" id="endTel" class="form-control" value="${cliente.endTel}" /><br />
                    <ebf:validationMessage name="cliente.endTel" />
                </div>

                <div class="col-md-2">
                    <span>Tel. Fax:</span>
                    <input onkeypress="mask(maskTelefone, this, event);" type="text" name="cliente.endFax" size="50" maxlength="50" id="endFax" class="form-control" value="${cliente.endFax}" /><br />
                    <ebf:validationMessage name="cliente.endFax" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

            <!--OITAVA LINHA... -->
            <div class="row text-left">
                <div class="col-md-8">
                    <span>Email:</span> 
                    <textarea name="cliente.endEmail" id="endEmail" rows="2" cols="100" maxlength="800" class="form-control" >${cliente.endEmail}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.endEmail" />
                </div>
                <div class="col-md-8"></div>
            </div>
            <br />
              </div>
<!--        FIM DOS DADOS PRINCIPAIS -->              



<!--        DADOS DE ENTREGA, SEGUNDA "ABA" -->

        <!-- PRIMEIRA LINHA -->
        <div id="tabs-2">
            <div class="row text-left">
                <div class="col-md-5">
                    <span>Endereço Entr.:</span> 
                    <input type="text" name="cliente.endEntgRua" size="100" maxlength="100" id="endEntgRua" class="form-control" value="${cliente.endEntgRua}" /><br />
                    <ebf:validationMessage name="cliente.endEntgRua" />
                </div>
                <div class="col-md-1">
                    <span>Nro.Entr.:</span> 
                    <input type="text" name="cliente.endEntgNum" size="10" maxlength="10" id="endEntgNum" class="form-control" value="${cliente.endEntgNum}" /><br />
                    <ebf:validationMessage name="cliente.endEntgNum" />
                </div>
                <div class="col-md-2">
                    <span>Compl.Entr.:</span> 
                    <input type="text" name="cliente.endEntgCompl" size="50" maxlength="50" id="endEntgCompl" class="form-control" value="${cliente.endEntgCompl}" /><br />
                    <ebf:validationMessage name="cliente.endEntgCompl" />
                </div>
                <div class="col-md-5"></div>
            </div>
            <br />

            <!-- SEGUNDA LINHA -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>Bairro Entr.:</span> 
                    <input type="text" name="cliente.endEntgBair" size="50" maxlength="50" id="endEntgBair" class="form-control" value="${cliente.endEntgBair}" /><br />
                    <ebf:validationMessage name="cliente.endEntgBair" />
                </div>

                <div class="col-md-1">
                    <span>Ident.Cid.Entr.:</span> 
                    <input type="text" name="cliente.identEntgCid" size="7" maxlength="7" id="identEntgCid" class="form-control" value="${cliente.identEntgCid}" /><br />
                    <ebf:validationMessage name="cliente.identEntgCid" />
                </div>

                <div class="col-md-3">
                    <span>Cidade Entr.:</span> 
                    <select name="cliente.endEntgCid" id="endEntgCid" class="form-control" data-select="slCidadeNome" data-url="slCidade_Json_01"></select>
                    <ebf:validationMessage name="cliente.endEntgCid" />
                </div>

                <div class="col-md-1">
                    <span>UF Entr.:</span>
                    <select name="cliente.endEntgEst" id="endEntgEst" class="form-control" data-select="slEstadoSigla" data-url="slEstado_Json_01"></select>
                    <ebf:validationMessage name="cliente.endEntgEst" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

            <!-- TERCEIRA LINHA         -->
            <div class="row text-left">    
                <div class="col-md-2">
                    <span>CEP Entr.:</span>
                    <input onkeypress="mask(maskCep, this, event);" type="text" name="cliente.endEntgCep" size="10" maxlength="10" id="endEntgCep" class="form-control" value="${cliente.endEntgCep}" /><br />
                    <ebf:validationMessage name="cliente.endEntgCep" />
                </div>
                <div class="col-md-3">
                    <span>País Entr.:</span>
<%--                     <input type="text" name="cliente.endEntgPais" size="50" maxlength="50" id="endEntgPais" class="form-control" value="${cliente.endEntgPais}" /><br /> --%>
                    <select name="cliente.endEntgPais" id="endEntgPais" class="form-control" data-select="slPais" data-url="slPais_Json_01"></select>
                    <ebf:validationMessage name="cliente.endEntgPais" />
                </div>
                <div class="col-md-1">
                    <span>DDI Entr.:</span>
                    <input type="text" name="cliente.endEntgDDI" size="5" maxlength="5" id="endEntgDDI" class="form-control" value="${cliente.endEntgDDI}" /><br />
                    <ebf:validationMessage name="cliente.endEntgDDI" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

            <!-- QUARTA LINHA         -->
            <div class="row text-left">    
                <div class="col-md-1">
                    <span>DDD Entr.:</span>
                    <input type="text" name="cliente.endEntgDDD" size="5" maxlength="5" id="endEntgDDD" class="form-control" value="${cliente.endEntgDDD}" /><br />
                    <ebf:validationMessage name="cliente.endEntgDDD" />
                </div>
                <div class="col-md-2">
                    <span>Tel.Entr.:</span>
                    <input onkeypress="mask(maskTelefone, this, event);" type="text" name="cliente.endEntgTel" size="50" maxlength="50" id="endEntgTel" class="form-control" value="${cliente.endEntgTel}" /><br />
                    <ebf:validationMessage name="cliente.endEntgTel" />
                </div>
                <div class="col-md-2">
                    <span>Fax Entr.:</span>
                    <input onkeypress="mask(maskTelefone, this, event);" type="text" name="cliente.endEntgFax" size="50" maxlength="50" id="endEntgFax" class="form-control" value="${cliente.endEntgFax}" /><br />
                    <ebf:validationMessage name="cliente.endEntgFax" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

            <!-- QUINTA LINHA         -->
            <div class="row text-left">    
                <div class="col-md-8">
                    <span>Email Entr.:</span>
                    <textarea name="cliente.endEntgEmail" id="endEntgEmail" rows="2" cols="100" maxlength="800" class="form-control">${cliente.endEntgEmail}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.endEntgEmail" />
                </div>
                <div class="col-md-8"></div>
            </div>
            <br />
              </div>
<!--        FIM DOS DADOS DE ENTREGA, SEGUNDA "ABA"               -->



<!--        DADOS DE PAGAMENTO, TERCEIRA "ABA"               -->

<!--         PRIMEIRA LINHA -->
            <div id="tabs-3">
            <div class="row text-left">                
                <div class="col-md-5">
                    <span>End.Pagto:</span>
                    <input type="text" name="cliente.endPagRua" size="100" maxlength="100" id="endPagRua" class="form-control" value="${cliente.endPagRua}" /><br />
                    <ebf:validationMessage name="cliente.endPagRua" />
                </div>
                <div class="col-md-1">
                    <span>End.Nro.Pgto.:</span>
                    <input type="text" name="cliente.endPagNum" size="10" maxlength="10" id="endPagNum" class="form-control" value="${cliente.endPagNum}" /><br />
                    <ebf:validationMessage name="cliente.endPagNum" />
                </div>
                <div class="col-md-2">
                    <span>Compl.End.Pgto.:</span>
                    <input type="text" name="cliente.endPagCompl" size="50" maxlength="50" id="endPagCompl" class="form-control" value="${cliente.endPagCompl}" /><br />
                    <ebf:validationMessage name="cliente.endPagCompl" />
                </div>
                <div class="col-md-5"></div>
            </div>
            <br />

<!--         SEGUNDA LINHA -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>Bairro Pgto.:</span>
                    <input type="text" name="cliente.endPagBair" size="50" maxlength="50" id="endPagBair" class="form-control" value="${cliente.endPagBair}" /><br />
                    <ebf:validationMessage name="cliente.endPagBair" />
                </div>

                <div class="col-md-1">
                    <span>Ident.Cid.Pgto:</span> 
                    <input type="text" name="cliente.identPagCid" size="7" maxlength="7" id="identPagCid" class="form-control" value="${cliente.identPagCid}" /><br />
                    <ebf:validationMessage name="cliente.identPagCid" />
                </div>

                <div class="col-md-3">
                    <span>Cidade Pgto.:</span>
                    <select name="cliente.endPagCid" id="endPagCid" class="form-control" data-select="slCidadeNome" data-url="slCidade_Json_01"></select>
                    <ebf:validationMessage name="cliente.endPagCid" />
                </div>

                <div class="col-md-1">
                    <span>UF Pgto.:</span>
                    <select name="cliente.endPagEst" id="endPagEst" class="form-control" data-select="slEstadoSigla" data-url="slEstado_Json_01"></select>
                    <ebf:validationMessage name="cliente.endPagEst" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

<!--        TERCEIRA LINHA -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>CEP Pgto.:</span>
                    <input onkeypress="mask(maskCep, this, event);" type="text" name="cliente.endPagCep" size="10" maxlength="10" id="endPagCep" class="form-control" value="${cliente.endPagCep}" /><br />
                    <ebf:validationMessage name="cliente.endPagCep" />
                </div>

                <div class="col-md-3">
                    <span>País Pgto.:</span>
                    <select name="cliente.endPagPais" id="endPagPais" class="form-control" data-select="slPais" data-url="slPais_Json_01"></select>
                    <ebf:validationMessage name="cliente.endPagPais" />
                </div>

                <div class="col-md-1">
                    <span>DDI Pgto.:</span>
                    <input type="text" name="cliente.endPagDDI" size="5" maxlength="5" id="endPagDDI" class="form-control" value="${cliente.endPagDDI}" /><br />
                    <ebf:validationMessage name="cliente.endPagDDI" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

<!--        QUARTA LINHA -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>DDD Pgto.:</span>
                    <input type="text" name="cliente.endPagDDD" size="5" maxlength="5" id="endPagDDD" class="form-control" value="${cliente.endPagDDD}" /><br />
                    <ebf:validationMessage name="cliente.endPagDDD" />
                </div>
                <div class="col-md-2">
                    <span>Tel. Pgto.:</span> 
                    <input onkeypress="mask(maskTelefone, this, event);" type="text" name="cliente.endPagTel" size="50" maxlength="50" id="endPagTel" class="form-control" value="${cliente.endPagTel}" /><br />
                    <ebf:validationMessage name="cliente.endPagTel" />
                </div>
                <div class="col-md-2">
                    <span>Fax Pgto.:</span>
                    <input onkeypress="mask(maskTelefone, this, event);" type="text" name="cliente.endPagFax" size="50" maxlength="50" id="endPagFax" class="form-control" value="${cliente.endPagFax}" /><br />
                    <ebf:validationMessage name="cliente.endPagFax" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         QUINTA LINHA -->
            <div class="row text-left">
                <div class="col-md-8">
                    <span>Email Pgto.:</span>
                    <textarea name="cliente.endPagEmail" id="endPagEmail" rows="2" cols="100" maxlength="800" class="form-control">${cliente.endPagEmail}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.endPagEmail" />
                </div>
                <div class="col-md-8"></div>
            </div>
            <br />

<!--         SEXTA LINHA -->
            <div class="row text-left">
                <div class="col-md-3">
                    <span>Num.Cad.Repr.:</span>
                    <select name="cliente.numCadRepre" id="numCadRepre" class="form-control" data-select="slRepresentante" data-url="slRepresentante_Json_01"></select>
                    <ebf:validationMessage name="cliente.numCadRepre" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />
              </div>
 <!--        FIM DOS DADOS DE PAGAMENTO, TERCEIRA "ABA" -->


<!--         DADOS BANCÁRIOS, QUARTA "ABA" -->

<!--         PRIMEIRA LINHA -->
            <div id="tabs-4">              
            <div class="row text-left">
                <div class="col-md-1">
                    <span>Num.Banco:</span> 
                    <input type="text" name="cliente.numBanco" size="10" maxlength="10" id="numBanco" class="form-control" value="${cliente.numBanco}" /><br />
                    <ebf:validationMessage name="cliente.numBanco" />
                </div>
                    <div class="col-md-7">
                    <span>Nome Banco:</span>
                    <input type="text" name="cliente.nomeBanco" size="50" maxlength="50" id="nomeBanco" class="form-control" value="${cliente.nomeBanco}" /><br />
                    <ebf:validationMessage name="cliente.nomeBanco" />
                </div>
                <div class="col-md-4"></div>
            </div>
            <br />

<!--         SEGUNDA LINHA -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>Num.Agência:</span> 
                    <input type="text" name="cliente.numAgenciaBanco" size="10" maxlength="10" id="numAgenciaBanco" class="form-control" value="${cliente.numAgenciaBanco}" /><br />
                    <ebf:validationMessage name="cliente.numAgenciaBanco" />
                </div>
                <div class="col-md-1">
                    <span>Dig.Agência:</span> 
                    <input type="text" name="cliente.digAgenciaBanco" size="2" maxlength="2" id="digAgenciaBanco" class="form-control" value="${cliente.digAgenciaBanco}" /><br />
                    <ebf:validationMessage name="cliente.digAgenciaBanco" />
                </div>

                <div class="col-md-4">
                    <span>Nome Agência:</span> 
                    <input type="text" name="cliente.nomeAgenciaBanco" size="50" maxlength="50" id="nomeAgenciaBanco" class="form-control" value="${cliente.nomeAgenciaBanco}" /><br />
                    <ebf:validationMessage name="cliente.nomeAgenciaBanco" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         TERCEIRA LINHA -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>Nro.Conta:</span> 
                    <input type="text" name="cliente.numContaBanco" size="10" maxlength="10" id="numContaBanco" class="form-control" value="${cliente.numContaBanco}" /><br />
                    <ebf:validationMessage name="cliente.numContaBanco" />
                </div>
                <div class="col-md-1">
                    <span>Dig.Conta:</span> 
                    <input type="text" name="cliente.digContaBanco" size="2" maxlength="2" id="digContaBanco" class="form-control" value="${cliente.digContaBanco}" /><br />
                    <ebf:validationMessage name="cliente.digContaBanco" />
                </div>
                <div class="col-md-4">
                    <span>Titular:</span> 
                    <input type="text" name="cliente.titularCtaBanco" size="50" maxlength="50" id="titularCtaBanco" class="form-control" value="${cliente.titularCtaBanco}" /><br />
                    <ebf:validationMessage name="cliente.titularCtaBanco" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         QUARTA LINHA -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>Num. Suframa:</span> 
                    <input type="text" name="cliente.numSuframa" size="50" maxlength="50" id="numSuframa" class="form-control" value="${cliente.numSuframa}" /><br />
                    <ebf:validationMessage name="cliente.numSuframa" />
                </div>

<!--            CRIAR UM SELECT, BUSCANDO DADOS DA TABELA DE TIPO_CLIENTE  -->
                <div class="col-md-2">
                    <span>Tipo Cliente:</span>
                    <select name="cliente.tipoCli" id="tipoCli" class="form-control">
                        <option value="Autopeça">Autopeça</option>
                        <option value="Comercial Exportador">Comercial Exportador</option>
                        <option value="Fornecedor">Fornecedor</option>
                        <option value="Funcionario">Funcionario</option>
                        <option value="GrupoEBF"> GrupoEBF</option>
                        <option value="Moeda"> Moeda</option>
                        <option value="Motopeça"> Motopeça</option>
                        <option value="Motopeça Montadora"> Motopeça Montadora</option>
                        <option value="Representante"> Representante</option>
                        <option value="Sliter"> Sliter</option>
                        <option value="Sucata"> Sucata</option>
                        <option value="WEB"> WEB</option>
                    </select>
                    <ebf:validationMessage name="cliente.tipoCli" />
                </div>
                <div class="col-md-4">
                    <span>Pagamentos:</span> 
                    <input type="text" name="cliente.pagamentos" size="50" maxlength="50" id="pagamentos" class="form-control" value="${cliente.pagamentos}" /><br />
                    <ebf:validationMessage name="cliente.pagamentos" />
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

<!--         QUINTA LINHA -->
            <div class="row text-left">
                <div class="col-md-4">
                    <span>Vencimentos:</span> 
                    <input type="text" name="cliente.vencimentos" size="50" maxlength="50" id="vencimentos" class="form-control" value="${cliente.vencimentos}" /><br />
                    <ebf:validationMessage name="cliente.vencimentos" />
                </div>
                <div class="col-md-4">
                    <span>Restrição:</span> 
                    <input type="text" name="cliente.restricao" size="50" maxlength="50" id="restricao" class="form-control" value="${cliente.restricao}" /><br />
                    <ebf:validationMessage name="cliente.restricao" />
                </div>
                <div class="col-md-4"></div>
            </div>
            <br />

<!--         SEXTA LINHA -->
            <div class="row text-left">
            <div class="col-md-1">
                    <span>ZFM Alcom:</span> 
                    <select name="cliente.zfmAlcom" id="zfmAlcom" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.zfmAlcom" />
                </div>
                <div class="col-md-1">
                    <span>Teste:</span> 
                    <select name="cliente.teste" id="teste" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.teste" />
                </div>

<!--             CRIAR SELECT, BUSCANDO INFORMAÇÕES DA TABELA DE TRANSPORTADORAS  -->
                <div class="col-md-2">
                    <span>Num.Transp.:</span> 
                    <select name="cliente.numTransp" id="numTransp" class="form-control" data-select="slTrasportadora" data-url="slTransportadora_Json_01"></select>
                    <ebf:validationMessage name="cliente.numTransp" />
                </div>

                <div class="col-md-1">
                    <span>Calc.IPI:</span> 
                    <select name="cliente.calcIPI" id="calcIPI" class="form-control">
                        <option value="N">Não</option>
                        <option value="S">Sim</option>
                    </select>
                    <ebf:validationMessage name="cliente.calcIPI" />
                </div>
                <div class="col-md-1">
                    <span>Num.Msg.IPI:</span> 
                    <input type="text" name="cliente.numMsgIPI" size="7" maxlength="7" id="numMsgIPI" class="form-control" value="${cliente.numMsgIPI}" /><br />
                    <ebf:validationMessage name="cliente.numMsgIPI" />
                </div>

                <div class="col-md-1">
                    <span>Calc.ICM:</span> 
                    <select name="cliente.calcICM" id="calcICM" class="form-control">
                        <option value="N">Não</option>
                        <option value="S">Sim</option>
                    </select>
                    <ebf:validationMessage name="cliente.calcICM" />
                </div>

                <div class="col-md-1">
                    <span>Num.Msg.ICM:</span> 
                    <input type="text" name="cliente.numMsgICM" size="7" maxlength="7" id="numMsgICM" class="form-control" value="${cliente.numMsgICM}" /><br />
                    <ebf:validationMessage name="cliente.numMsgICM" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />                

<!--         SÉTIMA LINHA -->
            <div class="row text-left">
                <div class="col-md-4">
                    <span>Nome Cliente Bco.:</span> 
                    <input type="text" name="cliente.nomeClienteBanco" size="50" maxlength="50" id="nomeClienteBanco" class="form-control" value="${cliente.nomeClienteBanco}" /><br />
                    <ebf:validationMessage name="cliente.nomeClienteBanco" />
                </div>

                <div class="col-md-2">
                    <span>Fora semana:</span> 
                    <select name="cliente.foraSemana" id="foraSemana" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.foraSemana" />
                </div>

                <div class="col-md-1">
                    <span>Vencim.Esp.:</span> 
                    <select name="cliente.vencEspecifico" id="vencEspecifico" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.vencEspecifico" />
                </div>

                <div class="col-md-1">
                    <span>Dia semana:</span> 
                    <select name="cliente.diaSemana" id="diaSemana" class="form-control">
                        <option value="Seg">SEG</option>
                        <option value="Ter">TER</option>
                        <option value="Qua">QUA</option>
                        <option value="Qui">QUI</option>
                        <option value="Sex">SEX</option>
                    </select>
                    <ebf:validationMessage name="cliente.diaSemana" />
                </div>
                <div class="col-md-4"></div>
            </div>
            <br />

<!--         OITAVA LINHA -->
            <div class="row text-left">
                <div class="col-md-3">
                    <span>Num.Repr.ECO:</span>
                    <select name="cliente.numCadRepreEco" id="numCadRepreEco" class="form-control" data-select="slRepresentante" data-url="slRepresentante_Json_01"></select>
                    <ebf:validationMessage name="cliente.numCadRepreEco" />
                </div>

                <div class="col-md-3">
                    <span>Num.Repr.VAZLOG:</span>
                    <select name="cliente.numCadRepreVazLog" id="numCadRepreVazLog" class="form-control" data-select="slRepresentante" data-url="slRepresentante_Json_01"></select>
                    <ebf:validationMessage name="cliente.numCadRepreVazLog" />
                </div>

<!--            PEENCHER AUTOMATICAMENTE, COM O USUÁRIO QUE SALVOU/ALTEROU O CADASTRO DA ULTIMA VEZ ???   -->
<!--             COLUNA "QUEM ALTEROU"                 -->
                <div class="col-md-2">
                    <span>Sujeito Cartório:</span>
                    <select name="cliente.sujeitoCartorio" id="sujeitoCartorio" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.sujeitoCartorio" />                    
                </div>
                <div class="col-md-3"></div>
            </div>
            <br />

<!--         NONA LINHA                 -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>NF Ultima Fat.:</span>
                    <input type="text" name="cliente.notaUltFatura" size="11" maxlength="11" id="notaUltFatura" class="form-control" value="${cliente.notaUltFatura}" disabled/><br />
                    <ebf:validationMessage name="cliente.notaUltFatura" />
                </div>

                <div class="col-md-1">
                    <span>Série NF U.Fat.:</span>
                    <input type="text" name="cliente.serieNotaUltFatura" size="3" maxlength="3" id="serieNotaUltFatura" class="form-control" value="${cliente.serieNotaUltFatura}" disabled/><br />
                    <ebf:validationMessage name="cliente.serieNotaUltFatura" />
                </div>
                <div class="col-md-2">
                    <span>Data Ult.Fat.:</span>
                    <input type="date" name="cliente.dataUltFatura" id="dataUltFatura" class="form-control" value="${cliente.dataUltFatura}" disabled/><br />
                    <ebf:validationMessage name="cliente.dataUltFatura" />
                </div>

                <div class="col-md-1">
                    <span>Valor Ult.Fat.:</span>
                    <input type="text" name="cliente.valorUltFatura" id="valorUltFatura" class="form-control" value="${cliente.valorUltFatura}" disabled/><br />
                    <ebf:validationMessage name="cliente.valorUltFatura" />
                </div>
                <div class="col-md-1">
                    <span>Limite Créd.:</span>
                    <input type="text" name="cliente.limiteCredito" id="limiteCredito" class="form-control" value="${cliente.limiteCredito}" /><br />
                    <ebf:validationMessage name="cliente.limiteCredito" />
                </div>
                <div class="col-md-1">
                    <span>Valor em aberto:</span>
                    <input type="text" name="cliente.valorEmAberto" id="valorEmAberto" class="form-control" value="${cliente.valorEmAberto}" disabled /><br />
                    <ebf:validationMessage name="cliente.valorEmAberto" />
                </div>
                <div class="col-md-1">
                    <span>Saldo:</span>
                    <input type="text" name="cliente.saldo" id="saldo" class="form-control" value="${cliente.saldo}" disabled /><br />
                    <ebf:validationMessage name="cliente.saldo" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         DÉCIMA LINHA                 -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>Frete:</span>
                    <input type="text" name="cliente.frete" size="10" maxlength="10" id="frete" class="form-control" value="${cliente.frete}" /><br />
                    <ebf:validationMessage name="cliente.frete" />
                </div>
                <div class="col-md-1">
                    <span>Atividade:</span>
                    <input type="text" name="cliente.atividade" size="10" maxlength="10" id="atividade" class="form-control" value="${cliente.atividade}" /><br />
                    <ebf:validationMessage name="cliente.atividade" />
                </div>                
                <div class="col-md-1">
                    <span>Comissão fixa:</span>
                    <input type="text" name="cliente.comissaoFixa" id="comissaoFixa" class="form-control" value="${cliente.comissaoFixa}" /><br />
                    <ebf:validationMessage name="cliente.comissaoFixa" />
                </div>
                <div class="col-md-1">
                    <span>Limite Créd.Fixo:</span>
                    <input type="text" name="cliente.limiteCreditoFixo" id="limiteCreditoFixo" class="form-control" value="${cliente.limiteCreditoFixo}" /><br />
                    <ebf:validationMessage name="cliente.limiteCreditoFixo" />
                </div>
                <div class="col-md-2">
                    <span>Desc. 7% ICMS Sufr.:</span>
                    <select name="cliente.desc7IcmsSufr" id="desc7IcmsSufr" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>

                    <ebf:validationMessage name="cliente.desc7IcmsSufr" />
                </div>

                <div class="col-md-2">
                    <span>Isento ICMS Sub.Trib.:</span>
                    <select name="cliente.isentoIcmsSubsTrib" id="isentoIcmsSubsTrib" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.isentoIcmsSubsTrib" />
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         DÉCIMA PRIMEIRA LINHA -->
            <div class="row text-left">
                <div class="col-md-8">
                    <span>Obs.ICMS Sub.Trib.:</span>
                    <textarea name="cliente.observIcmsSubsTrib" id="observIcmsSubsTrib" rows="2" cols="100" maxlength="200" class="form-control" >${cliente.observIcmsSubsTrib}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.observIcmsSubsTrib"/>
                </div>
                <div class="col-md-8"></div>
            </div>
            <br />


<!--         DÉCIMA SEGUNDA LINHA -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>Tipo Entidade:</span>
                    <select name="cliente.tipoEntidade" id="tipoEntidade" class="form-control">
                        <option value="Fisica">Fisica</option>
                        <option value="Juridica">Juridica</option>
                    </select>
                    <ebf:validationMessage name="cliente.tipoEntidade"/>
                </div>

                <div class="col-md-1">
                    <span>R$ Ped.Abertos:</span>
                    <input type="text" name="cliente.vlrPedidosAbertos" id="vlrPedidosAbertos" class="form-control" value="${cliente.vlrPedidosAbertos}" disabled /><br />
                    <ebf:validationMessage name="cliente.vlrPedidosAbertos"/>
                </div>

                <div class="col-md-1">
                    <span>R$ Dupl.Abertas:</span>
                    <input type="text" name="cliente.vlrDuplicatasAbertas" id="vlrDuplicatasAbertas" class="form-control" value="${cliente.vlrDuplicatasAbertas}" disabled /><br />
                    <ebf:validationMessage name="cliente.vlrDuplicatasAbertas"/>
                </div>

                <div class="col-md-1">
                    <span>STS Protesto:</span>
                    <select name="cliente.stsProtesto" id="stsProtesto" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.stsProtesto" />                    
                </div>

                <div class="col-md-1">
                    <span>Calc.ICMS Subst.:</span>
                    <select name="cliente.calcICMSubst" id="calcICMSubst" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.calcICMSubst" />                    
                </div>

                <div class="col-md-1">
                    <span>Cód.País:</span>
                    <input type="text" name="cliente.codPais" size="7" maxlength="7" id="codPais" class="form-control" value="${cliente.codPais}" /><br />
                    <ebf:validationMessage name="cliente.codPais"/>
                </div>

                <div class="col-md-1">
                    <span>Bloq.Autom.:</span>
                    <select name="cliente.bloqAutomatico" id="bloqAutomatico" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.bloqAutomatico" />                    
                </div>
                <div class="col-md-2"></div>
            </div>
            <br />

<!--         DÉCIMA TERCEIRA LINHA -->
            <div class="row text-left">
                <div class="col-md-1">
                    <span>NCM Export.:</span>
                    <select name="cliente.ncmExportacao" id="ncmExportacao" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.ncmExportacao" />                    
                </div>

                <div class="col-md-1">
                    <span>Retorno:</span>
                    <select name="cliente.retorno" id="retorno" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.retorno" />                    
                </div>

                <div class="col-md-1">
                    <span>Cód.Interno:</span>
                    <input type="text" name="cliente.codigoInterno" size="5" maxlength="5" id="codigoInterno" class="form-control" value="${cliente.codigoInterno}" /><br />
                    <ebf:validationMessage name="cliente.codigoInterno"/>
                </div>

                <div class="col-md-1">
                    <span>Divisão:</span>
                    <input type="text" name="cliente.divisao" size="2" maxlength="2" id="divisao" class="form-control" value="${cliente.divisao}" /><br />
                    <ebf:validationMessage name="cliente.divisao"/>
                </div>

                <div class="col-md-1">
                    <span>CFOP:</span>
                    <input type="text" name="cliente.cfop" size="5" maxlength="5" id="cfop" class="form-control" value="${cliente.cfop}" /><br />
                    <ebf:validationMessage name="cliente.cfop"/>
                </div>

                <div class="col-md-1">
                    <span>Contrato:</span>
                    <select name="cliente.contrato" id="contrato" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.contrato" />                    
                </div>

                <div class="col-md-1">
                    <span>Comercial Bloq.:</span>
                    <select name="cliente.comercialBloq" id="comercialBloq" class="form-control">
                        <option value="N">Não</option>
                        <option value="S">Sim</option>
                    </select>
                    <ebf:validationMessage name="cliente.comercialBloq" />                    
                </div>

                <div class="col-md-1">
                    <span>Financeiro Bloq.:</span>
                    <select name="cliente.financeiroBloq" id="financeiroBloq" class="form-control">
                        <option value="N">Não</option>
                        <option value="S">Sim</option>
                    </select>
                    <ebf:validationMessage name="cliente.financeiroBloq" />                    
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         DÉCIMA QUARTA LINHA -->
            <div class="row text-left">
                <div class="col-md-8">
                    <span>Obs.Comercial:</span>
                    <textarea name="cliente.comercialObs" id="comercialObs" rows="2" cols="100" maxlength="200" class="form-control">${cliente.comercialObs}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.comercialObs" />                                
                </div>
                <div class="col-md-8"></div>
            </div>
            <br />

<!--         DÉCIMA QUINTA LINHA -->
            <div class="row text-left">            
                <div class="col-md-8">
                    <span>Email Packing List:</span>
                    <textarea name="cliente.emailPackingList" id="emailPackingList" rows="3" cols="100" maxlength="1500" class="form-control">${cliente.emailPackingList}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.emailPackingList" />                                
                </div>
                <div class="col-md-8"></div>
            </div>
            <br />

<!--         DÉCIMA SEXTA LINHA -->
            <div class="row text-left">            
                <div class="col-md-1">
                    <span>Verificado:</span>
                    <select name="cliente.verificado" id="verificado" class="form-control">
                        <option value="S">Sim</option>
                        <option value="N">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.verificado" />                    
                </div>

                <div class="col-md-2">
                    <span>Dt. Verificado:</span>
                    <input type="date" name="cliente.dataVerificado" id="dataVerificado" class="form-control" value="${cliente.dataVerificado}" /><br />
                    <ebf:validationMessage name="cliente.dataVerificado"/>
                </div>

                <div class="col-md-1">
                    <span>Potencial VAZCAP:</span>
                    <input type="text" name="cliente.potencialVazCap" id="potencialVazCap" class="form-control" value="${cliente.potencialVazCap}" /><br />
                    <ebf:validationMessage name="cliente.potencialVazCap"/>
                </div>

                <div class="col-md-1">
                    <span>Potencial VAZLOG:</span>
                    <input type="text" name="cliente.potencialVazLog" id="potencialVazLog" class="form-control" value="${cliente.potencialVazLog}" /><br />
                    <ebf:validationMessage name="cliente.potencialVazLog"/>
                </div>

                <div class="col-md-2">
                    <span>Potencial ECOPADS:</span>
                    <input type="text" name="cliente.potencialEcoPads" id="potencialEcoPads" class="form-control" value="${cliente.potencialEcoPads}" /><br />
                    <ebf:validationMessage name="cliente.potencialEcoPads"/>
                </div>

                <div class="col-md-1">
                    <span>Potencial ECO:</span>
                    <input type="text" name="cliente.potencialEco" id="potencialEco" class="form-control" value="${cliente.potencialEco}" /><br />
                    <ebf:validationMessage name="cliente.potencialEco"/>
                </div>
                <div class="col-md-1"></div>
            </div>
            <br />

<!--         DÉCIMA SÉTIMA LINHA -->
            <div class="row text-left">

                <div class="col-md-1">
                    <span>Potencial EBF:</span>
                    <input type="text" name="cliente.potencialEbf" id="potencialEbf" class="form-control" value="${cliente.potencialEbf}" /><br />
                    <ebf:validationMessage name="cliente.potencialEbf"/>
                </div>
                <div class="col-md-1">
                    <span>Ramal PRC:</span>
                    <input type="text" name="cliente.ramalPrc" size="5" maxlength="5"  id="ramalPrc" class="form-control" value="${cliente.ramalPrc}" /><br />
                    <ebf:validationMessage name="cliente.ramalPrc"/>
                </div>

                <div class="col-md-1">
                    <span>Descartado:</span>
                    <select name="cliente.descartado" id="descartado" class="form-control">
                        <option value="PRC">PRC</option>
                        <option value="COM">COM</option>
                    </select>
                    <ebf:validationMessage name="cliente.descartado"/>
                </div>

                <div class="col-md-2">
                    <span>Perfil:</span>
                    <select name="cliente.perfil" id="perfil" class="form-control">
                        <option value="COMPRA_DIRETO_DA_VAZ">COMPRA_DIRETO_DA_VAZ</option>
                        <option value="COMPRA_POR_DISTRIBUIDOR">COMPRA_POR_DISTRIBUIDOR</option>
                        <option value="COMPRA_POR_REPRESENTANTE">COMPRA_POR_REPRESENTANTE</option>
                        <option value="NAO_INFORMADO">NAO_INFORMADO</option>
                        <option value="NAO_VAI_MAIS_COMPRAR">NAO_VAI_MAIS_COMPRAR</option>
                    </select>
                    <ebf:validationMessage name="cliente.perfil"/>
                </div>
                <div class="col-md-1">
                    <span>Compra de:</span>
                    <input type="text" name="cliente.compraDe" size="7" maxlength="7"  id="compraDe" class="form-control" value="${cliente.compraDe}" /><br />
                    <ebf:validationMessage name="cliente.compraDe"/>
                </div>

                <div class="col-md-1">
                    <span>key Account:</span>
                    <select name="cliente.keyAccount" id="keyAccount" class="form-control">
                        <option value="SIM">Sim</option>
                        <option value="NÃO">Não</option>
                    </select>
                    <ebf:validationMessage name="cliente.keyAccount"/>
                </div>

                <div class="col-md-1"></div>
            </div>
            <br />

<!--         DÉCIMA OITAVA LINHA -->
            <div class="row text-left">
                <div class="col-md-8">
                    <span>Gestor Cliente:</span>
                    <textarea name="cliente.gestorCliente" id="gestorCliente" rows="2" cols="100" maxlength="100" class="form-control" >${cliente.gestorCliente}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.gestorCliente" />
                </div>                                
                <div class="col-md-8"></div>
            </div>
            <br />

<!--         DÉCIMA NONA LINHA -->
            <div class="row text-left">
                <div class="col-md-8">
                    <span>Observação:</span>
                    <textarea name="cliente.observ" id="observ" rows="2" cols="100" maxlength="200" class="form-control">${cliente.observ}</textarea>
<!--                     required="required" -->
                    <ebf:validationMessage name="cliente.observ" />
                </div>                                
                <div class="col-md-8"></div>
            </div>
            <br />

<!--         PREENCHER AUTOMATICAMENTE -->
<!--         VIGÉSIMA LINHA -->
            <div class="row text-left">
                <div class="col-md-2">
                    <span>Dt. alteração:</span>
                    <input type="date" name="cliente.dataAlteracao" id="dataAlteracao" class="form-control" value="${cliente.dataAlteracao}" disabled /><br />
                    <ebf:validationMessage name="cliente.dataAlteracao"/>
                </div>

<!--        PREENCHER AUTOMATICAMENTE             -->
                <div class="col-md-2">
                    <span>Usuário alteração:</span>
                    <input type="text" name="cliente.userAlteracao" id="userAlteracao" class="form-control" value="${cliente.userAlteracao}" disabled /><br />
                    <ebf:validationMessage name="cliente.userAlteracao"/>
                </div>
                <div class="col-md-2"></div>
            </div>


        </div> <!--     FECHAMENTO DA QUARTA ABA AQUI !!!!!! -->


            <br />
              </div> <!--        FECHAMENTO DA DIV DAS TABS AQUI !!!-->

        </div><!--                  FECHAMENTO DA DIV DO PAINEL AQUI !!! -->


            <br />
            <input type="submit" value="Cadastrar/Salvar" class="btn btn-primary"> <br /> <br />

            <div id="dialog" title="Lista clientes" style="overflow-x: hidden;">
                <table id="tabPesquisa"></table>
            </div>
    </form>

     <script type="text/javascript" src="<c:url value="/js/jlib/jlib.js"/>"></script>   
    <script type="text/javascript" src="<c:url value="/js/jlib/select.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/jlib/mask.js"/>"></script>

</body>
</html>

Alguma sugestão para os campos com o valor "chumbado", Matheus ?

Matheus... Alguém...

Descobri o código dentro do jlib.js, que está "matando" as tabs...

/****************************** CLASSES ******************************/
const CODE_DONE = 4;
const CODE_OK = 200;
class HttpService {

    static request(url, verb) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open(verb, url, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == CODE_DONE) {
                    if (xhr.status == CODE_OK) {
                        resolve(xhr.responseText);
                    } else {
                        reject(xhr.responseText);
                    }
                }
            }
            xhr.ontimeout = function() {
                console.error('A requisição excedeu o tempo limite');
            }
            xhr.send();
        });
    }
}

E ai pessoal, algum Instrutor / Moderador pode me ajudar... ?

Faz o seguinte, sobe o projeto e me manda, fica mais facil, ai se me fala uma tela que tem abas para eu dar uma olhada.

Atualizei o fonte Matheus => https://drive.google.com/drive/folders/0B1n2t9Tjxu9GckdsZEowUGRxT2s?usp=sharing

O form que possui a aba é o de cliente, ele está em => WEB-INF => jsp => cliente => formulario.jsp

Agora um form que possui select "chumbado", por exemplo é o estado => WEB-INF => jsp => estado => formulario.jsp

Obrigado !!!

Beleza, ja estou baixando para dar uma olhada e te devolvo ele.

Ewerton problema resolvido, vamos la:

1) Para trazer options selecionados com selects chumbados como você diz, basta adicionar no select os atributos data-select="sl" e data-url="sl", além do inputaux hidden. No seu caso ja tinha o input mas faltava os atributos no select.

2)As abas pararam de funcionar por causa de conflitos, porque na minha biblioteca eu utilizo $ para buscar elementos e você estava carregando as abas com o $ do jQuery:

$(function() {
    $( "#tabs" ).tabs();
  });

Para resolver o problema apenas troquei o $ para jQuery assim evitamos conflitos entre bibliotecas:

jQuery(function() {
    jQuery( "#tabs" ).tabs();
  });

Além desses problemas tive que fazer outros ajustes na biblioteca, todos os problema ocorreram porque você esta utilizando jQuery.

Segue projeto atualizado: https://mega.nz/#!Ww51ibzY!YoMYgrieSaiSRfavBAgxT02bYqCGO0ZGobN2gF4Uk2Q

A persistência dos select´s, com as informações fixas e as abas do formulario de cliente estão perfeitas Matheus !!!

Só as mascaras dos campos que param de funcionar...

Verifique se o arquivo js esta sendo importando, verifique se a função esta sendo chamada corretamente com o nome e parâmetros.

Verifique o console do navegador, pois é a melhor maneira de achar erros em arquivos js

Verifiquei a importação do js, estava OK... Verifiquei que a função estava sendo chamada corretamente, com os parâmetros no input... OK Verifiquei pelo console do browser um erro, e descobri que uma função do jlib.js estava comentada:

/** @auth Matheus Castiglioni
 *  Adicionando a função equals para comparar Strings de forma mais fácil */
Object.prototype.equals = function(string) {
    let s = '';
    for (let i = 0; i < this.length; i++) {
        s = s.concat(this[i]);
    }
    return s == string;
}

Descomentei-a e as máscaras funcionaram... Porém as abas do formulário do cliente "sumiram" novamente...

Isso esta acontecendo por causa do jQuery e jQueryUI eles não estão entendendo essa função equals que eu crio para os Object do navegador, para funcionar altere o if do mask.js onde eu utilizo a função equals:

// original
if (!mask.substring(position, position + 1).equals('#'))
                input.value += mask.charAt(position);

// alteração
if (mask.substring(position, position + 1) != '#')
                input.value += mask.charAt(position);

E mantenha o código do equals comentado, caso tenha mais lugares que utilizam a função equals também deverá ser necessário tira-la.

Alterei o mask... Comentei o Equals no jlib... As abas carregaram, mas F... as mascaras...

#0.0#0.0#0/0#0#0#0

Posta o código que você alterou

Eu estou fazendo alguns testes, conforme vc me orientou, abrindo o console do browser e verifiquei que ao abrir o formulario.jsp do cliente gera um erro no browser:

jquery-1.12.4.js:4952 Uncaught TypeError: handlers.push is not a function
    at Object.add (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:4952:14)
    at HTMLDivElement.<anonymous> (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:4832:16)
    at Function.each (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:370:19)
    at jQuery.fn.init.each (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:137:17)
    at on (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:4831:14)
    at jQuery.fn.init.on (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:5816:10)
    at Function.<anonymous> (http://localhost:8080/ebfvaz-admin/js/jquery-ui.js:622:13)
    at Function.each (http://localhost:8080/ebfvaz-admin/js/jquery-1.12.4.js:376:19)
    at $.(anonymous function).(anonymous function)._on (http://localhost:8080/ebfvaz-admin/js/jquery-ui.js:594:5)
    at $.(anonymous function).(anonymous function)._createWidget (http://localhost:8080/ebfvaz-admin/js/jquery-ui.js:319:9)

Estava fazendo os testes, pq eu selecionava um cliente na listagem e não transferia para o formulário, como as outras listagens...

Esse erro é porque você descomentou a parte do equals dentro do jlib.js:

Object.prototype.equals = function(string) {
    let s = '';
    for (let i = 0; i < this.length; i++) {
        s = s.concat(this[i]);
    }
    return s == string;
}

Esse trecho deve estar comentado para funcionar no seu projeto.

Eu comentei os trechos, no formulário:

 <!--  <script>    
    jQuery(function() {
        jQuery( "#tabs" ).tabs();
  });
</script> -->

E na jlib.js:

/****************************** OVERRIDE ******************************/
/** @auth Matheus Castiglioni
 *  Adicionando a função equals para comparar Strings de forma mais fácil  
Object.prototype.equals = function(string) {
    let s = '';
    for (let i = 0; i < this.length; i++) {
        s = s.concat(this[i]);
    }
    return s == string;
} */

Mas ai eu perco as máscaras... E mesmo assim, não carregou os campos quando eu selecionei os registros... Estou conferindo TODOS os campos de cliente no MODELO, FORMULÁRIO e LISTA...

Ewerton, muito estranho pois aqui na minha máquina funcionou corretamente, tente atualizar o navegador, tente utilizar o chrome e verifique novamente as mensagens de erro no console.

Ao digitar em um campo que contém a mascara verifique o console, deve estar dando algum erro.

Bom dia Matheus!! Cara revisei meu código, encontrei problemas em alguns campos... E no método atualiza, do ClienteDao... Corrigi e está tudo Ok... Agora preciso trabalhar em cima da tabela de clientes... Que possui muitos campos, e é muito grande... Mas isso está no outro post...

Muito obrigado pela ajuda !!! Um abraço e boa semana!!!

.....