Ir para conteúdo
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á.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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];
    }
}

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por ILR master
      Fala galera, tudo bem?
       
      Tenho o seguinte codigo:
       
       class Data {
      public static function ExibirTempoDecorrido($date)
      {
          if(empty($date))
          {
              return "Informe a data";
          }
          $periodos = array("segundo", "minuto", "hora", "dia", "semana", "mês", "ano", "década");
          $duracao = array("60","60","24","7","4.35","12","10");
          $agora = time();
          $unix_data = strtotime($date);
          // check validity of date
          if(empty($unix_data))
          {  
              return "Bad date";
          }
          // is it future date or past date
          if($agora > $unix_data) 
          {  
              $diferenca     = $agora - $unix_data;
              $tempo         = "atrás";
          } 
          else 
          {
              $diferenca     = $unix_data - $agora;
              $tempo         = "agora";
          }
          for($j = 0; $diferenca >= $duracao[$j] && $j < count($duracao)-1; $j++) 
          {
              $diferenca /= $duracao[$j];
          }
          $diferenca = round($diferenca);
          if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
          return "$diferenca $periodos[$j] {$tempo}";
      }
      }
       
      Funciona redondinho se o valor retornado for de algumas horas, mas...
      Quando passa de dois meses, ele retorna a palavra mess. Deve ser por conta dessa linha
      if($diferenca != 1) 
          {
              $periodos[$j].= "s";
          }
       
      Quero que modre:
       
      2 meses atrás
      e não
      2 mess atrás.
       
      Espero que tenham entendido.
       
      Valeu
    • Por Carlos Web Soluções Web
      Olá...
      Estou tentando fazer o seguinte !!
      Listando dados em tabela !!
      Gostaria que....se na listagem houver 4 linhas...indepedente de seu número de ID, faça a listagem em ID ser em ordem 1 2 3 4 !!
      Exemplo...se tiver uma listagem de dados que está em ID 1 3 3...faça ficar 1 2 3 !!

       
      echo "<table class='tabela_dados' border='1'> <tr> <td>ID</td> <td>Nome Empresa</td> <td>Responsável</td> <td>Telefone 1</td> <td>Telefone 2</td> <td>E-mail 1</td> <td>E-mail 2</td> <td>Endereço</td> <td>CEP</td> <td>Bairro</td> <td>AÇÃO 1</td> <td>AÇÃO 2</td> </tr> "; $sql = "SELECT ID FROM usuarios_dados WHERE Usuario='$usuario'"; $result = $conn->query($sql); $num_rows = $result->num_rows; $Novo_ID = 1; for ($i = 0; $i < $num_rows; $i++) { $registro = $result -> fetch_row(); $sql2 = "UPDATE usuarios_dados SET ID='$Novo_ID' WHERE ID='$Novo_ID'"; $result2 = $conn->query($sql2); $Novo_ID++; } $sql = "SELECT * FROM usuarios_dados"; $result = $conn->query($sql); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { echo "<tr> <td>$row[ID]</td> <td>$row[Nome_Empresa]</td> <td>$row[Responsavel]</td> <td>$row[Telefone_1]</td> <td>$row[Telefone_2]</td> <td>$row[Email_1]</td> <td>$row[Email_2]</td> <td>$row[Endereço]</td> <td>$row[CEP]</td> <td>$row[Bairro]</td> <td> <form method='post' action='Editar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='EDITAR'> </form> </td> <td> <form method='post' action='Deletar_Dados.php'> <input type='hidden' name='usuario' value='$usuario'> <input type='hidden' name='senha' value='$senha'> <input type='hidden' name='ID' value='$row[ID]'> <input type='submit' style='padding: 10px;' value='DELETAR'> </form> </td> </tr> "; } } else { echo "0 results"; } $conn->close();  
    • Por ILR master
      Boa tarde pessoal, tudo bem ?
       
      Eu uso o tinymce para cadastro de textos no meu siite, porém, quero fazer um sistema para que os colunistas possam fazer o próprio post.
      O problema do tinymce, é que ele mantém a formatação do texto copiado, como tamanho de fonts, negritos, etc... Quero que o usuário cole o texto e a própria textarea limpe a formatação para que ele formate como quiser.
       
      A pergunta é:
       
      O tinymce tem uma opção para desabilitar a formatação quando um texto é colocado?
      Tem alguma função via java ou php para retirar a formatação assim que o texto é colado?
      Ou é melhor usar um outro editor?
       
      Agradeço deste já.
    • Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.