WagnerFilho
-
Total de itens
41 -
Registro em
-
Última visita
Tudo que WagnerFilho postou
-
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(); -
Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda! Eu separei os arquivos js por responsabilidades. Cada arquivo será encarregado para uma determinada função. Estou carregando estes arquivos da seguinte forma: <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ? Como posso fazer isto ? Então tenho alguns arquivos js. app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js app.js let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name); controllerExample.js ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document ); modelExample.js ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document ); ajax let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };