Excelente site com dicas simples e diretas de como usar (e criar) com janelas modais no Bootstrap.
Inclui exemplos de modal sobre modal, modal em posições diferentes, com barra de rolagem, entre outras.
Excelente material produzido pelo Prof. Paulo Cézar Stadzisz, do CEFET-PR.
Vale a pena o estudo!
(Apostila UML)
Preloader são aqueles gis animados, tipo a ampulheta do Windows, que acabam sendo muito úteis em aplicações AJAX para alertar o usuário que a requisição está em processo.
Vagando pela rede, encontramos o site preloader.net que oferece vários modelos, muitos formatos, com possibilidade de personalização de cores, fundos etc.
Vale a pena conferir:
No mysql:
INSERT:
Inserindo dados em uma tabela com dados de outra tabela, onde o campo competência é fixo para todos os inserts:
INSERT INTO 999_final(ol,tipo,competencia) SELECT ol,aps_porte,'2014-12-01' AS competencia FROM 100_aps; |
UPDATE:
Atualizar dados de uma tabela com dados de outra tabela:
UPDATE 999_final, 300_servidores SET 999_final.servidores=300_servidores.servidores WHERE 300_servidores.ol=999_final.ol AND 300_servidores.competencia=999_final.competencia |
JOIN:
INNER JOIN com mais de um campo:
SELECT * FROM `300_servidores` INNER JOIN 999_final ON ((300_servidores.ol=999_final.ol)AND(300_servidores.competencia=999_final.competencia)) #exemplo2: SELECT 300_servidores.servidores,999_final.servidores FROM 300_servidores INNER JOIN 999_final ON ((300_servidores.ol=999_final.ol)AND(300_servidores.competencia=999_final.competencia)) |
INNER JOIN com mais de um campo na junção:
Pois bem, para eliminar itens duplicados de um array unidimensional o comando array_unique() do PHP resolve perfeitamente, contudo, quando torna-se necessário realizar a operação com array multidimensionais (bi no caso) são necessários alguns truques.
Na lista quatro soluções com resultados idênticos e mesmo benckmarking:
<?php $teste[0][0] = 'abc'; $teste[0][1] = 'def'; $teste[1][0] = 'ghi'; $teste[1][1] = 'jkl'; $teste[2][0] = 'mno'; $teste[2][1] = 'pql'; $teste[3][0] = 'abc'; $teste[3][1] = 'def'; $teste[4][0] = 'ghi'; $teste[4][1] = 'jkl'; $teste[5][0] = 'mno'; $teste[5][1] = 'pql'; $teste[6][0] = 'mno'; $teste[6][1] = 'pql'; $teste[7][0] = 'abc'; $teste[7][1] = 'va-kh'; print_r($teste); //processamento de eliminação de duplicatas em array bidimensional: echo "<p>teste1</p>"; $teste1 = multi2($teste); print_r($teste1); echo "<p>teste2</p>"; $teste2=multi_unique($teste); print_r($teste2); echo "<p>teste3</p>"; $teste3=array_unique_multidimensional($teste); print_r($teste3); echo "<p>teste4</p>"; $teste4=multi3($teste); print_r($teste4); //------------------------------------------------------------------------------------------ function multi3($a) { foreach($a as $i => $suba) foreach($a as $i2 => $suba2) if($suba==$suba2 && $i!=$i2) unset($a[$i]); return $a; } function multi_unique($array) { foreach ($array as $k=>$na) $new[$k] = serialize($na); $uniq = array_unique($new); foreach($uniq as $k=>$ser) $new1[$k] = unserialize($ser); return ($new1); //from php.net , searching array_unique } function array_unique_multidimensional($input) { $serialized = array_map('serialize', $input); $unique = array_unique($serialized); return array_intersect_key($input, $unique); } function multi2($teste) { return array_map("unserialize", array_unique(array_map("serialize", $teste))); } ?> |
Muito bem, direto ao problema:
Qual codificação de caracteres utilizar em seus aplicativos? Qual o Charset ideal?
Se usa algum framework, como Bootstrap e ou jQuery por exemplo, melhor usar UTF-8. Na Academia nosso padrão é UTF-8 sem BOM.
Porém, a maioria dos windows usa o padrão ISO 8859-1, causando os transtornos das imagens abaixo quando alguma de nossas configurações foi esquecida (em especial no Internet Explorer):
Na imagem, a tela da mesma aplicação no Firefox é interpretada corretamente como UTF-8, O mesmo no Chrome, já no I.E…..aparece desconfigurado.
Cabe apontar que a página HTML informa corretamente a codificação:
Porém, nada feito! o I.E. Não reconhece….
E aqui mais uma dica, a declaração de charset deve estar dentre as primeiras no HEAD, na Academia por padrão usamos como a primeira, pois esta declaração deve estar dentre os primeiros 1024 bytes do arquivo, registrando a dica: Evite comentários demasiados no início do HTML, mais pode ser visto em: http://www.w3.org/International/questions/qa-html-encoding-declarations.en
A solução?
Usar um “hack” nos arquivos PHP, no início de cada arquivo PHP que retorna conteúdo utilizamos (também por padrão) a declaração:
header('Content-Type: text/html; charset=UTF-8'); |
Tal comando não necessária precisa estar no início do arquivo (o fazemos por questões de padronização).
E quanto ao UTF-8 com ou sem BOM?
O BOM, ou Byte Order Mark é um conjunto de caracteres enviados no início de cada arquivo codificado em UTF-8 com BOM. Tal conjunto tem utilidade no UTF-16 ou 32, sendo inútil no 8. Além de inútil ainda traz alguns problemas: com o BOM não é possível utilizar os comandos header do PHP, além de provocar retornos indevidos em aplicações AJAX, como na imagem abaixo (aliás, estes caracteres são o BOM…):
Então, o resumo de como padronizamos cá na Academia, evitando muitos problemas:
Isto feito, raramente terá problemas com os malditos charset, principalmente no I.E..
É isso, até a próxima.
O problema:
Temos um formulário que deve ser aberto para a edição, sendo que os dados são populados para o form via jQuery/AJAX/PHP/Mysql.
Resta um problema nos selects, como selecionar a option correta, de acordo com o que está armazenado no banco de dados?
A solução:
$("#eixo option:contains('"+valor_que_vem_do_banco+"')").attr('selected',true); |
Pronto, a option que contém o valor que veio do banco será selecionada no Select indicado.
O problema:
Temos uma aplicação com um form bastante complexo que, quando aberto para edição, preenche os dados via AJAX e, conforme for o resultado do AJAX e as permissões do usuários, ações possíveis são habilitadas.
O código usado (inicialmente):
$( document ).ready(function() { preenche_form(); exibe_botoes(); preenche_tema($('#acao_eixo')); }); |
Porém, ocorre o seguinte: A função preenche_form(), que realiza a consulta via AJAX demora mais que as outras, assim, a função exibe_botoes() é executada antes do preenchimento do form, gerando um resultado indesejado pois, para habilitar os botões corretos, a exibe_form() depende do preenchimento da preenche_form().
Os botões a serem habilitados (um conjunto conforme o status preenchido no form pela função preenche_form()):
Num primeiro momento tentamos usar a função ‘when‘ do jQuery:
$( document ).ready(function() { $.when(preenche_form()).done(function(){exibe_botoes();}); preenche_tema($('#acao_eixo')); }); |
Porém, também não funcionou.
Resta então apresentar alguma teoria, estudar um pouco para compreender a solução:
jQuery e AJAX funcionam de forma assíncrona, ou seja, por óbvio, sem sincronia. É o que acontece no caso em comento, é chamada a função que preenche o formulário e, antes desta terminar, a aplicação já chama a segunda que habilita os botões, porém, esta segunda depende do resultado da primeira, assim, o negócio simplesmente não funciona, nenhum botão da aplicação é habilitado nunca, pois a segunda função não tem parâmetros para trabalhar.
Assim, é necessário alterar o comportamento padrão do jQuery, ou seja, torná-lo síncrono, com execução em sequência, aguardando o término da primeira função para só então executar a segunda.
E aqui mais um pouco de aprendizado:
O jQuery tem funções de categoria “Deferreds”, ou diferidas, adiadas. Mas o que isso significa na prática?
Quando uma função desse tipo é chamada, normalmente as de execução mais demorada, a função retorna uma “promise”, ou promessa, de que irá concluir em algum momento, porém, o programa não espera e, enquanto aguarda o “cumprimento da promessa” já vai chamando as funções seguintes. Tá aí a execução assíncrona.
Como exemplos de função “deferred” temos o $.ajax e $.animate.
As funções que criamos, como as do exemplo, em regra não são do tipo deferred, assim, usar when com estas funções, não vai dar resultado algum, vai continuar sendo executado “tudo junto”.
Aliás, a função when existe justamente para que possamos, conforme a necessidade de nossa aplicação, executar funções de forma encadeada, ou seja, assim que esta terminar, execute esta….
Com uma leve pincelada de compreensão de como funciona o trem, podemos concluir então que não tem jeito, certo?
Errado!
O jQuery oferece ferramentas para transformarmos qualquer função comum no tipo deferred.
Vamos a como fazer:
Na função preenche_form() incluímos as funções Deferred, promise e resolve:
function preenche_form() { atrasa=new $.Deferred(); //avisa que é uma função do tipo diferido, mesmo que originalmente não fosse //seu código atrasa.resolve(); //avisa que a função terminou, coloque no ponto em que as ações terminam (pode ser usado mais de um...) //seu código return atrasa.promise(); //envia a promessa que vai terminar alguma hora }; |
É isso, problema resolvido, em, breve um modelinho funcional.
Um pouco de história:
Outros meios de se fazer a mesma coisa é com callbacks, ou seja, encadear as funções de modo a executar uma por vez, comprometendo a performance. Outro método um pouco menos pior, era usar Timeouts nas funções, ou loops que eram executados enquanto a função não terminava. O when certamente é uma solução mais elegante.
Muito bem, usamos o Chrome pelo seu excelente console para testes Javascript (acho mais fácil que o do FireBug).
Porém, de uns tempos para cá o Chrome, no Windows 7, para quem fontes da família Helvética instalada, não renderiza corretamente as páginas, exibindo aqueles caracteres estranhosos.
A solução oferecida: desinstalar as fontes, porém, elas são usadas por outras aplicações e, convenhamos, ter que desinstalar fontes por conta de falha do aplicativo? Melhor seria a Google corrigir logo. Enquanto não faz, as dicas:
Tem o problema quem: Tem fontes Helvética Instaladas (neue, sanskrit, a original…), usa Windows 7, tem o Chrome atualizado (parece que foi uma atualização em meados de Julho/2014 que causou a falha) e tenta acessar sites que usam a fonte Helvética (ou família) como padrão. O Chrome simplesmente não renderiza corretamente, independente da configuração de codificação (UTF-8 etc.).
Páginas como Facebook, Pinterest e até do próprio Google, que usam a fonte Helvética aparecem assim:
Para solucionar, instale o complemento StyleBot no Chrome (link para: https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha).
Em seguida cole no aplicativo o arquivo CSS abaixo:
@font-face { font-family: Helvetica; src: local('Arial'); } @font-face { font-family: "Helvetica Neue"; src: local('Arial'); } @font-face { font-family: 'Helvetica Neue Custom'; src: local('Arial'); } @font-face { font-family: Helvetica; font-weight: bold; font-weight: 700; src: local('Arial'); } @font-face { font-family: "Helvetica Neue"; font-weight: bold; font-weight: 700; src: local('Arial'); } @font-face { font-family: "Helvetica Neue Custom"; font-weight: bold; font-weight: 700; src: local('Arial'); } |
Pronto, o Chrome agora, através do complemento, substituirá a família Helvética pela Arial e tudo volta ao normal.
A dica foi vista no vídeo do canal Ch-Ch-Check It, e pode ser conferido abaixo, se gostou não deixe de dar o “like” no vídeo do colega (em inglês):
É isso, até a próxima!