WagnerFilho
-
Total de itens
41 -
Registro em
-
Última visita
Sobre WagnerFilho
-
javascript Dados Json em HTML utilizando loop e Acionar evento change de um Dropdown List
WagnerFilho postou um tópico no fórum Javascript
Olá, Eu escrevi um exemplo de trabalho de um problema real que estou tentando resolver Criei um objeto simulando o retorno json que recebo do banco de dados. Eu preciso: Listar contratos e lotes de contratos Ao entrar na função, marcar o último `lote` do `contrato` como selecionado no Dropdown List Ao entrar na função, exibir as faturas `lote` e `contrato` selecionado no elemento `ul-invoices` Carregar e exibir as respectivas `faturas` ao alterar o `lote` Problemas: Não consigo listar as `faturas` do último `lote` do `contrato selecionado` ao carregar a função. Não consigo listar as `faturas` ao `alterar` o `lote` do `contrato` Observação: Ao entrar na página, já tenho as informações do contrato selecionado; no caso do exemplo, deixei o contrato com o ID 1. No exemplo estou usando a classe `in-attendance` para definir o contrato selecionado Estou usando `Revealing Pattern` e quero manter este padrão Tradução contracts = contratos batches = lotes invoices = faturas Exemplo <html> <label id="contracts"></label> <ul id="ul-invoices"></ul> <pre></pre> <script> let lblContract = document.querySelector('#contracts'); let UlInvoices = document.querySelector('#ul-invoices'); let contractInAttendance = 1; const objectContract = { id: 1, nome: 'wagner', contracts: [{ id: 1, contract: '123456', batches: [ { id: 1, contract_id: 1, batch: '1', invoices: [ { value: 10, batch_id: 1, }] }, { id: 2, contract_id: 1, batch: '2', invoices: [{ value: 10, batch_id: 2, }] }] }, { id: 2, contract: '246789', batches: [ { id: 3, contract_id: 2, batch: '1', invoices: [ { value: 20, batch_id: 3, }] }] }] } const revelling = (function() { function privateInit() { const contracts = objectContract.contracts; let contractFilteredById = contracts.filter(contract => contract.id === contractInAttendance); for (const contract of contracts) { const selectedContract = contract.id === contractFilteredById[0].id ? 'in-attendance' : ''; let htmlForBatchsOptions = contract.batches.map(batch => `<option value=${batch.id}>${batch.batch}</option>`).join(''); lblContract.innerHTML += `<div class="contract-${selectedContract}" style="display: flex;"> <div id="contract-${contract.contract}" data-contract="${contract.id}" class="loren"> <span>${contract.contract}</span> </div> <div class="ipsulum" style="margin-left: 5px;"> <select class="sel-batch"> ${htmlForBatchsOptions} </select> </div> </div>`; const batchOption = lblContract.querySelector('select.sel-batch'); batchOption.addEventListener('change', getInvoices); //batchOption.value = 2; } } function getInvoices() { const batchValue = event.target.value console.log(batchValue); //console.log(this.value); } return { init: privateInit() } })(); revelling.init; </script> </html> -
jQuery para Javascript Puro (usar export function ES6)
WagnerFilho postou um tópico no fórum Javascript
Esse script transforma a primeira letra de cada palavra em maiúsculas, exceto algumas palavras que fazem parte das matrizes nas variáveis wordContainAt, wordsToIgnore, wordUpperCase. Estou tendo problemas para refatorar o código criado no jQuery para JavaScript Puro. Pretendo utilizar exportação ES6. Acho que não entendi muito bem esse conceito, além de não conseguir obter o objeto this dentro do escopo da função, como acontece em jQuery. Alguém pode me ajudar ? <input class="lower" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(window).on('load', function() { $.fn.capitalize = function() { // words to ignore let wordContainAt = '@', wordsToIgnore = ['to', 'and', 'the', 'it', 'or', 'that', 'this'], wordUpperCase = ['S.A', 'SMS', 'USA'], minLength = 2; function getWords(str) { if (str == undefined) { str = 'abc def'; } else { str = str; } return str.match(/\S+\s*/g); } this.each(function() { let words = getWords(this.value); console.log(words); $.each(words, function(i, word) { // only continues if the word is not in the ignore list or contains at '@' if (word.indexOf(wordContainAt) != -1) { words[i] = words[i].toLowerCase(); } else if (wordUpperCase.indexOf($.trim(word).toUpperCase()) != -1) { words[i] = words[i].toUpperCase(); } else if (wordsToIgnore.indexOf($.trim(word)) == -1 && $.trim(word).length > minLength) { words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1).toLowerCase(); } else { words[i] = words[i].toLowerCase(); } }); if (this.value != '') { this.value = words.join(''); } }); }; // field onblur with class .lower $(document).on('blur', '.lower', function() { $(this).capitalize(); }).capitalize(); }); </script> Como pretendo: const capitalizeTheWord = () => { console.log('hello World'); const inputWordCapitalize = document.querySelector('input.lower'); inputWordCapitalize.addEventListener('blur', (e) => { // }); }; export default capitalizeTheWord();