wanderval

Cara porque você quer fazer dessa forma, a menos que sejá algum desafio pessoal ou estudo de lógica a melhor solução seria usar elementos nativos para isso como: <input type="time" /> <input type="date" /> <input type="datetime-local" /> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

Pelo que percebi essa aplicação é node.js e não uma aplicação front-end está aparecendo undefined pq você não esta retornando nada no response, isso é uma API náo pode deixar de usar response e request. Essa é uma chamada de APi para rota como foi delegado para outro método manipular response(res) ou request(req) como é um get deve ter um response populado. Segundo seu Model não está fazendo nada além de fazer console.log então mesmo chegando resposta do banco nada voltara para o controller. app.get('/estagio/movimentacoes/cadastroSeguros', segurosRoutes.segurosGetAll); Como você pode ver em nenhum momento foi utilizado o "res"nesse método =====CONTROLLER const segurosController = require('../models/segurosModels.js'); module.exports = { segurosGetAll, } async function segurosGetAll(req, res) { console.log('Acessando Models!!!') try{ const retorno = await segurosController.getAll() console.log(JSON.stringify(retorno)) }catch (err){ console.log(err) } } =====ALTERACAO CONTROLLER const segurosController = require("../models/segurosModels.js"); module.exports = { segurosGetAll }; async function segurosGetAll(req, res) { console.log("=========SEGUROS GET ALL CONTROLLER========"); try { const retorno = await segurosController.getAll(); console.log(JSON.stringify(retorno)); res.json(retorno); } catch (err) { console.log(err); res.json({ error: true }); } } ======MODEL====== const conexao = require('../../config/conexao.js'); module.exports = { getAll, } function getAll() { m_sql = 'select * from seguros '; console.log("SQL em Model Seguros...."+'\n'+m_sql) conexao.query(m_sql); console.log("GetAll Sql retornando: ") } =====ALTERACAO MODEL======= // const client = require("../../config/conexao.js"); // const moment = require("moment"); // comentei pq nao vi nenhuma utilizacao // APENAS TEST MOCK const client = require("../config/conexao.js"); module.exports = { getAll }; async function getAll() { console.log("=========GET ALL MODEL========"); const m_sql = "select A.*, B.seg_razaosocial, B.seg_nomefantasia, C.alu_nome, D.usu_username from seguros A left join seguradora B on A.seg_codigo = B.seg_codigo left join usuarios D on A.usu_codigo = D.usu_codigo left join alunos C on A.alu_codigo = C.alu_codigo "; let retorno; try { retorno = await client.query(m_sql); } catch (error) { throw new Error(error); } return retorno; } tenta acessar essa plataforma: https://codesandbox.io/s/zealous-brahmagupta-mqhxd?file=/src/index.js

Tenta assim <script src="https://www.mercadopago.com.br/integrations/v1/web-payment-checkout.js" data-preference-id="<?php echo json_encode($preference2->id); ?>" data-elements-color="#0D55E7" data-button-label-color="#0D55E7" data-button-label="CONTINUAR" > </script>

Nada cara esses detalhes ocorrem mesmo, so que com o tempo fica mais fácil pra encontrar a issue com o tempo você acaba vendo padrões nas falhas, e aprendendo a fazer debugging com mais naturalidade. Sucesso pra você tb!

function myFunction() { // Corrija essa linha // var test = document.getElementsByClassName("entrada"); // atualmente var test = document.getElementsByClassName("entrada")[0].innerHTML; // maneira correta function getMoney( str ) {console.log(str); return parseInt( str.replace(/[\D]+/g,'') ); } function formatReal( int ) { var tmp = int+''; tmp = tmp.replace(/([0-9]{2})$/g, ",$1"); if( tmp.length > 6 ) tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2"); return tmp; } var int = getMoney( test ); document.getElementById("saida").innerHTML = (formatReal( int )); } JsBin: https://jsbin.com/dujevafuri/edit?html,js,output

1 ponto: Você deveria ter colocado tb o html 2 ponto: no seu script você define claramente 4 items, então acredito que o que esteja ocorrendo e apenas exibir as imagesn novamente devido o loop. Obs: não ficou muito clara sua dúvida, você quer exibir 4 imagens diferentes tendo menos de 4? JsBin: https://jsbin.com/jerahopipe/edit?html,js,output $(".owl-carousel").owlCarousel({ loop: true, nav: true, items: 4, // Define o numero de items dots: false, navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], smartSpeed: 1200, autoplayTimeout: 5000, autoHeight: false, autoplay: true, responsive: { // acredito que defina o espaçamento entre os itens, logo se houver apenas 2 imagesn e no attributo items for igual 2(items:2) a biblioteca ira considerar essa definiçao agora se essa definiçao não existir passa a vvalor o valor de (items) seguindo a configuracao da biblioteca para exibir a cada loop o numero igual aos itens definidos 0: { items: 1 }, 480: { items: 2 }, 768: { items: 3 }, 992: { items: 4 } } });

cara coloca o código da tentativa aqui é muito mais assertivo: mas vai um video do Tulio do DevPleno

O que eu fiz foi criar um cenário, eu fiz uma pergunta pra você no post anterior sobre o que a query retorna, certo? Na maioria de libs Javascrip o client.post client.get retornam uma Promise, quando eu falo isso, eu digo o tipo do retorno não o conteudo em si. Então se você ver eu criei o metodo query retornando como async torna o metodo uma promise. procure ler a respeito assim vai entender e ficar mais seguro. mas basicamente você so precisaria alterar a sua variavel que está errada ja que a chamada do metodo já está com o "then()". Faça tentativas use o then na chamda do getAll e corrija o que apontei relacionado a variavel retorno. entao caso haja problema coloque a sua tentativa aqui

// Seu Cenario async function query(sql) { return {data:"sucess"}; } async function getAll() { m_sql = 'select A.*, B.seg_razaosocial, B.seg_nomefantasia, C.alu_nome, D.usu_username from seguros A left join seguradora B on A.seg_codigo = B.seg_codigo left join usuarios D on A.usu_codigo = D.usu_codigo left join alunos C on A.alu_codigo = C.alu_codigo '; console.log("SQL em Seguros...."+m_sql) console.log("-----------------------") let retorno try{ retorno = await query(m_sql); console.log("Retornando da SQL: "+retorno.data) } catch(erro) { console.log(erro) retorno = erro; } return retorno; } getAll().then((result) => { console.log('Result: ', result); }) Seu erro está sendo o seguinte você está declarando uma variavel const retorno dentro do try e retornando let retorno

mas seu metodo getAll não retorna uma promise? const retorno = await client.query(m_sql); oque retorna query? // modifica essa linha segurosController.getAll().then((result) => {

Acho que você deveria estar usando o then do promise ou o await afinal você declarou a funçao como async segurosController.getAll().then((err, result) => { if(err) { console.log("Erro: " + err) throw err; }else{ console.log("Resultado "+result)} }) // await let result = await segurosController.getAll();

Mas o que não ficou muito claro, porque você precisa do position:fixed; afinal com a propria div você ja tem esse comportamento, e dessa forma você torna os elementos anexados em diferentes referencias, viewport e elemento parent. Seguindo o seu css a unica forma seria emum cenario onde a primeira div não tivesse seu height alterado assim daria pra colocar a diferença em uma margin top na segunda div. EX: essas divs por si so já executam esse comportamento, pq são por definição display: block então sempre ocuparam 100% dentro do container <div>div_1</div> <div>div_2</div>

seu problema é muito simples, você está usando aparentemente jquery ($) e não adicionou a mesma no header do html, o codigo está funcional. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <select class="seleciona_nome"> <option value="Joao">Joao</option> <option value="Julio">Julio</option> <option value="Pedro">Pedro</option> </select> <input type="text" class="opcaoSelect" autocomplete="off" disabled="disabled"> </body> </html> link JsBin: https://jsbin.com/wafuduliwi/edit?html,js,output

HTML: <!--My option--> <div class="container-cards"> <div class="box-container"> <section class=box-image> <img src="https://e7.pngegg.com/pngimages/755/939/png-clipart-red-and-gold-shield-illustration-shield-icon-shield-heart-shields.png" width="130" height="130" /> </section> <section class=box-content> <label class="title">Perm. e Segurança</label> <span class="description">Aplique permissões e proteja pastas</span> </section> </div> <div class="box-container"> <section class=box-image> <img src="https://e7.pngegg.com/pngimages/755/939/png-clipart-red-and-gold-shield-illustration-shield-icon-shield-heart-shields.png" width="130" height="130" /> </section> <section class=box-content> <label class="title">Perm. e Segurança</label> <span class="description">Aplique permissões e proteja pastas</span> </section> </div> <div class="box-container"> <section class=box-image> <img src="https://e7.pngegg.com/pngimages/755/939/png-clipart-red-and-gold-shield-illustration-shield-icon-shield-heart-shields.png" width="130" height="130" /> </section> <section class=box-content> <label class="title">Perm. e Segurança</label> <span class="description">Aplique permissões e proteja pastas</span> </section> </div> </div> CSS: fieldset{ width:100%; height:100%; padding: 1em; font:80%/1 sans-serif; border-radius: 10px; padding: 5px; min-height:1px; background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; background: -moz-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0 transparent; border: 1px solid #AAAAAA; border-radius: 10px 10px 10px 10px; box-shadow: 0 0 15px #AAAAAA; font-size: 15px; color: #000; text-transform: uppercase; text-align: center; } div.box { width: 250px; display: inline-block; padding: 15px; min-height:1px; } /* My opinion */ body { background: #ededed; } .container-cards { flex-wrap: wrap; display: inline-flex; width: 100%; } .box-container { /*border: 1px solid red;*/ display: flex; background: #fcfcfc; font:80%/1 sans-serif; font-size: 14px; border-radius: 5px; align-items: center; width: 280px; height: 80px; border: 1px solid #AAAAAA; margin: 10px; } .box-container .box-image { width: 25%; background: -webkit-linear-gradient(90deg, #CCCCCC, #FFFFFF) repeat scroll 0 0; align-items: center; display: flex; height: 100%; justify-content: center; border-right: 1px solid #AAAAAA; } .box-container .box-image img { width: 40px; height: 40px; } .box-container .box-content { display: flex; flex-direction: column; padding: 10px; .title { margin-bottom: 10px; font-size: 14px font-weight: bold; } .description { font-size: 12px; color: #8a8686; } } JsBin: https://jsbin.com/rowuvamaxu/edit?html,css,output

Acredito que o problema seja pq sempre cria uma nova instancia e nunca destroy a instancia anterior. JS // declara variavel fora para armazenar instancia var myChart; function montaGraficoProducao(option) { var ctx = document.getElementById('prodChart').getContext('2d'); var graphType = document.getElementById('graph-type').value; var data = getData(option) var labels = data.labels; var series = data.series; // checa a existencia de uma instancia e destroy if(myChart) { myChart.destroy(); } myChart = new Chart(ctx, { type: graphType, responsive: true, hoverMode: 'index', stacked: true, data: { labels: labels, datasets: [{ label: 'Ton/Mês', fill: false, backgroundColor: "rgba(1, 150, 249, 1)", borderColor: "rgba(1, 150, 249, 1)", data: series }] } }); } function getData(option) { const obj = { '1': { 'labels': ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 'series': [0, 10, 5, 2, 20, 30, 45] }, '2': { 'labels': ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 'series': [0, 3, 1, 10, 13, 22, 17] } }; return obj[option]; } Jsbin: https://jsbin.com/payepiyuga/edit?html,js,output

Mas pelo que entendi da sua dúvida, é mais uma dúvida de Usabilidade. 1- na primeira opção você tem uma rotina que realiza um pull notification 2- é uma requisição do cliente então o que você deveria analisar e se é necessário e se a usabilidade exige isso, um pull request é o ideal caso você tenha vários clientes dependendo desse serviço ai você teria uma sincronização de dados. mas se você tem um cenário onde é um dado isolado e onde a usabilidade pode ficar comprometida com os dados sendo atualizados o reflesh pode sim ser uma opção imagina uma table data sendo atualizada a todo momento pelo push notification, alem de nao ter uma boa usabilidade ainda consumiria muita memória do browser pra renderizar no dom. mas é clara uma tabela de mercado financeira nesse caso é emocionante é imprescindível essa atualização.

Outra opção seria usar uma lib especifica para manipulação de datas caso essa manipulação possa ficar mais ampla, assim terá um suporte maior, envolvendo dias, mês, ano e locale caso precise tratar dados com fuso horário diferente, e mais simples de manipular formatos diferentes como timestamps. uma delas é o day.js url cdn:https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.1/dayjs.min.js // Acresncentando Meses console.log(dayjs().add(2, 'month').format('DD-MM-YYYY')); // Acrescentando Dias console.log(dayjs('2020-10-12').add(5, 'day').format('DD-MM-YYYY')); link JSbin: https://jsbin.com/negavetove/edit?html,js,console

Somente complementando @Omar~ na verdade tem uma forma de resetar o audio mantendo os elementos usando a propriedade currentTime = 0 no caso seria apenas uma linha adicionada ao seu método. function tocarAudio(e) { var alvo = (e.target).dataset.alvo; if (variavelGlobal) { document.getElementById(variavelGlobal).pause(); document.getElementById(variavelGlobal).currentTime = 0; } document.getElementById(alvo).play(); variavelGlobal = alvo; } link JsBin:https://jsbin.com/liyerayewi/edit?html,js,output

Bom amigo acho que @Omar~ te deu um caminho, na sugestão dele ele mencionou o que me parece um caminho de pastas onde você deve realizar alterações e relatou sobre "classificadores" que me parece poder ser um script que manipula um tipo especifico de conteúdo. Acho deveria olhar e tentar fazer alguma coisa e posta o que não conseguir. Observação: - aprenda a usar o inspect element por ele você consegue identificar os elementos do html no caso esse que está sendo utilizado como container da imagem , vai descobrir que o valor 140 x 76 é proporcional a 184 x 100, isso quer dizer que o elemento da imagem usa 100% em um container com tamanhos fixos ou background utilizando cover, mas aparentemente você está querendo que o layout se adapte a sua imagem e não a imagem ao layout. Questions: 1- A sua imagem não está com margens transparentes? 2- Você tem algum designer com essa imagem no tamanho esperado? Não existe uma forma fácil existe soluções mas todas precisam de algum tipo de esforço, então poste códigos aqui, template pq se você simplesmente quiser uma solução baseada nessa descrição. Pense se você com todo o seu código tem dificuldade em resolver, imagina todos aqui que não possuem nada para analisar. JSbin: https://jsbin.com/gusaqoxelu/edit?html,css,output

sim use "ajax" ou mais recente "fetch" para fazer a chamada no script php, assim conseguirá o resultado que espera!

se você quer abrir um uma "modal" pq quer ainda usar o php, não seria mais sensato usar o javascript para receber os dados e e manipular na modal?

Seu problema é que você ao selecionar o item triga o evento onChange chamando o metodo "submit" que da o reflesh, você então deve substituir o metodo submit por algum metodo javascript comum que ira chamar a lógica de request ajax; Mas você está fazendo request para a mesma pagina o ajax faria sentido se fosse fazer para um script especifico de backend que não é o caso então deve tentar diminuir a logica de PHP e aumentar o uso da lógica com a linguagem javascript ex: Note a diferença foi dividida a responsabilidade das linguagens <?php @$_POST['itemSelecionado'] = 'item1'; $itemSelected = @$_POST['itemSelecionado']; ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>PhpFiddle Initial Code</title> <!-- http://phpfiddle.org --> </head> <body> <form method="post"> <select id="selectItem" name="itemSelecionado" required size="2" onChange="changeItem(this)"> <option value="item1">item1</option> <option value="item2">item2</option> </select> <div class="inputs" name="container-inputA"> <label>input A - digite qualquer coisa</label> <input type="text" name="inputA" value="inputA"/> </div> <div class="inputs" name="container-inputB"> <label>input B - digite qualquer coisa</label> <input type="text" name="inputB" value="inputB"/> </div> </form> <script type="text/javascript"> function setItem(itemSelected) { console.log(itemSelected); hideFieldsByClass(".inputs"); displayField(getFieldToDisplay(itemSelected)); } function changeItem() { var e = document.getElementById("selectItem"); var itemSelected = e.options[e.selectedIndex].value; console.log(itemSelected); hideFieldsByClass(".inputs"); displayField(getFieldToDisplay(itemSelected)); } function hideFieldsByClass(className) { var fields = document.querySelectorAll(className); fields.forEach(field => field.style.display = "none"); } function getFieldToDisplay(itemSelected) { const inputToShow = { "item1": "container-inputA", "item2": "container-inputB" }; return inputToShow[itemSelected]; } function displayField(itemSelected) { var fields = document.querySelectorAll(".inputs"); fields = Array.from(fields); let itemFounded = fields.filter(field => field.getAttribute("name") === itemSelected); itemFounded[0].style.display = 'block'; } document.addEventListener('DOMContentLoaded', function() { setItem(<?php echo json_encode($itemSelected) ?>); }, false); </script> </body> </html> Link Jsbin: https://jsbin.com/qukiwegoru/edit?html,js,output PHPFiddle: http://phpfiddle.org/main/code/41wn-ub66

Sim @Omar~ no caso da leitura essa seria uma ótima solução, quando fiz a solução confesso que fiquei um pouco confuso com a descrição mas entendi que ele queria fazer uma chain pra setar valores usando uma única referência de html. No caso o Ex1 seria o que ele deseja o Ex2 o que ele queria evitar, mas confesso que um builder nessa situação é um exagero rs. Obs: e percebo que o @Biel. está cometendo um equivoco porque está declarando a mesma variável 2 vezes no Ex2 sem reutilizar a referência. talvez sejá esse um dos pontos que gerou a dúvida dele. // Erro declarar a mesma variavel 2 vezes var tete = document.getElementById("id_1").style.display="none" ; var tete = document.getElementById("id_1").disabled=true; //Solução var tete = document.getElementById("id_1"); tete.style.display="none"; tete.disabled=true;

Isso que você quer tem um preço, não tem como você colocar em uma única linha sem haver uma lógica de manipulação, o motivo é muito simples, os métodos e propriedades pertencem a uma hierarquia, então tendo diferentes níveis isso se torna impossível, nesse exemplo abaixo você tem esse comportamento mas a manipulação continua sendo feita internamente dentro do objeto AttributeBuilder const attribute = AttributeBuilder() .setElement('id_1') .setDisplay('block') .setDisabled(false) .setValue('aprendiz') .setName('joao') .build(); const attribute2 = AttributeBuilder() .setElement('id_2') .setValue('other field') .setName('Euclides') .build(); function AttributeBuilder() { return { setElement: function(elementId){ this.element = document.getElementById(elementId); return this; }, setDisplay: function(style) { this.element.style.display = style; return this; }, setDisabled: function(status) { this.element.disabled = status; return this; }, setValue: function(value) { this.element.value = value; return this; }, setName: function(name) { this.element.name = name; return this; }, build: function() { console.log("Building object..."); return this.element; } } } Link Jsbin: https://jsbin.com/vokoyinico/edit?html,js,output

Essa é a maneira mais simples de executar o que quer! function changeTargetToSystem() { const linkReference = document.getElementsByClassName('eape-item-linkWrapper')[0]; console.log("Initial state:", linkReference.target); linkReference.target = "_system"; console.log("Final state: ", linkReference.target); } // Initialize changeTargetToSystem(); Link Jsbin: https://jsbin.com/gokabeviri/edit?html,js,console,output