Jump to content
fideles

Ids em array

Recommended Posts

Senhores, um dúvida e acho que vocês podem me ajudar a exclarecer ou mudar o codigo.

 

Tenho um formulario onde pode acrescentar varias linhas com javascript e com um botão para chamar a função e que funciona bacana, codigo abaixo;

<script type="text/javascript">
$(function () {

  $(".adicionarCampo").click(function () {
	novoCampo = $("tr.linhas:first").clone();
	novoCampo.find("input").val("");
	novoCampo.insertAfter("tr.linhas:last");
	removeCampo();
  });
});
</script>

Tenho uma função em javascript também que faz preencher alguns campos automaticamente com base em um select.

<script type="text/javascript">
	
	function update(cod_atividade){
		$.post("scripts/codigos_atividades.php", {cod_atividade:cod_atividade}, function(retorno){
			
			dados = retorno.split("/");
			$('#descricao').val(dados[0]);
			
			//alert(dados[0]);
			
		});
}
	
</script>

 

O problema é que nos input, nos nomes eu coloquei colchetes no final, uma vez que eu tenho um array para gravar tudo de uma vez no banco.

<input name="descricao[]" type="text" required="required" id="descricao" size="45" maxlength="255" readonly="readonly" />

So  que no script acima, ele direciona os inputs pelo ID, como o ID é unico, como que eu faço para ele reconher cada linha acrecentada conforme o 1º JS?

 

Ex: 

Cliquei na primeira linha, selecionei uma opção no select e preencheu o campo descrição

Ao adicionar uma segunda linha, como o id é unico, ele não preenche, acaba alterando a primeira linha novamente.

 

Alguém sugere algo que eu consiga ele identificar cada linha acrescentada e preenche o campo daquela respectiva linha?

 

Obrigado desde já.

 

 

Share this post


Link to post
Share on other sites

<div id="colocar_aqui"></div>

<button onclick="adicionarInput()">Novo Input</button>

<script>
    var contagemID = 0,
        maximoInput = 10, // Quantos podem ser adicionados?
        novoInput,
        novoButton,
        dataInput,
        removeInput,
        alvo = document.getElementById('colocar_aqui');

    function adicionarInput() {
        contagemID++;

        if (contagemID <= maximoInput) {
            // Criar novo input
            novoInput = document.createElement('input');
            novoInput.type = 'text';
            novoInput.name = 'descricao[]';
            novoInput.id = 'descricao_' + contagemID;
            alvo.appendChild(novoInput);

            // Remover input adicionado
            novoButton = document.createElement('button');
            novoButton.innerText = 'Remover';
            novoButton.setAttribute('data-input', novoInput.id);
            novoButton.addEventListener('click', removerInput, false);
            alvo.appendChild(novoButton);
        }
    }

    function removerInput(e) {
        dataInput = e.target;
        removeInput = document.getElementById((dataInput).dataset.input);
        removeInput.parentNode.removeChild(removeInput);
        dataInput.parentNode.removeChild(dataInput);
    }
</script>

 

#EDIT:

Veja que cada ID vai ser descricao_Numero_de_adição

Perceba também o uso do atributo data que você também pode usar para obter o elemento que queira atacar.

Pois foi esse o método que usei para saber qual item devo atacar com a função de remover.

 

 

Além do atributo data você pode usar um classificador e atingir diversos itens de uma só vez.

Qual informação será adicionada ao input, e quais os critérios para esse complemento não há como eu saber.

 

Seria de grande ajuda saber se existe algum critério para anexar valor a um elemento, e que valor seria esse.

Share this post


Link to post
Share on other sites

Olá Omar, obrigado por ajudar.

 

O script de adicionar e remover campo, este funciona perfeitamente.

 

O script abaixo também funciona, só não funciona quando eu acrescento mais linha, ele continua sempre na primeira linha.

<script type="text/javascript">
	
	function update(cod_atividade){
		$.post("scripts/codigos_atividades.php", {cod_atividade:cod_atividade}, function(retorno){
			
			dados = retorno.split("/");
			$('#descricao').val(dados[0]);
			
			//alert(dados[0]);
			
		});
}
	
</script>

 

E é nesta parte que eu me perco. Ao clica no botão para adicionar linha, a linha é adicionada, mais o script acima so identifica o ID da primeira linha e as demais não funciona.

Share this post


Link to post
Share on other sites

Lógico , que só o primeiro é alvo, justo porque um identificador é único não pode se repetir.

 

Por isso lhe mostrei uma função que irá criar um elemento em loop cada um com um id único.

Da mesma forma que mostrei como encontrar esse elemento no DOM.

 

Mas não só pelo #ID que podemos encontrar um elemento no documento, existem várias outras formas, e uma infinidade de abordagens diferentes, não importa se está no DOM pode ser encontrado.

 

Um método seria ao criar o elemento adicionar ao mesmo um classificador que poderá ser usado para localizar ele com mais facilidade.

Então um função poderá manipular esse(s) elemento(s). Vejamos isso na prática:

Spoiler

<div class="elemento_alvo">Alvo da função 1</div>
<div class="elemento_alvo">Alvo da função 2</div>
<div class="elemento_alvo">Alvo da função 3</div>
<div class="elemento_alvo">Alvo da função 4</div>
<div class="elemento_alvo">Alvo da função 5</div>
<div class="elemento_alvo">Alvo da função 6</div>

<button onclick="update();">Ativar Update</button>

<script>
    function update() {
        var retorno = 'Item 1/Item 2/Item 3/Item 4/Item 5',
            dados = retorno.split('/'),
            alvos = document.getElementsByClassName('elemento_alvo');
        for (var i = 0; i < alvos.length; i++) {
            alvos[i].innerText = dados[i];
        }
    }
</script>

 

 

Como o que vamos adicionar a cada elemento vem de um array dados, podemos saber seus índices com

dados[0], dados[1] etc..

Usando o método para localizar o classificador "elemento_avo" teremos um array da NodeList de todos

alvos[0], alvos[1] etc..

Bastando então executar um loop no array dos elementos podemos obter o índice da volta atual do loop através de uma variável que se alto incrementa a cada volta. 

 

Mas como nem tudo que reluz é ouro, problemas podem ocorrer se se a quantidade de itens no array dados for menor que o numero de elementos.

Para isso basta apenas conferir se exite algo para se manipular antes:

/*
for (var i = 0; i < alvos.length; i++) {
    alvos[i].innerText = dados[i];
}
*/
for (var i = 0; i < alvos.length; i++) {
    if (typeof dados[i] !== 'undefined' && dados[i] !== null) { // Adicionando esse checagem
        alvos[i].innerText = dados[i];
    }
}

 

 

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 rvamecca
      Eu tenho um servidor que roda os PHP da versão 5.6 até a 8.0 com vários sites. Utilizo a versão FPM só que pesquisei na internet inteira e não consegui fazer rodar os arquivos customizados php.ini/.user.ini nos diretórios dos domínios. Chequei via phpinfo() e não carrega o arquivo customizado de configuração.
       
      Alguém pode me dar um help?
       
      Servidor Ubuntu 18.04 com Apache e as versões PHP 5.6, 7.0, 7.2, 7.4, 8.0 em FPM
    • By JohnDann
      Galera, estou com um problema chato em um código HTML aqui.
      Toda vez que a página abre, o ADS só fica visível por poucos segundos,
      e logo desaparece.
      É um template free que eu peguei da internet.
      Podem me ajudar?
      Não consegui anexar o arquivo XML, então vou deixar o link aqui para vocês.
      https://testandoblog03a.blogspot.com
    • By violin101
      Caros amigos, saudações...
       
      Fiz várias pesquisa, mas não consegui entender como devo fazer corretamente.
       
      Tenho um Cadastro de Produto/Clientes/etc.
       
      Gostaria de após clicar no Button ADICIONAR ou GRAVAR, quero mostrar na tela a seguinte mensagem:
      msg:
      Aguarde Processando...
       
      obs.: em alguns sistema até parece uma MODAL, com barra de progresso.
       
      Para impedir que o usuário fica Clicando nos Buttons.
       
      Alguém poderia me auxiliar de como devo fazer isso ?
       
      Grato,
       
      Cesar
    • By alysson122010
      Galera estou começando a trabalhar com datatables porem tenho uma dificuldade pq tipo até 200 registros por pagina é aceitavel mas penso quando tiver 2000 registro carregar tudo numa pagina so da errado pq é muitos dados e pode travar tudo.
      Como posso fazer para listar com limite por pagina ou alguma maneira para poder colocar varios dados sem travar.
       
      estou usando assim:
      <script type="text/javascript">        $(document).ready(function() {             $('#example').DataTable({         "order": [[ 0, "desc" ]],         "language": {             "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Portuguese-Brasil.json"         }     });         } );        </script> <table id="example" class="table table-striped table-bordered" style="width:100%">         <thead>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </thead>         <tbody>             <tr>                 <td>Tiger Nixon</td>                 <td>System Architect</td>                 <td>Edinburgh</td>                 <td>61</td>                 <td>2011/04/25</td>                 <td>$320,800</td>             </tr>             <tr>                 <td>Garrett Winters</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>63</td>                 <td>2011/07/25</td>                 <td>$170,750</td>             </tr>             <tr>                 <td>Ashton Cox</td>                 <td>Junior Technical Author</td>                 <td>San Francisco</td>                 <td>66</td>                 <td>2009/01/12</td>                 <td>$86,000</td>             </tr>             <tr>                 <td>Cedric Kelly</td>                 <td>Senior Javascript Developer</td>                 <td>Edinburgh</td>                 <td>22</td>                 <td>2012/03/29</td>                 <td>$433,060</td>             </tr>             <tr>                 <td>Airi Satou</td>                 <td>Accountant</td>                 <td>Tokyo</td>                 <td>33</td>                 <td>2008/11/28</td>                 <td>$162,700</td>             </tr>             <tr>                 <td>Brielle Williamson</td>                 <td>Integration Specialist</td>                 <td>New York</td>                 <td>61</td>                 <td>2012/12/02</td>                 <td>$372,000</td>             </tr>             <tr>                 <td>Herrod Chandler</td>                 <td>Sales Assistant</td>                 <td>San Francisco</td>                 <td>59</td>                 <td>2012/08/06</td>                 <td>$137,500</td>             </tr>             <tr>                 <td>Rhona Davidson</td>                 <td>Integration Specialist</td>                 <td>Tokyo</td>                 <td>55</td>                 <td>2010/10/14</td>                 <td>$327,900</td>             </tr>             <tr>                 <td>Colleen Hurst</td>                 <td>Javascript Developer</td>                 <td>San Francisco</td>                 <td>39</td>                 <td>2009/09/15</td>                 <td>$205,500</td>             </tr>         </tbody>         <tfoot>             <tr>                 <th>Name</th>                 <th>Position</th>                 <th>Office</th>                 <th>Age</th>                 <th>Start date</th>                 <th>Salary</th>             </tr>         </tfoot>     </table> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>  
    • By AlexandrePrezzi
      Seguinte
      Tenho uma página chamada  "teste.php" nessa página tem um formulário com vários campos que o usuário usa para fazer um filtro dos campos a serem pesquisado...
       
      Ao clicar no Pesquisar (submit) ... o action da página faz a seguinte ação
       
      script type="text/javascript"> $(function($){ $('#meuFormulario').submit(function(){ var dados = jQuery(this).serialize(); jQuery.ajax({ type: "POST", url: "src/controller/request_teste.php", data: dados, cache: false, beforeSend: function() { $('#resultPesq').html("Carregando..."); }, success: function(e) { //window.alert(e); $('#resultPesq').html(e); }, error: function() { $('#resultPesq').html('Não foi encontrado dados!'); } }); return false; }); }); </script> O arquivo "request_teste.php", é quem recebe os dados do POST e faz o  tratamento desses dados....
       
      Ao final desse arquivo tem um  require_once 'result_teste.php' que vem a ser o arquivo onde irá mostrar o resultado da pesquisa.
       
      Nesse arquivo eu fiz uma páginação ao final do resultado.
       
      Entao primeiramente o link que estou acessando é 
       
      principal.php?link=teste.php  (abre a pagina com o formulário)
      ao clicar em pesquisar o link nao muda
       
      quando clico em página 2, é feito um refresh e a url fica principal.php?link=teste.php&pag=2
       
      O que acontece é que como a página faz um refresh eu perco todos dados do meu POST e tambem preciso clicar no botão pesquisar pra carregar os dado da página 2.
       
      Alguem sabe como ajustar isso ?

      Se precisarem de mais informações me avisem
       
       
       
×

Important Information

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