Jump to content
Felipe Evangelista

Clonar Formulário com JQuery

Recommended Posts

Eu estou criando um formulário de cadastro, onde o cliente poderá cadastrar mais de um gato nesse formulário (É um hotel para gatos). O problema é que não sei bem a forma mais correta de fazer isso. Estive pensando em usar o JQuery para clonar os inputs de cadastro do gato, colocando um botão de "Adicionar Gato", mas pelo que eu vi na documentação, a função clone não copia todos os elementos para o clone, né? Quando eu copio, os botões não funcionam, alguns estilos também não, enfim, não dá certo rs. Então como eu posso fazer para clonar os inputs? Ou nesse caso, tem outra maneira melhor de fazer essa funcionalidade de poder cadastrar mais de um gato?

 

HTML

<div id="clone-form">
                                    <div id="clonedForm" class="cadastroGato" style="margin-top: 80px;">
                                        <h3>Dados do gato</h3>
                                        <hr style="margin-bottom: 70px;" class="hr-color2"/>
                                        <label>
                                            <input type="text" name="nome-gato[]" placeholder="Nome*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="apelido[]" placeholder="Apelidos*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" class="date" name="nascimento" placeholder="Data de nascimento*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="raca" placeholder="Raça*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="cor[]" placeholder="Cor*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <select name="sexo">
                                            <option class="selectClass" value="masc">Sexo*:</option>
                                            <option class="selectClass" value="masc">Masculino</option>
                                            <option class="selectClass" value="fem">Feminino</option>
                                        </select>
                                        <label>
                                            <input type="text" name="vacina[]" placeholder="Última vacinação*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="antirrabica[]" placeholder="Antirrábica*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <p><label>
                                            Vacinas em dia?<br>
                                            <input type="radio" name="vacinas" value="sim">Sim
                                            <input type="radio" name="vacinas" value="nao">Nao
                                        </label></p>
                                        <label onclick="alergiaQual()">
                                            Tem alguma doença ou alergia? 
                                            <input type="radio" name="alergia" value="sim">Sim
                                            <input type="radio" name="alergia" value="nao">Nao
                                        </label>
                                        <label id="qualAlergia" style="visibility: hidden;">
                                            <input type="text" name="qual[]" placeholder="Qual?" value=""/>            
                                        </label>
                                        <label class="register">
                                            Castrado?<br>
                                            <input type="radio" name="castrado" value="sim">Sim
                                            <input type="radio" name="castrado" value="nao">Nao
                                        </label>
                                        <label onclick="medicacao()">
                                            Toma alguma medicação?<br>
                                            <input type="radio" name="medicacao" value="sim">Sim
                                            <input type="radio" name="medicacao" value="nao">Nao
                                        </label>
                                        <label id="qualMedicacao" style="visibility: hidden;">
                                            <input type="text" name="med" placeholder="Qual?" value=""/>            
                                        </label>
                                            <br>
                                        <label onclick="alimentacao()">
                                            Necessita alimentação especial? <br>
                                            <input type="radio" name="alimentacao" value="sim">Sim
                                            <input type="radio" name="alimentacao" value="nao">Nao
                                        </label>
                                        <label id="qualAlimentacao" style="visibility: hidden;">
                                            <input type="text" name="med" placeholder="Qual?" value=""/>            
                                        </label>
                                            <br>
                                        <label onclick="fiv()">
                                            Já realizou teste para FIV e FELV? <br>
                                            <input type="radio" name="teste" value="sim">Sim
                                            <input type="radio" name="teste" value="nao">Nao
                                        </label>
                                        <label id="testeFiv" class="register" style="display: none;">
                                            <input type="radio" name="fiv" value="posfiv">Positivo para FIV
                                            <input type="radio" name="fiv" value="posfelv">Positivo para FELV
                                            <input type="radio" name="fiv" value="posambos">Positivo para ambos
                                            <input type="radio" name="fiv" value="negambos">Negativo para ambos
                                        </label>
                                        <label class="register">
                                            Já ficou em hotelzinho antes?
                                            <p><input type="radio" name="castrado" value="sim">Sim
                                            <input type="radio" name="castrado" value="nao">Nao</p>
                                        </label>

                                        <label class="message">
                                            <textarea name="temperamento[]" placeholder="Descreva o temperamento do seu gato (exemplo: tímido, assustado, carinhoso, agressivo, etc)*:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
                                        </label>
                                        <label class="message">
                                            <textarea name="mensagem[]" placeholder="Descreva a rotina do seu gato (o que gosta, não gosta, hábitos, etc)*:" 
                                             data-constraints='@Required @Length(min=20,max=999999)'></textarea>
                                        </label>  
                                            <button type="button" class="clonador">Adicionar Gato</button>
                                            <button type="submit">Enviar</button>
                                    </div>
                                </div>

JS:

$('.clonador').click(function(e){
    e.preventDefault();
    $('.cadastroGato').clone().appendTo($('#clone-form'));
});

 

Share this post


Link to post
Share on other sites

Olá.

 

Experimente usar este script:

$(document).on('click', '.clonador', function(e){
    e.preventDefault();
    $('.cadastroGato:first').clone().appendTo($('#clone-form'));
});

 

Share this post


Link to post
Share on other sites
22 minutos atrás, Eziquiel disse:

Olá.

 

Experimente usar este script:


$(document).on('click', '.clonador', function(e){
    e.preventDefault();
    $('.cadastroGato:first').clone().appendTo($('#clone-form'));
});

 

Tentei com esse script, mas o resultado foi o mesmo. Os campos são clonados, mas os botões ficam sem funcionalidade e alguns estilos não são clonados. Estou procurando outras formas também de fazer esse formulário.

Share this post


Link to post
Share on other sites

Sobre os estilos, eu meio que peguei o que acontece. Eu não participei do projeto de construção do site, então há coisas que eu nem sabia que tinham, mas resolvi. O problema agora é que quando eu clico em enviar, a validação dos dados só ocorre no formulario "original" e nos clonados não. Os dados dos formulários clonados também não são enviados. 

Eu pensei em tentar fazer algo parecido com o Infojobs, onde você cadastra suas experiências. Lá as suas experiências são colocadas pelo nome da empresa né e tal e quando você clica em adicionar aparece uma modal e você coloca os dados e aí a experiência que você colocou aparece lá também pelo nome. Mas é algo que eu ainda não sei como fazer.

Share this post


Link to post
Share on other sites

No exemplo que te mostrei eu não implementei nenhuma função pra botão enviar.

Note que botão de "Adicionar" cria um novo formulário mesmo quando clicando em um botão antes clonado.

Inicialmente só funcionava no primeiro botão. Agora, em qualquer botão Adicionar que clicar irá funcionar.

 

O problema é o seguinte: quando você cria elementos em tempo real, você precisa atribuir os eventos à eles de uma outra maneira. Quando você implementa o seguinte evento, só irá funcionar para os elementos que foram interpretados quando a página foi criada e carregada. 

$('.clonador').click(function(e){
    e.preventDefault();
    $('.cadastroGato').clone().appendTo($('#clone-form'));
});

Este código acima ira funcionar para o botão clonador, mas somente no primeiro, pois esse foi o único interpretado pelo DOM no carregamento do documento.

 

Agora vejamos este código abaixo. Ele irá fazer a mesma coisa que o código acima, só que agora o evento será atribuído também aos elementos criados dinamicamente (depois do carregamento).

$(document).on('click', '.clonador', function(e){
    e.preventDefault();
    $('.cadastroGato').clone().appendTo($('#clone-form'));
});

Aqui está o que tentei mostrar pra você. Use este método para implementar seus eventos para todos os elementos que forem clonados.

 

  • +1 1

Share this post


Link to post
Share on other sites

Ah sim, agora estou conseguindo entender o que você diz. Nunca fiz nenhum fomulário que precisasse desse tipo de funcionalidade, então estou bem perdido pra fazer isso haha pelo menos essa parte foi resolvida. Agora, pra que esses dados sejam armazenados corretamente no bd, eu tenho que fazer com que os names sejam arrays e sejam incrementados conforme o formulário é clonado, né? Tipo nome-gato[0] nome-gato[1] e assim por diante e no php usar de alguma forma o for each depois. Claro que duvidas de php não é nesse tópico, então eu sei que você não vai ficar falando sobre, mas só para me dar um norte rs

Share this post


Link to post
Share on other sites

Felipe,

 

Você provavelmente vai ter que mudar mais uma coisa importante: os nomes dos seus inputs.

 

Cada vez que você clona você precisa dar um número unico para os seus inputs, se não você não vai conseguir pegar o POST do lado do servidor corretamente.

 

Por exemplo:

<input type="text" name="vacina[]" 
<input type="text" name="antirrabica[]"

 

Vira:

<input type="text" name="formulario[0][vacina]" .../>

<input type="text" name="formulario[0][antirrabica]" .. />

 

Aí na hora do clonar o formulário, você tem que incrementar o ZERO antes se clonar:

<input type="text" name="formulario[1][vacina]" .../>

<input type="text" name="formulario[1][antirrabica]" .. />

 

E assim por diante:

<input type="text" name="formulario[2][vacina]" .../>

<input type="text" name="formulario[2][antirrabica]" .. />

 

Entendeu? Se você não numerar cada clone, depois você não vai conseguir resgatar as informações em ordem.

 

 

  • +1 1

Share this post


Link to post
Share on other sites

Como eu posso incrementar os names dos inputs? 

Tentei dessa forma e de outros jeitos, mas ainda não consegui:

for( i = 0; i = clone.length; i++){
        camposClonados[i].setAttribute("name", i);  
    }

"clone" é a div que está sendo clonada, camposClonados são os inputs que estão sendo clonados.

Share this post


Link to post
Share on other sites

Eu recomendo você a converter seu formulário pra uma string e então usar .replace() pra isso pra substituir todos os [0] que você encontrar:

 

var incrementor = 1;
var novoHtml = $('.cadastroGato:first').html().incrementor+']')
incrementor++

 

A lógica não tá completa, mas deu pra entender?

  • +1 1

Share this post


Link to post
Share on other sites

Veja este exemplo: http://codepen.io/Eziquiel/pen/dvEbWO?editors=1010

 

 

No html utilieze o index [0], exemplo:

<input type="text" name="formulario[0][nome]"        .../>
<input type="text" name="formulario[0][nascimento]"  ... />

 

No Javascript a ideia é a seguinte:

Após carregar o documento a variável elm_html armazenará uma cópia dos seus elementos que serão clonados futuramente.

Isso fará com que os elementos clonados futuramente não sejam clonados já preenchidos. E com isso você também terá um padrão de referência a ser substituído, que é o "[0]".

 

Na hora de clonar a variável "i" receberá a quantidade de clones pra saber qual o index do próximo. Daí a função replace faz seu brilhante papel. Dê uma estudada aí.

 

$(document).ready(function(){
  
      var elm_html = $('#clone-form').html();   //faz uma cópia dos elementos a serem clonados.

      $(document).on('click', '.clonador', function(e){
          e.preventDefault();
          var i = $('.cadastroGato').length;    //pega a quantidade de clones;
          var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  //substitui o valor dos index e incrementa++ para o próximo
          $('#clone-form').append(elementos);  //exibe o clone.
      });
  
  });

 

  • +1 1

Share this post


Link to post
Share on other sites

Exatamente o que eu tava precisando! Valeu mesmo! Eu até consegui uma forma de mudar os names, mas aí teria que colocar um por um, ia dar um #@?&#036;%~ trabalho! Mas ainda sigo com uma porrada de problemas hahaha 

Claro que vocês já me ajudaram demais, então se a paciência de vocês tiverem se esgotado, não tem problemas.

 

Mas, vamos lá

Os inputs clonados não estão pegando a mascara que eu coloquei pelo js. A mascara é colocada no input pelo class que se mantém o mesmo nos inputs clonados, então não entendi o porque de não funcionar. Outro problema é que como não estou nesse projeto desde o começo, muita coisa ainda não sei bem como está feito, por exemplo, vi esses dias que os placeholders são editados, tipo colocando uma div por cima dos inputs com o texto do placeholder com tamanho e cor editado, e assim que você clica no input essa div fica com display none e você escreve nos inputs normalmente. Nos inputs clonados, os placeholders aparecem normal, sem nenhuma edição. Eu devo clonar então a div que fica por cima né? Estou tentando aqui, mas tá um pouco complicado haha 

E estou tentando criar um botão para remover as divs clonadas, na id da div do formulario, também deixei como formulario[0]... e coloquei o botão para pegar a id do ultimo clone, mas não exclui. 

 

Realmente essa história de mais de um gato no formulário está me dando uma boooa dor de cabeça, então quem puder dar mais uma ajudinha a esse estagiário ferrado aqui, será bem-vindo hahahahaha

 

A parte do formulário a ser clonado ficou assim 

<div id="clone-form">
                                    <div id="formulario[0]cloonedForm" class="cadastroGato" style="margin-top: 70px;">
                                        <h3>Dados do gato</h3>
                                        <hr style="margin-bottom: 70px;" class="hr-color2"/>
                                        <label>
                                            <input type="text" name="formulario[0][nome-gato]" placeholder="Nome*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="formulario[0][apelido]" placeholder="Apelidos*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" class="date" name="formulario[0][nascimento]" placeholder="Data de nascimento*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="formulario[0][raca]" placeholder="Raça*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" name="formulario[0][cor]" placeholder="Cor*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <select name="formulario[0][sexo]">
                                            <option class="selectClass" value="masc">Sexo*:</option>
                                            <option class="selectClass" value="masc">Masculino</option>
                                            <option class="selectClass" value="fem">Feminino</option>
                                        </select>
                                        <label>
                                            <input type="text" class="date" name="formulario[0][vacina]" placeholder="Última vacinação*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label>
                                            <input type="text" class="date" name="formulario[0][antirrabica]" placeholder="Antirrábica*:" value=""
                                                    data-constraints="@Required"/>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <p><label>
                                            Vacinas em dia?<br>
                                            <input type="radio" name="formulario[0][vacinas]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][vacinas]" value="nao">Nao
                                        </label></p>
                                        <label onclick="alergiaQual()">
                                            Tem alguma doença ou alergia? 
                                            <input type="radio" name="formulario[0][alergia]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][alergia]" value="nao">Nao
                                        </label>
                                        <label id="qualAlergia" style="visibility: hidden;">
                                            <input type="text" name="formulario[0][qual]" placeholder="Qual?" value=""/>            
                                        </label>
                                        <label class="register">
                                            Castrado?<br />
                                            <input type="radio" name="formulario[0][castrado]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][castrado]" value="nao">Nao
                                        </label>
                                        <label onclick="medicacao()">
                                            Toma alguma medicação?<br>
                                            <input type="radio" name="formulario[0][medicacao]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][medicacao]" value="nao">Nao
                                        </label>
                                        <label id="qualMedicacao" style="visibility: hidden;">
                                            <input type="text" name=formulario[0]"[med]" placeholder="Qual?" value=""/>            
                                        </label>
                                            <br>
                                        <label onclick="alimentacao()">
                                            Necessita alimentação especial? <br>
                                            <input type="radio" name="formulario[0][alimentacao]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][alimentacao]" value="nao">Nao
                                        </label>
                                        <label id="qualAlimentacao" style="visibility: hidden;">
                                            <input type="text" name="formulario[0][alimentacao]" placeholder="Qual?" value=""/>            
                                        </label>
                                            <br>
                                        <label onclick="fiv()">
                                            Já realizou teste para FIV e FELV? <br>
                                            <input type="radio" name="formulario[0][teste]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][teste]" value="nao">Nao
                                        </label>
                                        <label id="testeFiv" class="register" style="display: none;">
                                            <input type="radio" name="formulario[0][fiv]" value="posfiv">Positivo para FIV
                                            <input type="radio" name="formulario[0][fiv]" value="posfelv">Positivo para FELV
                                            <input type="radio" name="formulario[0][fiv]" value="posambos">Positivo para ambos
                                            <input type="radio" name="formulario[0][fiv]" value="negambos">Negativo para ambos
                                        </label>
                                        <label class="register">
                                            Já ficou em hotelzinho antes?
                                            <p><input type="radio" name="formulario[0][hotelzinho]" value="sim" required>Sim
                                            <input type="radio" name="formulario[0][hotelzinho]" value="nao">Nao</p>
                                        </label>

                                        <label class="message">
                                            <textarea name="formulario[0][temperamento]" placeholder="Descreva o temperamento do seu gato (exemplo: tímido, assustado, carinhoso, agressivo, etc)*:" data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
                                            <span class="empty-message">*Campo obrigatório</span>
                                        </label>
                                        <label class="message">
                                            <textarea name="formulario[0][descricao]" placeholder="Descreva a rotina do seu gato (o que gosta, não gosta, hábitos, etc)*:" 
                                             data-constraints='@Required @Length(min=20,max=999999)' data-constraints="@Required"></textarea>
                                            <span class="empty-message">*Campo obrigatório</span>
                                    </div>

O js que clona e exclui, assim: 

$(document).ready(function(){
  
      var elm_html = $('#clone-form').html();  
      var remover = document.getElementById('remove');
      var i = $('.cadastroGato').length; 
      
      $(document).on('click', '.clonador', function(e){
          e.preventDefault();
          remover.style.display="inline-block"; 
             
          var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  
          $('#clone-form').append(elementos);
      });
      $('.remover').on('click', function(e) {
        e.preventDefault();
        $('#formulario[' + (i-1) + ']cloonedForm').remove();
        alert ('#formulario[' + (i-1) + ']cloonedForm'); //Coloquei esse alerta apenas para verificar se a função retonar o id correto, e retorna mesmo
      })
  
  });

E aqui as máscaras dos inputs, que fiz usando JQuery Mask Plugin

$(document).ready(function(){
  $('.rg').mask('00.000.000-0');
});
$(document).ready(function(){
  $('.cpf').mask('000.000.000-00');
});
$(document).ready(function(){
  $('.cep').mask('00000-000');
});
$(document).ready(function(){
  $('.res').mask('(00) 0000-0000');
});
$(document).ready(function(){
  $('.cel').mask('(00) 00000-0000');
});
$(document).ready(function(){
  $('.date').mask('00/00/0000');
});

 

E mais uma vez vou agradecer a quem está ajudando aí com toda a paciência, estão me ajudando demais aqui!

Share this post


Link to post
Share on other sites
Você vai ter que re-aplicar as máscaras toda vez que adicionar um campo novo.

Coloque todas suas máscaras dentro de uma função "aplicarMascaras()", e toda vez que clonar um campo novo, você deve aplicarMascaras() no campo.

Share this post


Link to post
Share on other sites

Tente usar assim. Apenas isso.

Não é legal criar varias funções "$(document).ready(function(){".

Crie apenas uma e coloque tudo dentro dela. 

 

$(document).ready(function(){

      

    var elm_html = $('#clone-form').html();  
    var remover = document.getElementById('remove');
    var i = $('.cadastroGato').length; 
    setMask();

    $(document).on('click', '.clonador', function(e){
      e.preventDefault();
      remover.style.display="inline-block"; 

      var elementos = elm_html.replace(/\[[0\]]\]/g, '['+i+++']');  
      $('#clone-form').append(elementos);
      setMask();
    });
    $('.remover').on('click', function(e) {
      e.preventDefault();
      $('#formulario[' + (i-1) + ']cloonedForm').remove();
      alert ('#formulario[' + (i-1) + ']cloonedForm'); //Coloquei esse alerta apenas para verificar se a função retonar o id correto, e retorna mesmo
    })
  
    function setMask(){
      $('.rg').mask('00.000.000-0');
      $('.cpf').mask('000.000.000-00');
      $('.cep').mask('00000-000');
      $('.res').mask('(00) 0000-0000');
      $('.cel').mask('(00) 00000-0000');
      $('.date').mask('00/00/0000');
    }
  
  });

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Adriano Costa
      Fala galera!!!
      Eu sou novo na programação e estou precisando de uma ajuda, estou tentando fazer um for dentro dos scriplets mas esta dando erro. É a parte do read do meu crud. Quando eu aço o for através da camada controller ele funciona, mas na pagina jsp ele da um erro.
       
      <%@ page language="java" contentType="text/html; charset=utf-8"
          pageEncoding="utf-8"%>
      <%@page import="model.JavaBeans"%>
      <%@page import="java.util.ArrayList"%>  
      <%
          ArrayList<JavaBeans> lista = (ArrayList<JavaBeans>)request.getAttribute("contatos");
          for (int i = 0; i < lista.size(); i++){
              out.print(lista.get(i).getIdlista());
          }
      %>
       
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>Lista de Tarefas</title>
      <link rel="stylesheet" href="css/styles.css">
      </head>
      <body>
          <div id= "login-container">
              <h1>Lista de Tarefas</h1>
              <table>
                  <thead>
                      <tr>
                          <th>Código</th>
                          <th>Titulo</th>
                          <th>Descrição</th>
                          <th>Data</th>
                          <th>Status</th>
                          <th>Prioridade</th>
                      </tr>
                  </thead>
                  <tbody>
                      
                  </tbody>
              </table>
              <form name="frmContato" action="listarTarefa">
                  
                  <input type="submit" value="Cadastrar" onclick="validar()">
              </form>
              
          </div>
          <script src="scripts/validador.js"></script>    
      </body>
      </html>
       
      E esse é o erro
       
      HTTP Status 500 – Internal Server Error
      Type Exception Report
      Message An exception occurred processing [/listaTarefas.jsp] at line [8]
      Description The server encountered an unexpected condition that prevented it from fulfilling the request.
      Exception
      org.apache.jasper.JasperException: An exception occurred processing [/listaTarefas.jsp] at line [8] 5: 6: <% 7: ArrayList<JavaBeans> lista = (ArrayList<JavaBeans>)request.getAttribute("contatos"); 8: for (int i = 0; i < lista.size(); i++){ 9: out.print(lista.get(i).getIdlista()); 10: } 11: %> Stacktrace: org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:611) org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:500) org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:378) org.apache.jasper.servlet.JspServlet.service(JspServlet.java:326) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) Root Cause
      java.lang.NullPointerException org.apache.jsp.listaTarefas_jsp._jspService(listaTarefas_jsp.java:126) org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:71) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:467) org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:378) org.apache.jasper.servlet.JspServlet.service(JspServlet.java:326) javax.servlet.http.HttpServlet.service(HttpServlet.java:733) org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53) Note A pilha de erros completa da causa principal está disponível nos logs do servidor.
       
       
      esse é o Medoto
       
      // Listar tarefa
              protected void tarefas(HttpServletRequest request, HttpServletResponse response)
                      throws ServletException, IOException {
                  //Criando um objeto que irá receber os dados do JavaBeans
                  ArrayList<JavaBeans> lista = dao.listarTarefa();
                  
                  request.setAttribute("tarefas", lista);
                  RequestDispatcher rd = request.getRequestDispatcher("listaTarefas.jsp");
                  rd.forward(request, response);
                  
                  //Teste de recebimento da lista
                  for(int i = 0; i<lista.size(); i++) {
                      System.out.println(lista.get(i).getIdcon());
                      System.out.println(lista.get(i).getTitulo());
                      System.out.println(lista.get(i).getDescricao());
                      System.out.println(lista.get(i).getData());
                      System.out.println(lista.get(i).getStatus());
                      System.out.println(lista.get(i).getPrioridade());
                  }
              }
          
    • By Leandro T.
      $.ajax({
             
           url: 'ajaxfile2.php?xis=<?php echo $PerguntasRow["pergunta_id"];?>&resx=<?php echo $_SESSION["respon"]; ?>', 
           type: 'POST',
           data: form_data2<?php echo $PerguntasRow["pergunta_id"];?>, 
           dataType: 'json',
           contentType: false,
           processData: false,
             
           success: function (data)  {  }
            }); 
               
              
      }
                       Pessoal, boa tarde! não estou conseguindo fazer o ajaxfile2.php receber os parâmetros deste ajax
       
       
    • By violin101
      Caros Amigos,
       
      saudações...
       
      Desculpa a recorrer ao auxílio dos amigos, mas estou com um pequeno problema que não estou conseguindo entender.
       
      A página inicial do meu Sistema tem um CAROUSEL com um SLIDER que deveria iniciar junto com a página. 
      INFELIZMENTE algumas vezes não inicia e para EXECUTAR o o Slider deve pressionar F5.
       
      Algumas vezes quando o Slider inicia depois de um período para o LOOP, não entendo isso.
       
      Abaixo o código do SLIDER.
      /*----------------------------------------*/ /* 01. Main Slider Ativação e Velocidade do Slide /* /* Como consigo resolver esse problema para o Slider INICIAR com um LOOP infinito /* sem ter que ficar atualizando a página ? /* /*----------------------------------------*/ $(".slider_active").owlCarousel({ loop: true, margin: 0, nav: true, autoplay: true, infinite: true, items: 1, autoplayTimeout: 10000, navText: ["<i class='fa fa-caret-left'></i>", "<i class='fa fa-caret-right'></i>"], dots: true, autoHeight: true, lazyLoad: true });  
      Grato,
       
      Cesar
    • By manolegal
      Boa tarde
      Tenho 5 campos do tipo select no meu formulário.  A seguir um dos campos.
      <div id="resp" class="form-group col-md-3" placeholder="Responsável" title="Pesquisar por Responsável"> <select class="form-control" id="resp" name="resp" placeholder="Responsável" title="Pesquisar por Responsável"> <option value="">Responsável</option> <?php $Sql = "SELECT ..."; $Resultado = ... while ($linha = @pg_fetch_array($Resultado)){. $id_responsavel_bd = $linha["id_responsavel"]; $nome_responsavel_bd = $linha["responsavel"]; if ($resp == $id_responsavel_bd){ echo "<option value='$id_responsavel_bd' selected = 'selected'>$nome_responsavel_bd</option>";} else{ echo "<option value='$id_responsavel_bd'>$nome_responsavel_bd</option>";} } ?> </select> </div> Tenho uma função jquery que ao selecionar qualquer um destes campos, faz uma requisição ajax para atualizar uma div do meu form.
      <script type="text/javascript"> $(document).ready(function(){ $('select').change(function(){ // Todos selects $('form').submit(function(){ var dados = $(this).serialize(); $.ajax({ type: "POST", url: 'arquivo_ajax.php', dataType: 'html', data: dados, }).done(function(data){ //console.log(data); $("#list").empty().html(data); }); return false; }); $("#meu_form").trigger('submit'); }); }); </script> Ao abrir o formulário e fazer a primeira seleção de algum campo do tipo select, é gerada uma solicitação ajax.
      O problema é que a cada nova seleção deste campo e de algum outro campo, ao invés de realizar UMA ÚNICA REQUISIÇÃO, está aumentando o número de requisições a cada nova ação.
      Como não tenho muitos conhecimentos em jquery/ajax em minha dúvida:
      - É normal ir aumentando o número de requisições?
      - Deveria sempre realizar apenas uma requisição (imagino que seja correto)?
      - Meu código está correto? Se não está, onde estou errando?
      Desde já agradeço pela colaboração.
       
       
    • By Person
      Estou fazendo um protótipo de e-commerce com aps clássico e sql server, na parte de administração, o usuário administrativo pode alterar o status do pedido,  para isso ele clica no botão de alterar na pagina principal e é redirecionado para um formulário onde tenho as options, para que ele mude o status, coloquei um botão para que ele passe os parâmetros  (id_pedido e id_status_pedido) para a pagina de manutenção, onde é feito o update e o envio de e-mail com as atualizações. Mas quero retirar esse botão e fazer com que, assim que eu clique em uma opção, ele altere, sem eu precisar ser redirecionado para a tela de manutenção, isso com o Ajax se possível.
       
      <body> <% call Abredb() cod = Request.QueryString("cod") evt = Request.QueryString("evt") if cod <> "" then cod = cint(cod) end if if ucase(evt) = "ALT" then sql = "exec SP_TR32_status_frm_SEL" 'Response.Write(sql) 'Response.End() set rs = dbWeb.execute(sql) estrato = rs("id_status_pedido") bot = "Alterar" end if %> <div class="container"> <div class="titulo">Formulario</div> <form action="manu_pedido.asp" method="post" enctype="multipart/form-data"> <div class="detalhes-formulario"> <div class="input-box"> <span class="detalhes">status</span> <select class="form-control" name = "status"> <% do while not rs.eof%> <option value="<%=rs("id_status_pedido")%>"><%=rs("descricao")%></option> <% rs.movenext loop rs.close set rs = nothing %> </select> </div> </div> <button><a href="/treinamento/Thau/mini_mercado/adm/manu_pedido.asp?evt=alt&cod="<%=cod%>"&estrato="<%rs("id_status_pedido")%> </form> </div> <br> </body> <%call Fechadb()%> </html> Abaixo está o código da minha pagina de manutenção, no qual acontece a alteração do status
      <% Function ZerosEsquerda(Num,tam) Dim Zero Num = Trim(Num) Zero = "" For i = Len(Num) To tam - 1 Zero = "0" & Zero Next ZerosEsquerda = Trim(Zero & Num) End Function byteCount = Request.TotalBytes RequestBin = Request.BinaryRead(byteCount) Set UploadRequest = CreateObject("Scripting.Dictionary") BuildUploadRequest RequestBin 'opc = request.QueryString("opc") 'if opc = "" then 'cod = UploadRequest.Item("hfcod").Item("Value") 'botao = UploadRequest.Item("botao").Item("Value") 'estrato = UploadRequest.Item("estrato").Item("Value") 'end if session.LCID = 1046 call Abredb() if botao = "Alterar" then ' ALTERANDO OS DADOS RECEBIDOS NA TABELA sql = "exec SP_TR32_pedido_UPD "&cod&", '"&estrato&"'" 'response.write sql 'response.end dbWeb.execute(sql) str_html = "" str_html = str_html & "<HTML><BODY BGCOLOR=#0000FF>" str_html = str_html & "<h1>produtos</h1>" sql ="SP_TR32_email__itens_sel "&cod&"" set rs = dbWeb.execute(sql) str_html = str_html & "<table>" str_html = str_html & "<thead>" str_html = str_html & " <tr>" str_html = str_html & "<th>Produtos</th>" str_html = str_html & "<th>quantidade</th>" str_html = str_html & " <th>Total</th>" str_html = str_html & "</tr>" str_html = str_html & " </thead>" str_html = str_html & "<tbody>" do while not rs.eof str_html = str_html & "<tr>" str_html = str_html & "<td >"&rs("produto")&"</td>" str_html = str_html & "<td >"&rs("quantidade")&"</td>" str_html = str_html & "<td >"&rs("total")&"</td>" str_html = str_html & "</tr>" rs.movenext loop rs.close set rs = nothing str_html = str_html & " </tbody>" str_html = str_html & "</table>" str_html = str_html & "</BODY></HTML>" sql = "SP_TR32_email_sel "&cod&"" set rs = dbWeb.execute(sql) if estrato<>"" then Set ObjMail = Server.CreateObject("Cdonts.Newmail") objMail.Subject = "Atualização de pedido" objMail.From = "Porto Dourado <contato@email.websupply.com.br>" objMail.To = "request("email")" objMail.BodyFormat = 0 objMail.MailFormat = 0 objMail.Body = "Olá"&" "&rs("nome")&" "&rs("sobrenome")&", </br> Houve uma atualização em seu pedido pedido: "&rs("id_pedido")&" </br> o status mudou para: "&rs("descricao")&" </br> endereço de entrega: "&rs("cep")&", "&rs("rua")&", "&rs("bairro")&", "&rs("numero")&", "&rs("cidade")&", "&rs("Uf")&" </br>Total pedido: "&rs("total_pedido")&" </br> "& str_html &" </br></br>"&" Atentamente,"&" </br> "&"Equipe Porto dourado"&" </br></br> "&"Para entrar em contato com a equipe de suporte, entre em contato com o email ou ligue para nossa central no numero " objMail.Send Set objMail = nothing envio = true %> <script> alert('email com alteração enviado com sucesso!'); </script> <% end if if estrato = 6 then sql = "exec SP_TR32_adm_data_envio_UPD "&cod&"" dbWeb.execute(sql) end if if estrato = 4 then sql = "exec SP_TR32_adm_data_entregue_UPD "&cod&"" dbWeb.execute(sql) end if %> <script> alert("Dados alterado com sucesso!") parent.location = "cst_pedido.asp" </script> <% end if %> <%call Fechadb()%>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.