Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Infra Comnet

Navegador não puxa informações enquanto o site CodePen puxa normalmente.

Por , em Javascript

Recommended Posts

Infra Comnet    0

Infra Comnet
Postado

Estou reaprendendo o javascript desde que entrei no novo trabalho, então estou criando um projetinho simples em html com javascript dentro do html, aí ok. Googleando umas coisas que preciso para associar aos poucos no meu projetinho, encontrei através do site CodePen.io um esboço feito por alguém, daí nele continha a função era o que eu precisava (preencher os campos que automaticamente puxa para o textarea, além de substituir as palavras) , daí peguei as funções e botei no meu código-fonte de html, mas não funcionou em qualquer navegador e achei estranho. acrescentei a linha de script que chama o tal jquery do esboço de onde encontrei, testei e nada. Daí criei meu usuário no CodePen.io, joguei os códigos nele, testei e funcionou... aí achei estranho se funciona no CodePen.io e não funciona nos navegadores.

Então vou explicar o que acontece: Pelo CodePen.io (acesse neste link com os códigos que fiz: https://codepen.io/InfraComnet/pen/JQbrMV ), o campo Código quando digitado (que será substituído por select para selecionar em vez de digitar números) está puxando conteúdo para a textarea e está ok, e os campos nome e técnico digitados estão substituindo normal. Agora nos navegadores, mesmo digitando nos campos, nada aparece no textarea.

Um detalhe: como falei antes que estou reaprendendo o javascript, então o jquery é uma coisa nova para mim (não conheço quase nada de jquery, por isso que cacei as funções prontas e pede o src de jquery para funcionar, daí é tenso), então para que as coisas funcionem, eu botei a linha de comando da script de jquery para que possa executar as tarefas funcionando igual ao que acontece no CodePen.io, mas não tá funcionando. Já o outro projetinho que montei, tb usa o jquery (mas diferente deste) e está funcionando. Não sei onde está o erro. E outra, estou usando o Notepad++ pra mim trabalhar nos códigos de html, css e, aos poucos, javascript.

Veja o código completo abaixo: 

<html>
<head><title>SCRIPT COLETA DE INFORMAÇÕES - TESTE</title></head>

<!-- Script com link de JQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var dados = [{"codigo": "1", "Nome": ["AVISO PADRÃO / XXXXXX / XXXXXXXX) NÃO CADASTRADO",
                                         "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) AUTORIZA CADASTRADO"]},
             {"codigo": "2", "Nome": ["LEMBRETE / XXXXXX / XXXXXXXX) AGENDADO",
                                         "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) VERIFICAR ORDEM DE SERVIÇO"]},
             {"codigo": "3", "Nome": ["REINCIDÊNCIA / XXXXXX / XXXXXXXX)",
                                         "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) PROBLEMA REINCIDENTE"]},
             {"codigo": "4", "Nome": ["REAGENDAMENTO / XXXXXX / XXXXXXXX)",
                                         "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) FEITO NOVO AGENDAMENTO"]},
            ];


$('input[name="codigo"]').change(function(){
  $('textarea[name="nome pessoal"]').val(pegaNome($(this).val()));
});

$('input[name="nome"]').change(function(){
  var nome = $(this).val();
  var text = $('textarea[name="nome pessoal"]').val();
  $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `));
});

$('input[name="tecnico"]').change(function(){
  var nome = $(this).val();
  var text = $('textarea[name="nome pessoal"]').val();
  $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX',` ${nome} `));
});

function pegaNome(cod){
  var nome  = "Não existe na lista"
  var nomes = "";
  
  $.each(dados, function(i, val){
    if (val.codigo == cod)
      {
        nome = val.Nome;
        $.each(nome, function(index, value){
          nomes += value + '\n\n';
        });  
      }  
  });
  return nomes;
}

String.prototype.replaceAll = function(searchStr, replaceStr) {
    var str = this;
    searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    return str.replace(new RegExp(searchStr, 'gi'), replaceStr);
};

</script>

<body>

<!-- Exibindo na página nos navegadores -->
<tr>
  <td>
    Código:<input type="text" name="codigo" size="5">
    Cliente: <input type="text" name="nome" size="28"></td></br>
    Técnico: <input type="text" name="tecnico" size="28"></br></br>
    <textarea name="nome pessoal" rows="10" cols="50"></textarea>
  </td>
</tr>

</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Ribeiro Imasters    1

Douglas Ribeiro Imasters
Postado

não precisa detalhar que esta aprendendo.

 

mas explica melhor qual o funcionamento do que esta fazendo. pois esta muito complicado entender o que deve acontecer.

 

localmente aqui o que vi foi que preenchendo o input cod com um numero ele pega valores do array dados e coloca no textearea, e ao ir no campo cliente e técnico e digitar nomes ele faz o replace dos dados nos devidos lugares que estão no textearea. o que não faz menor sentido uma aplicação fazer isso.

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Infra Comnet    0

Infra Comnet
Postado
15 horas atrás, Douglas Ribeiro Imasters disse:

não precisa detalhar que esta aprendendo.

 

mas explica melhor qual o funcionamento do que esta fazendo. pois esta muito complicado entender o que deve acontecer.

 

localmente aqui o que vi foi que preenchendo o input cod com um numero ele pega valores do array dados e coloca no textearea, e ao ir no campo cliente e técnico e digitar nomes ele faz o replace dos dados nos devidos lugares que estão no textearea. o que não faz menor sentido uma aplicação fazer isso.

 

Opa... sou meio ruim pra explicar, pq tenho deficiência auditiva e tenho dificuldade no meu português para fazer um bom sentido da frase, mas ok... então vamos lá.

É o seguinte: qdo botei o código no CodePen.io, funcionou normal de aparecer os resultados no textarea... mas quando coloco em um arquivo html, não funcionou, pq não puxa nada no textarea, ou seja, o textarea fica em branco, mesmo com os campos código e nomes preenchidos. É isso que eu precisava fazer funcionar no arquivo html usando o navegador, pois botando este arquivo na pasta para que todos abram pelo navegador e usar, né.

Não entendi a parte q você disse de "não faz o menor sentido uma aplicação fazer isso"? Afinal... a utilidade final disso que estou fazendo é uma vez preenchidos os campos, o usuário irá clicar no botão que selecionará e copiará tudo o que está no textarea para poder colar tudo prontinho e organizado, pois os funcionários de atendimento estão utilizando de forma primitiva: usa o bloco de notas com um monte de scripts prontas que eles ficam procurando até achar, dps preencher as coisas manualmente (pior, dá trabalho pra eles apagarem depois qdo for outro cliente), dps selecionar tudo e copiar, o que é um pouco mais demorado. Daí com a minha ideia, vai facilitar e agilizar muito a tarefa deles. Por isso que eu desenvolvi um outro arquivo html pronto que usa o select que mostra a lista de scripts para selecionar e basta clicar no botão que seleciona e copia. Só falta fazer a parte de preencher os campos pra preencher no textarea pra dps tentar incorporar ao arquivo existente.

Caso você queira, posso mandar o código de outro html (aquele que é: selecionou a script desejada, clicou no botão e pronto) que os funcionários estão recentemente utilizando (eles pararam de utilizar o bloco de notas dps disso, hehe).

Espero que me compreenda, hehehe. Paz e amor!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Remover formatação ao colar um texto em uma textarea
      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á.
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • ILR master
      Cronômetro regressivo php
      Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Danilo - Jesus voltará!
      Pegar class e id gerado dinamicamente em requisição ajax (javascript) e php
      Por Danilo - Jesus voltará!
      Olá pessoal, tenho uma div a qual através de um select categorias eu trago dados de empresas do banco, aí preciso clicar nas listagens das empresas e pegar o ID quando clica no checkbox e gravar pelo ajax novamente na session feita no arquivo php tipo um carrinho de compras, que essa parte já tenho... só não to conseguindo pegar os ids gerados dinamicamente no retorno feito do ajax, eles aparecem com F12 ao inspecionar, mas não aceita eu clicar para pegar o ID, acho que é algo de DOM, mas não to sabendo fazer... alguém aí saberia me ajudar como pegar esses ids ao clicar, já que eles vem dinamicamente?
       
      obrigado
    • joeythai
      combobox repetindo registros
      Por joeythai
      Boa tarde pessoal,
       
      eu criei uma página da qual tenho diversos checkbox para marcar, se tiver alguma caixinha marcada eu habilito um botão para fazer o envio ao servidor, porém, está acontecendo um problema que não consegui identificar, o que está acontecendo é o seguinte:
       
      Quando eu marco um checkbox apenas, o botão é liberado, eu clico nele e aparece um modal para preencher os dados, e nesse modal tem um combobox com opções criadas em javascript, como tem somente uma caixinha marcada as informações no combobox aparecem perfeitamente, porém, se eu marco 2 checkbox ou mais as opções do combobox se repetem, como se eu tivesse fazendo isso dentro de um looping, o que não é verdade, eis o codigo abaixo:
       
      <code>
        <!DOCTYPE html>    <html lang="en">  
         <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Document</title>   </head>  
        <body>   <input id="check-belongings" class="custom-control-input check-belongings" name="" type="checkbox" value="">   <label for="" class="custom-control-label"></label>   <div class="col-12">   <div class="md-form mt-0 mb-0 pt-0 pb-0">   <label for="reason">Motivo</label><br><br>  
        <select class="form-control md-select2" style="width: 100%; text-transform: uppercase"   id="reason_all_belongings" name="reason_all_belongings" required>   </select>   </div>   </div>
       
        <script>  
         $('.check-belongings').click(function () {    let belongingsIds = [];    let listaMarcados;  
         let optionsReason = [];   let option = null;  
        let movementsSelect = document.getElementById("reason_all_belongings");  
        optionsReason = ['Conferencia', 'Desobstrução', 'Entrega ao Cliente/Propr','  Inspeção', 'Manobra', 'Venda'  ];  
        optionsReason.forEach((reason) => {   option = new Option(reason, reason.toLowerCase());   movementsSelect.options[movementsSelect.options.length] = option;   });  
        listaMarcados = document.getElementsByClassName("check-belongings");   for (let loop = 0; loop < listaMarcados.length; loop++) {   var item = listaMarcados[loop];  
         if (item.type == "checkbox" && item.checked) {    $('.drop-all-belongings').removeAttr('disabled');    belongingsIds.push(item.value);    } else { // $('.drop-all-belongings').attr('disabled', 'disabled');   }   }   });   </script>   </body>  
        </html> </code>
×

Informação importante

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

  Aceito