Jump to content

Search the Community

Showing results for tags 'JavaScript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Calendars

  • Comunidade iMasters

Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 2303 results

  1. Olá, gostaria de fazer o seguinte tenho um código que tem vários botões, que quando clicado redireciona a outra pagina de formulário, gostaria de deixar esses botões ao clicar mudasse pra cor vermelha por exemplo e quando eu clicasse novamente voltasse para cor normal dele e desse uma caixa de mensagem ! Em anexo as telas ! Tela sacola.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <fieldset class="formulario" style="padding: 5px"> <legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Botões --> <div class="input-field col s12"> <div class="linha1"> <button id="botao" data-numero="01"class="btn blue" style="width:120px; height:37px">01</button> <button id="botao" data-numero="02"class="btn blue" style="width:120px; height:37px">02</button> <button id="botao" data-numero="03"class="btn blue" style="width:120px; height:37px">03</button> <button id="botao" data-numero="04"class="btn blue" style="width:120px; height:37px">04</button> <button id="botao" data-numero="05"class="btn blue" style="width:120px; height:37px">05</button> </div> <div class="linha2"> <button id="botao" data-numero="06"class="btn blue" style="width:120px; height:37px">06</button> <button id="botao" data-numero="07"class="btn blue" style="width:120px; height:37px">07</button> <button id="botao" data-numero="08"class="btn blue" style="width:120px; height:37px">08</button> <button id="botao" data-numero="09"class="btn blue" style="width:120px; height:37px">09</button> <button id="botao" data-numero="10"class="btn blue" style="width:120px; height:37px">10</button> </div> <div class="linha3"> <button id="botao" data-numero="11"class="btn blue" style="width:120px; height:37px">11</button> <button id="botao" data-numero="12"class="btn blue" style="width:120px; height:37px">12</button> <button id="botao" data-numero="13"class="btn blue" style="width:120px; height:37px">13</button> <button id="botao" data-numero="14"class="btn blue" style="width:120px; height:37px">14</button> <button id="botao" data-numero="15"class="btn blue" style="width:120px; height:37px">15</button> </div> <div class="linha4"> <button id="botao" data-numero="16"class="btn blue" style="width:120px; height:37px">16</button> <button id="botao" data-numero="17"class="btn blue" style="width:120px; height:37px">17</button> <button id="botao" data-numero="18"class="btn blue" style="width:120px; height:37px">18</button> <button id="botao" data-numero="19"class="btn blue" style="width:120px; height:37px">19</button> <button id="botao" data-numero="20"class="btn blue" style="width:120px; height:37px">20</button> </div> </div> </fieldset> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; Tela emprestimo.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <form action="banco_de_dados/create.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 5px"> <legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Nome --> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input type="text" name="nome" id="nome" maxlength="40" required autofocus> <label for="nome">Nome</label> </div> <!-- Campo Telefone --> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input type="text" name="telefone" id="telefone" maxlength="13" required> <label for="telefone">Telefone</label> </div> <!-- Campo Cpf --> <div class="input-field col s12"> <i class="material-icons prefix">credit_card</i> <input type="text" name="cpf" id="cpf" maxlength="14" required> <label for="cpf"> CPF</label> </div> <!-- Campo Sacola --> <div class="input-field col s12"> <i class="material-icons prefix">mode_edit</i> <label>Numero da Sacola</label> <input type="text" value="<?php echo isset($_GET['numeroSacola']) ? $_GET['numeroSacola'] : null; ?>"> </div> <div class="input-field col s12"> <i class="material-icons prefix">timelapse</i> <select> <option value="" disabled selected>Período</option> <option value="1">Manhã</option> <option value="2">Tarde</option> <option value="3">Noite</option> </select> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="Empréstimo" class="btn blue"> <input type="submit"style="width:120px; height:37px" value="Devolução" class="btn red"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn lilac"> </div> </fieldset> </form> </div> <?php include_once 'includes/script.inc.php';?> Código javascript <!-- Arquivos Jquery e JavaScrip --> <script type="text/javascript" src="materialize/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="materialize/js/materialize.min.js"></script> <script type="text/javascript" src="materialize/js/jquery.mask.min"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script> <!-- Inicialização Jquery --> <script type="text/javascript"> $(document).ready(function(){ $('.sidenav').sidenav(); $('.dropdown-trigger').dropdown(); }); </script> <!-- Inicialização Jquery Mascaras --> <script type="text/javascript"> jQuery.noConflict(); jQuery(function($){ //$("#datanasc").mask("99/99/9999"); //$("#telefone").mask("(099)99999-9999"); $("#cpf").mask("999.999.999-99"); $("#cpfDono").mask("999.999.999-99"); }); document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('select'); var instances = M.FormSelect.init(elems, options); }); // Or with jQuery $(document).ready(function(){ $('select').formSelect(); }); </script> <script> //pega todos os botoes const botoes = document.querySelectorAll('#botao'); for (let i = 0; i < botoes.length; i++) { //escuta o evento de click em cada botao botoes[i].addEventListener('click', function (e) { //pega o numero do botao clicado const numeroSacola = this.dataset.numero; //redireciona para emprestimos.php passando o numero do botao window.location.href = `emprestimo.php?numeroSacola=${numeroSacola}`; }); } </script> </body> </html>
  2. Bom dia pessoal. Eu estava desenvolvendo um pequeno script que compara dois números e seleciona o maior deles, sendo eles uma variável pré-definida e o outro é um valor informado pelo usuário. A variável pré definida é atualizada com o valor máximo. Em um outro ponto do script esta variável é multiplicada por uma constante para se chegar a um resultado. Vejam as etapas de forma resumida (desconsiderando validação do número informado pelo usuário, entre outros pontos, para deixar o código mais simples): valorPreDefinido=0; function valorUsuario(valor){ valorPreDefinido=Math.max(valorPreDefinido,valor); } Em outra etapa do código tem a seguinte instrução (considerando a constante como seja 1000, por exemplo): valorReal=valorPreDefinido*1000; O script roda perfeitamente no computador, mas a execução interrompe quando está sendo executado no Chrome para Android (não testei em outros dispositivos móveis). Curiosamente, a interrupção não ocorre quando, em vez de se utilizar uma variável, se utiliza um array. Alguém já ouviu falar deste bug?
  3. Hukers

    Curso para full stack

    Olá pessoal, sou desenvolvedor Java a um tempo, porém essa linguagem não está mais me dando prazer para programar. Comecei a uns meses estudar JavaScript e curti muito, fiz a OmniStack da RocketSeat e realmente essa tecnologia é muito poderosa. Estou querendo agora partir para algum curso Full-Stack, para aprender o necessário para desenvolver com essas tecnologias, hoje saiu a inscrição para o GoStack da Rocket, porém o valor é muito expressivo.. Qual curso full-stack, que trabalhe com JavaScript (React, Vue, React-Native, NodeJS e por ai vai) vocês recomendam?
  4. Boa noite, estou tendo dificuldade para passar o valor da variavel cep do javascript para o php, onde irá ser trocado pelo valor do cep (01001000) Código; <?php $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://viacep.com.br/ws/01001000/json'); //trocar o valor 01001000 pela variavel do cep curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_FILETIME, true); $end = curl_exec($ch); $json = $end; $obj = json_decode($json); $txtcep_endereço = $obj->{'logradouro'}; $txtcep_bairro = $obj->{'bairro'}; $txtcep_cidade = $obj->{'localidade'}; $txtcep_estado = $obj->{'uf'}; curl_close($ch); ?> <html>  <head>   <title>Passar Variável PHP para Javascript</title>  </head>  <body>   <script type="text/javascript"> function consultar(){ <?php $msg = "Seja bem vindo ao site!"; $variavelphp = "<script>document.write(w)</script>";?> var cep = document.getElementById('txt_cep').value    var mensagem1 = "<?php echo $txtcep_endereço;?>"; var mensagem2 = "<?php echo $txtcep_bairro;?>"; var mensagem3 = "<?php echo $txtcep_cidade;?>"; var mensagem4 = "<?php echo $txtcep_estado;?>"; document.getElementById('txt_endereço').value = mensagem1; document.getElementById('txt_bairro').value = mensagem2; document.getElementById('txt_cidade').value = mensagem3; document.getElementById('txt_estado').value = mensagem4; }   </script> <?php $variavelphp = "<script>document.write(variaveljs)</script>"; echo $variavelphp; ?> <div class="col-md-6"> <div class="form-group row"> <label class="col-sm-3 col-form-label">CEP</label> <div class="col-sm-9"> <input id="txt_cep" name="txt_cep" required="" minlength="8" class="form-control" value="55" placeholder="00000-000"/> <BR> <button onclick="consultar(this)"class="btn btn-primary btn-sm">Puxar CEP</button> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label class="col-sm-3 col-form-label">Endereço</label> <div class="col-sm-9"> <input id="txt_endereço" name="txt_endereço" type="text" class="form-control card-title" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label class="col-sm-3 col-form-label">Bairro</label> <div class="col-sm-9"> <input id="txt_bairro" name="txt_bairro" type="text" class="form-control card-title" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group row"> <label class="col-sm-3 col-form-label">Cidade</label> <div class="col-sm-9"> <input id="txt_cidade" name="txt_cidade" type="text" class="form-control card-title" /> </div> </div> </div> <div class="col-md-6"> <div class="form-group row"> <label class="col-sm-3 col-form-label">Estado</label> <div class="col-sm-9"> <input id="txt_estado" name="txt_estado" type="text" class="form-control card-title" /> </div> </div> </div>  </body> </html>
  5. Overtron8000

    Ajuda com svg

    Criei um mini game com recursos svg gerados por javascript para estudar e queria adicionar uma condição da bolinha quando tocar o chão zerar o contador (seria como a posição cy do eixo da bolinha tocasse o chão no 265px) só que não consigo acessar ele para ativar essa condição tentei assim.. contador.innerHTML=numero+=1 if(balloon.cy==265){ numero=0; contador.innerHTML=numero; } }) https://codepen.io/regis404/pen/PMyYzv projeto completo ai
  6. como selecionar e clonar o valor secionado para um outro menu oculto com display: none;? Exemplo: Se eu selecionar julho no primeiro, também selecionar julho no segundo. Desde de já agradeço! <select id="ajuda-camara[]" > <option class"test" value="1">Janeiro</option> <option class"test" value="2">Fevereiro</option> <option class"test" value="3">Março</option> <option class"test" value="4">Abril</option> <option class"test" value="5">Maio</option> <option class"test" value="6">Junho</option> <option class"test" value="7">Julho</option> <option class"test" value="8">Agosto</option> <option class"test" value="9">Setembro</option> <option class"test" value="10">Outubro</option> <option class"test" value="11">Novembro</option> <option class"test" value="12">Dezembro</option> </select> <select id="ajuda-camarada2[]" style="display:none"> <option class"test" value="13">Janeiro</option> <option class"test" value="14">Fevereiro</option> <option class"test" value="15">Março</option> <option class"test" value="16">Abril</option> <option class"test" value="17">Maio</option> <option class"test" value="18">Junho</option> <option class"test" value="19">Julho</option> <option class"test" value="20">Agosto</option> <option class"test" value="21">Setembro</option> <option class"test" value="22">Outubro</option> <option class"test" value="23">Novembro</option> <option class"test" value="24">Dezembro</option> </select>
  7. Olá pessoal, todos bem? espero que sim ... Sou iniciante em JavaScript, e estou me preparando para iniciar um curso de Desenvolvimento Web Full Stack. Acabei me daparando com algumas dificuldades com funções com o laço FOR, a minha dúvida foi em dois exercicios. Espero que possa contar com a ajuda de vocês na solução dos exercicios, e se possivel, até mesmo apontar onde eu estou errando, para que eu posso melhorar nesses pontos. Segue o primeiro Exercicio Segue o segundo exercicio: Me desculpem qualquer coisa, e desde já, obrigado pela ajuda de todos!
  8. CharlieAldrin

    Conferir se o usuário ainda está na página

    Estou tentando fazer um chat, e nele é necessário saber se um usuário continua na página do chat, para caso ele saia informar o outro usuário. Encontrei em alguns lugares como solução fazer um ajax conferindo se o usuário está "dando sinal de vida" de 10 em 10 segundos (por exemplo), porém não entendi como fazer isso e nem como colocar no código. Alguém pode me ajudar por favor? Ou me informar se existe alguma forma melhor de conferir isso? Valeu desde já :)
  9. Victor Penna

    Como configurar um dropzone?

    Bom dia pessoal, estou precisando de uma força de vocês quanto ao recurso dropzone, o que ainda estou aprendendo a trabalhar com ele. A principio, estou precisando configura-lo no projeto da empresa, porém não estou conseguindo fazer corretamente uma zona especifica de upload na pagina do projeto. Usamos o framework Phlacon e estamos atualizando os recursos do projeto. Ja li a documentação do projeto e pesquisei no wiki do projeto(gitlab), mas até o momento ainda não entendi muita da configuração, espero que possam me ajudar a alcançar o meu objetivo. Preciso criar uma div, que seja a dropzone e nela consiga gerar um arrays dos caminhos já inseridos pelo input, para assim tratar no controller e salva-los no banco de dados. Atualmente o meu código está assim: phtml: <div class="row"> <div class="col-sm-12"> <div class="dropzone" id="dropEmp" > <?= $form->render("dsPath") ?> </div> </div> </div> Javascript: Dropzone.options.dropEmp = { // Prevents Dropzone from uploading dropped files immediately autoProcessQueue: false, uploadMultiple: true, parallelUploads: 100, maxFiles: 100, // Dropzone settings init: function() { var dropEmp = this; this.element.querySelector("button[type=button]").addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); dropEmp.processQueue(); }); this.on("sendingmultiple", function() { }); this.on("successmultiple", function(files, response) { }); this.on("errormultiple", function(files, response) { }); } }; Fico no aguardo da colaboração de vocês. Grande abraço pessoal!
  10. gustavo vierr

    "herdar" pagina HTML

    Estou desenvolvendo um site que terá varias paginas iguais, apenas com conteúdos diferentes (como se fosse o perfil do facebook, a pagina é padrão, mas conteúdos é diferente em cada perfil), e como serão varias paginas eu não quero só copiar o código e colar, eu queria fazer uma pagina base que se eu mudar alguma coisa mudará todas as "filhas" automaticamente. Entretanto eu não sei como esse método é chamado, nem como fazer, poderiam me falar como se chama essa técnica em HTML? e se puderem me mandem materiais sobre isso.
  11. Webster Moitinho

    Sinal Sonoro ao receber a mensagem

    Criei um sistema de mensagens em que a notificação aparece como um "bullet" com a quantidade de mensagens não lidas sobre a logomarca do sistema. Todavia eu gostaria de que, se a quantidade de mensagens fosse maior que 0 (zero), o sistema emitisse um alarme sonoro. Meu código está assim: <?php //verifica se o numero de linhas é maior que 0 (zero) $num_rows = 2; if($num_rows > 0){ //toca o som de alerta echo "<script> play();</script>"; // <-- O elemento audio só vai ser criado daqui algumas linhas, // não tem como ele ser tocado ainda. } ?> <audio id="autoplay"> <source src="libraries/gopi.mp3" type="audio/mp3" /> seu navegador não suporta HTML5 </audio> <script type="text/javascript"> audio = document.getElementById('autoplay'); function play(){ audio.play(); } </script>
  12. Oi, pessoal. Preciso de uma ajuda de vocês. Tenho esse código de formulário de contato em um dos sites que gerencio e preciso colocar um redirecionamento de URL ao submeter o envio do formulário com sucesso. Atualmente ele só exibe "Mensagem enviada com sucesso!". Já tentei injetar essa função direto pelo javascript, porém as tentativas que fiz foram todas sem sucesso. Podem me ajudar com isso? A ideia seria enviar as pessoas para uma página de resposta que já desenvolvi. <form class="avia_ajax_form av-form-labels-visible avia-builder-el-123 el_after_av_hr avia-builder-el-last av-custom-form-color av-light-form" method="post" name="formhouse"> <fieldset> <p id="element_avia_1_1" class=" first_form form_element form_element_third"><label for="avia_1_1">Nome <abbr class="required" title="required">*</abbr></label> <input id="avia_1_1" class="text_input is_empty" name="nome" type="text" value="" /></p> <p id="element_avia_2_1" class=" form_element form_element_third"><label for="avia_2_1">E-Mail <abbr class="required" title="required">*</abbr></label> <input id="avia_2_1" class="text_input is_empty" name="email" type="text" value="" /></p> <p id="element_avia_3_1" class=" form_element form_element_third"><label for="avia_3_1">Telefone <abbr class="required" title="required">*</abbr></label> <input id="avia_3_1" class="text_input is_phone" name="telefone" type="text" value="" /></p> <p id="element_avia_4_1" class=" first_form form_element form_fullwidth av-last-visible-form-element"><label class="textare_label hidden textare_label_avia_4_1" for="avia_4_1">Mensagem <abbr class="required" title="required">*</abbr></label> <textarea id="avia_4_1" class="text_area is_empty" cols="40" name="mensagem" rows="7"></textarea></p> <p class="hidden"><input id="avia_5_1" class="hidden " name="avia_5_1" type="text" value="" /></p> <center id="msgErroHouse" style="color: red; display: none;">Erro ao enviar a mensagem, preencha todos os campos para continuar</center>&nbsp; <center id="msgShowHouse" style="display: none;">Mensagem enviada com sucesso!</center> <p class="form_element "><input name="avia_generated_form1" type="hidden" value="1" /> <input id="clica-botao-house" class="button" type="button" value="Enviar" /></p> </fieldset> </form> <script language="javascript"> function chama(){ var ret = hc_envia_mensagem(2923, document.formhouse.nome.value, document.formhouse.email.value, '', document.formhouse.telefone.value, document.formhouse.mensagem.value); if(document.formhouse.email.value.trim() != '' && document.formhouse.nome.value.trim() != ''){ jQuery('#msgErroHouse').hide(); jQuery('#msgShowHouse').show(); document.formhouse.nome.value = ''; document.formhouse.email.value = ''; document.formhouse.ddd.value = ''; document.formhouse.telefone.value = ''; document.formhouse.mensagem.value = ''; }else{ jQuery('#msgShowHouse').hide(); jQuery('#msgErroHouse').show(); } } setTimeout(function(){ jQuery('#clica-botao-house').on('click', function(){chama ()}); jQuery('[data-avia-form-id]').hide(); },100) </script>
  13. Olá, sou iniciante. Estou lendo o livro “Javascript: o guia definitivo”. Como faço para que o resultado de “book.topic” apareça no navegador? Isso é do livro: var book = { // Objetos são colocados entre chaves. topic: “JavaScript”, // A propriedade “topic” tem o valor “JavaScript”. fat: true // A propriedade “fat” tem o valor true. }; // A chave marca o fim do objeto. book.topic -> EU QUERO VER O RESULTADO DISSO AQUI. SÓ NÃO SEI ONDE BOTO O QUE ESTÁ NO COMEÇO DESTA LINHA. O HTML que estou usando é o seguinte: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML Document</title> </head> <body> <script> var book = { // Objetos são colocados entre chaves. topic: "JavaScript", // A propriedade "topic" tem o valor "JavaScript". fat: true // A propriedade "fat" tem o valor true. }; book.topic // ISSO VAI AQUI? </script> </body> </html> Não aparece nada no Chrome. Eu uso o Notepad++. Eu quero ver a saída no Chrome. Já tentei de várias formas e não consegui. Se alguém puder ajudar, agradeço.
  14. Rafael Arcanjo

    Ajuda no Bingo

    Galera estou fazendo um bingo e tenho um problema... tem dois vetores, um armazena os nomes dos participantes e outro os numeros que ele escolher, ele pode escolher 6 numeros (não parece muito com bingo e sim com a mega-sena) que são armazenados no segundo vetor, o problema é que se for 2 participantes o segundo vetor vai ter 12 numeros, eu gostaria de uma função para separar esses numeros na hora da checagem... alguém mais experiente poderia me ajudar?
  15. michael450

    Listagem em tempo real

    Senhores, boa tarde. Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe" na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo. Essas informações não são salvas em DB, é apenas para consulta. Se alguém puder ajudar serei muito grato, Abraço. Michael Douglas
  16. AMANDIANDO

    Botão com texto

    Oi, pessoal! Estou começando a utilizar javascript e entendendo os códigos. Quero muito utilizar um tipo de botão que é mais ou menos assim como coloquei em anexo. A primeira imagem é o botão normal, quando colocamos o mouse em cima, sobe a barra escura e aparece a descrição do link. Eu tenho um vídeo de um em funcionamento, mas não consegui o código dele. Alguém poderia me ajudar?
  17. Venho por meio desse post procurar ajuda com meu código! Estou fazendo um código usando `DataTable` , sou iniciante na programação, depois de umas pesquisas e até mesmo algumas dicas conseguir construir uma DataTable com banco de dados. Continuando minhas pesquisas para aprimorar mais ainda o código, percebi que a `DataTable` possuir varias funções interessantes, umas delas em especifico chamou bastante minha atenção e até me ajudaria no código que no caso é o uso de Linhas filhas ocultas, que quando fazemos o click em cima de um botão aparece as informações extras da linha ( no caso os dados a mais do banco ) e ao apertar ela novamente ele oculta as informações. Gostaria de ajuda para criar essa função na minha Tabela, já realizei pesquisas no próprio site da `DataTable` , aqui, porem não entendo bem o jeito que eles explicam. segue abaixo meu código da table e da `DataTable` que conecta com o Banco. Tabela <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> <thead> <tr> <th>Nome</th> <th>CPF</th> <th>Data de Nascimento</th> <th></th> <th>Ação</th> <th></th> </tr> </thead> <thead> <tr> <td><input type="text" data-column="0" class="search-input-text" style="width: 150px;"></td> <th><input type="text" data-column="1" class="search-input-text" style="width: 150px;"></td> <th><input type="text" id="data" data-column="2" class="search-input-text" style="width: 150px;"></th> <th></th> <td> </td> <td></td> </tr> </thead> </table> Script DataTable $(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "bJQueryUI": true, "oLanguage": { "sProcessing": "Processando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "Não foram encontrados resultados", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando de 0 até 0 de 0 registros", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "oPaginate": { "sFirst": "Primeiro", "sPrevious": "Anterior", "sNext": "Seguinte", "sLast": "Último" } }, "ajax":{ url :"../Tabelas/Tabela_consulta_cliente.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#employee-grid_processing").css("display","none"); } } } ); $("#employee-grid_filter").css("display","none"); // hiding global search box $('.search-input-text').on( 'keyup click', function () { // for text boxes var i =$(this).attr('data-column'); // getting column index var v =$(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); } ); $('.search-input-select').on( 'change', function () { // for select box var i =$(this).attr('data-column'); var v =$(this).val(); dataTable.columns(i).search(v).draw(); } ); } ); Conexão DataTable com o Banco de dados <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "loc_equipamentos"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $requestData= $_REQUEST; $columns = array( 0=>'nome_usuario', 1=> 'cpf_usuario', 2=> 'data_nascimento', 3=> 'id_usuario', 4=> 'id_usuario', 5=> 'id_usuario' ); $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario"; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; . $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario WHERE tipo_perfil = 'CLIENTE' AND ativo_usuario = 'TRUE'"; if( !empty($requestData['columns'][0]['search']['value']) ){ $sql.=" AND nome_usuario LIKE '".$requestData['columns'][0]['search']['value']."%' "; } if( !empty($requestData['columns'][1]['search']['value']) ){ $sql.=" AND cpf_usuario LIKE '".$requestData['columns'][1]['search']['value']."%' "; } if( !empty($requestData['columns'][2]['search']['value']) ){ //age $sql.=" AND data_nascimento LIKE '".$requestData['columns'][2]['search']['value']."%' "; } $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $data = array(); while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); $informacao ="<div class='botaodiv'> <a href = ?informacao=".$row['id_usuario']." >+ Informações</a> </div>"; $editar ="<div class='botaodiv'> <a href = ?editar=".$row['id_usuario']." >Editar</a> </div>"; $deletar ="<div class='botaodiv'> <a href = ../Eventos/evento.php?DesativaCadastro=".$row['id_usuario']." >Excluir</a> </div>"; $nestedData[] = $row["nome_usuario"]; $nestedData[] = $row["cpf_usuario"]; $nestedData[] = $row["data_nascimento"]; $nestedData[] = $informacao; $nestedData[] = $editar; $nestedData[] = $deletar; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); echo json_encode($json_data); ?> Fora o caso de criar Detalhes para Linhas, Caso alguém tenha alguma sugestão de como melhorar meu código ( por exemplo uma Conexão ao Banco mais simples, um Js melhor etc.. ) ou alguma critica para eu evoluir, irei agradecer bastante!
  18. Bom dia, eu gostaria de fazer dois botões na datatable, um para excluir e outro que direcionaria o usuario para outra página. Meu index.php está desta forma, <?php include('scripts/inicio.php') ?> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/plug-ins/1.10.19/i18n/Portuguese-Brasil.json"></script> <script src="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></script> <script src="../../extensions/Editor/css/editor.dataTables.min.css"></script> <script> $(document).ready(function() { $('#listar-usuario').DataTable({ "processing": true, "serverSide": true, "ajax": { "url": "proc_pesq_registro.php", "type": "POST" } }); } ); </script> <script> // $(document).ready(function() { //$('#listar-usuario').DataTable( { //"language": { //"sEmptyTable": "Nenhum registro encontrado", // "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", //"sInfoEmpty": "Mostrando 0 até 0 de 0 registros", // "sInfoFiltered": "(Filtrados de _MAX_ registros)", // "sInfoPostFix": "", //"sInfoThousands": ".", //"sLengthMenu": "_MENU_ resultados por página", //"sLoadingRecords": "Carregando...", //"sProcessing": "Processando...", //"sZeroRecords": "Nenhum registro encontrado", //"sSearch": "Pesquisar", //"oPaginate": { // "sNext": "Próximo", // "sPrevious": "Anterior", //"sFirst": "Primeiro", //"sLast": "Último" //}, //"oAria": { // "sSortAscending": ": Ordenar colunas de forma ascendente", //"sSortDescending": ": Ordenar colunas de forma descendente" //} //} // } ); //} ); </script> <title>Registos</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-lg-8"> <a href="cadregistro.php" class="btn btn-primary">Voltar</a> <a href="index.php" class="btn btn-primary">Home</a> <hr class="new1"> </div> <div class="col-md-4"> <a href="http://www.novalima.mg.gov.br/" target="_blank" class="thumbnail" > <img data-src="holder.js/100%x180" /> <img src="imagens/logo.png" class="img-responsive" alt="PMNL" /> </a> </div> </div> <center><h1>Registros</h1></center> <br><br><br> <div class="row"> <div class="col-md-12"> <br><br> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title painel-title-responsive">Registros</h3> </div> <div class="panel-body"> <table id="listar-usuario" class="table table-striped table table-bordered table-hover table-responsive"> <thead> <tr> <th>Data de Abertura</th> <th>Data do Serviço</th> <th>Data da Busca</th> <th>Comentarios</th> <th>Cliente</th> <th>Problema</th> <th>Prestador</th> <th>Id</th> </tr> </thead> </table> </div> </div> </div> </body> <htnl> PS: Também gostaria de deixar o form em português, o código está como comentário pois quando coloco ele, traduz, porém não lista nada... Já a página proc_pesq_registro.php está desta forma: <?php include_once("conexoes/conexao.php"); ?> <?php //Receber a requisão da pesquisa $requestData= $_REQUEST; //Indice da coluna na tabela visualizar resultado => nome da coluna no banco de dados $columns = array( 0 =>'dataabertura_os', 1 => 'dataservico_os', 2=> 'databusca_os', 3=> 'comentario_servico', 4=> 'tbl_cliente_id_cliente', 5=> 'tbl_prestador_id_prestador', 6=> 'tbl_categoria_id_categoria', 7=> 'id_os', ); //Obtendo registros de número total sem qualquer pesquisa $result_user = "SELECT * from tbl_os inner JOIN tbl_cliente on tbl_cliente.id_cliente = tbl_os.tbl_cliente_id_cliente inner JOIN tbl_prestador on tbl_prestador.id_prestador = tbl_os.tbl_prestador_id_prestador INNER JOIN tbl_categoria on tbl_categoria.id_categoria = tbl_os.tbl_categoria_id_categoria "; $resultado_user =mysqli_query($conn, $result_user); $qnt_linhas = mysqli_num_rows($resultado_user); //Obter os dados a serem apresentados $result_usuarios = "SELECT * from tbl_os inner JOIN tbl_cliente on tbl_cliente.id_cliente = tbl_os.tbl_cliente_id_cliente inner JOIN tbl_prestador on tbl_prestador.id_prestador = tbl_os.tbl_prestador_id_prestador INNER JOIN tbl_categoria on tbl_categoria.id_categoria = tbl_os.tbl_categoria_id_categoria WHERE 1=1"; if( !empty($requestData['search']['value']) ) { // se houver um parâmetro de pesquisa, $requestData['search']['value'] contém o parâmetro de pesquisa $result_usuarios.=" AND ( dataabertura_os LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR dataservico_os LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR databusca_os LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR comentario_servico LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR nome_cliente LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR nome_prestador LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR descricao_categoria LIKE '".$requestData['search']['value']."%' "; $result_usuarios.=" OR id_os LIKE '".$requestData['search']['value']."%' )"; } $resultado_usuarios=mysqli_query($conn, $result_usuarios); $totalFiltered = mysqli_num_rows($resultado_usuarios); //Ordenar o resultado $result_usuarios.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $resultado_usuarios=mysqli_query($conn, $result_usuarios); // Ler e criar o array de dados $dados = array(); while( $row_usuarios =mysqli_fetch_array($resultado_usuarios) ) { $dado = array(); $dado[] = $row_usuarios["dataabertura_os"]; $dado[] = $row_usuarios["dataservico_os"]; $dado[] = $row_usuarios["databusca_os"]; $dado[] = utf8_encode($row_usuarios["comentario_servico"]); $dado[] = utf8_encode($row_usuarios["nome_cliente"]); $dado[] = utf8_encode($row_usuarios["nome_prestador"]); $dado[] = utf8_encode($row_usuarios["descricao_categoria"]); $dado[] = utf8_encode($row_usuarios["id_os"]); $dados[] = $dado; } //Cria o array de informações a serem retornadas para o Javascript $json_data = array( "draw" => intval( $requestData['draw'] ),//para cada requisição é enviado um número como parâmetro "recordsTotal" => intval( $qnt_linhas ), //Quantidade de registros que há no banco de dados "recordsFiltered" => intval( $totalFiltered ), //Total de registros quando houver pesquisa "data" => $dados //Array de dados completo dos dados retornados da tabela ); echo json_encode($json_data); //enviar dados como formato json Então para resumir, eu gostaria de saber como coloco um botão para excluir o registro, e um para direcionar o usuário para uma outra página para alterar aquele registro. Também gostaria de saber onde coloco o código para tradução... Obrigado!
  19. altyouth

    Problemas com Jquery

    Sou iniciante, e estou tentando utilizar JQuery em um projeto, estou fazendo sua instalação via npm, e incluindo o escopo global no arquivo js. Mas quando abro a pagina e verifico o console, o mesmo aponta erro no $ do escopo global dizendo que nao foi referenciado. Ja pesquisei sobre pra ver se conseguia resolver, mas o problema persiste.
  20. serAleatorio1212

    pegar comandos do teclado - JavaScript

    Seguinte, preciso que cada vez que eu aperto uma tecla teclado, apareça uma frase, estou tentando fazer, so que quando aperto a tecla pela segunda vez, em vez de a frase ir pra baixo, ela vai cobre a primeira, em vez de cobrir, eu gostaria que ela fosse pra baixo, tenderam ? nao julgue, sou iniciante em JavaScript :v <!DOCTYPE html> <html lang="pt-br"> <head> <title>javascript</title> <link href="https://fonts.googleapis.com/css?family=Geostar&display=swap" rel="stylesheet"> <meta charset="utf-8"> <style> body{ background-color: black; } #t1{ color:#01DF01; } </style> </head> <body onkeypress="frase1()" onkeypress="frase2()" > <br> <h1 id="t1"></h1><br> <h1 id="t2"></h1> <h1 id="t3"></h1> <h1 id="t4"></h1> <script> function frase1(){ document.getElementById('t1').innerHTML = 'frase 1'; } function frase2(){ document.getElementById('t2').innerHTML = 'frase 2; } </script> </body> </html>
  21. allineoliveira

    Fazendo contas de multiplicar

    Olá, tenho que multiplicar usando a função, são 3 cálculos. Quando faço a seguinte estrutura, somente o último resultado aparece no return. function multiplicar(){ return (7*5), (7*10), (50*0.5); } Tentei usar variação e também não deu certo function multiplicar(numeroA,numeroB,numeroC){ var numeroA = 7*5; var numeroB = 7*10; var numeroC = 50*0.5 var resultado = numeroA,numeroB,numeroC; return resultado Poderiam me ajudar apontando onde estou errando Obrigada :)
  22. Eu estou no inicio dos estudos de JS, entao to criando uma pagina de teste onde basicamente eu criei uma div e dividi essa div principal em outras quatro, e tenho uma botao na pagina que ao clicar sera executada uma funcao que cria um array e executa prompt() 4 vezes pra capturar 4 valores a serem inseridos nessas 4 divs dentro da div principal. O problema eh que quando eu clico no botao que deveria executar a funcao e abrir o prompt na pagina, a acao desejada nao esta acontencendo. Eu clico no botao e nao acontece nada. Obs.: na vdd o botao eh uma div que eu criei e adicionei a propriedade 'cursor:pointer'.
  23. Boas Malta, Tenho o seguinte código, e queria colocar um URL para cada imagem. <script> var imageSources = ["{{ asset('images/sites/site1.png') }}"] var index = 0; setInterval(function(){ if (index === imageSources.length) { index = 0; } document.getElementById("image").src = imageSources[index]; index++; }, 5000); </script> Obrigado. Abraço
  24. Olá, Preciso pegar id de um foearch knockout e passar em um form <section data-bind="foreach: {data: sourceItems, afterRender: lazyLoadImage}" class="col-sm-8"> {{Form::open(array('url' => '/movies/$data->id/reviews'))}} </section> $data->id ou $data.id ou +id+ não funcionam agradeço qualquer ajuda
  25. Estou escrevendo um Site muito especifico, para atender pessoas com necessidades especiais, o que implica em automatizar quase tudo, apesar do site, ter uma "aparência" comum a qualquer usuário. Quase a totalidade da navegação, cliques etc, são feitos não só por mouse e teclado, mas por "gestos" e/ou "voz". Tudo funciona perfeitamente simulando eventos de teclado e mouse via JQuery porem, uma única coisa simplesmente NÃO FUNCIONA. A Copia para Clipboard. Apesar do Botão receber o evento, a copia não é feita. Mas se clicar fisicamente no botão, funciona perfeitamente. Alguém saberia explicar o motivo disso e/ou dar uma sugestão de solução? Já utilizei inúmeras bibliotecas para acessar o Clipboard e com TODAS acontece a mesma coisa. Segue o codigo que estou usando para testes. <!doctype html> <head> <meta charset="utf-8"> <title>trigger/Copy testes</title> <style> button { margin: 10px; } div { color: blue; font-weight: bold; } span { color: red; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body onLoad="primeclick();"> <button>Button #1</button> <button>Button #2</button> <div><span>0</span> button #1 clicks.</div> <div><span>0</span> button #2 clicks.</div> <!-- Esta é a parte do codigo que interessa --> <textarea class="textarea">Vamos copiar este texto?</textarea> <br> <button class="copiar" >Copiar Texto</button> <script> /* $( "button:first" ).click(function() { update( $( "span:first" ) ); }); $( "button:last" ).click(function() { $( "button:first" ).trigger( "click" ); update( $( "span:last" ) ); }); function update( j ) { var n = parseInt( j.text(), 10 ); j.text( n + 1 ); } */ //Copiar var copyTextareaBtn = document.querySelector('.copiar'); copyTextareaBtn.addEventListener('click', function(event) { var copyTextarea = document.querySelector('.textarea'); copyTextarea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'sim!' : 'não!'; alert('Texto copiado? ' + msg); } catch (err) { alert('Opa, Não conseguimos copiar o texto, é possivel que o seu navegador não tenha suporte, tente usar Crtl+C.'); } }); function primeclick() { $( "button:last" ).trigger( "click" ); } </script> </body>
×

Important Information

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