Já viram o post anterior sobre Ajax e JQuery? Não deixem de ler, nele apresentamos um problema causado pelo assincronismo do Ajax e uma forma simples, porém não ideal, de resolvê-lo.

Para o problema proposto no outro post existe uma forma de realizar a execução assíncrona, sem utilizar .defered e mesmo assim estabelecer que uma execução só irá ocorrer após a outra, isso se deve a um recurso antigo da programação e que nem todo programador domina: a recursividade.

Veja o exemplo anterior, só que modificado:

function execExclu(executou){
 
 jQuery.each(mapArray, function(i){
 
  if(executou == i){
   executou ++;
   jQuery.ajax(“/meuScript.php” )
    .done(function() { alert(“Executou com sucesso!”); execExclu(executou); })
    .fail(function() { alert("Erro no processo!"); });
 
   return false;
  }
 });
}

O exemplo e autoexplicativo, foi criada uma função recursiva que ao ser chamada faz o primeiro step no laço de repetição, aciona o execução Ajax do JQuery e imediatamente retorna falso finalizando a execução do laço, o pulo do gato está no detalhe que por se assíncrono a execução Ajax continua o seu processo e ao finalizar com sucesso ele chama novamente a própria função (recursividade).

Nesta função existe uma variável que é o indexador anterior que comparado com o indexar da atual repetição irá indicar em qual step do laço de repetição a chamada Ajax deve ser acionada.

Nesta técnica aproveitamos o recurso chamado callback que o JQuery implementa de forma maravilhosa, nos callbacks conseguimos executar ações específicas no final da execução, assim podemos ter diversos tipos de processo para cada tipo de callback retornado (sucesso, erro, etc).

Para refinar ainda mais, podemos aproveitar o .ajaxStart() e .ajaxStop() para implementar overlay para indicar de forma visual e bem elegante ao usuário que existe uma execução em andamento e que ele deverá ter paciência até o final da execução.

Leia mais:

• Framework para desenvolvimento Web em PHP/JavaScript (2)
• Executando Ajax via JQuery de modo enfileirado (1)
• Utilizando máscaras com JQuery (1)
• Utilizando JQuery para eventos do mouse (0)
• Remendo no Firefox mais atrapalha do que ajuda (1)

dicas · JavaScript · JQuery

JQuery adicionou uma nova visão sobre o desenvolvimento de interfaces ricas para sites e sistemas Web, afinal, não era mais preciso programar dezenas de linhas em Ajax, poderíamos consumir Ajax de forma simples utilizando as funções da JQuery.

Como todos sabem, por excelência as chamadas de Ajax no JQuery são assíncronas, e quando você está dentro de um laço de repetição e aciona uma URL que irá processar algo para o seu sistema em backend, porém esta execução é lenta e ir chamando via Ajax tem a particularidade de ir executando o laço de repetição até a sua finalização e mesmo que a execução do Ajax não tiver sido finalizada uma nova requisição é feita.

A principio isto não é ruim, porém, em determinados casos é possível que uma execução interfera sobre a outra devido ao fato de que podem manipular a mesma rotina interna, como acertar isto então?

Embora desde a versão 1.5 o JQuery implemente .deferred nas chamadas Ajax é possível que a alteração da sua rotina para um controle de .deferred se torne muito árduo, por isso existem soluções mais simples e que podem servir a um grande leque de situações, a solução mais simples para o processo acima é deixar a execução do Ajax via JQuery de forma síncrona, assim, uma repetição do laço só ocorre quando a requisição Ajax terminar, criando assim um fila única do processo.

Veja um exemplo:

jQuery.ajax({
 url: “/meuScript.php”, //Aqui vai a URL ou script a ser acionado
 async: false, //Aqui você define a execução como síncrona
 jsonp: false, //Controle do fluxo de retorno
 complete: function( /*coloque aqui sua instrução ao finalizar com sucesso a sua requisição*/){ }
});

Viu, muito simples, como tudo em JQuery, embora extremamente simples de se implementada a técnica acima tem um grave problema, por ser uma execução síncrona, o browser ficará congelado, o que não é nada elegante, aguardando o retorno da execução e caso outros scripts precisem se acionados eles terão que esperar a execução da chamada síncrona, não haverá modo de executa-los paralelamente.

Como resolver então?

É simples também, não deixem de acompanhar a solução assíncrona para o problema proposto.

Leia mais:

• Framework para desenvolvimento Web em PHP/JavaScript (2)
• Executando Ajax via JQuery de modo enfileirado – Parte II (1)
• Utilizando máscaras com JQuery (1)
• Utilizando JQuery para eventos do mouse (0)
• Remendo no Firefox mais atrapalha do que ajuda (1)

dicas · JavaScript · JQuery

Ultimamente tenho me divertido um bocado programando interfaces Web e para isso o conjunto HTML + CSS + JQuery (JavaScript) tem demonstrado o nível de refinamento que as interfaces Web possuem hoje, seja na caga assíncrona de dados ou puramente adicionando artefatos e efeitos visuais em tela, arrisco dizer que hoje uma interface Web pode ser mais rica que uma interface desktop e olhe que não estou me referindo ao Adobe Flash ou Microsoft Silverlight.

Uma duvida que é recorrente dos novatos e que é muito simples de resolver via JQuery é a captura da altura da tela e da altura do HTML, note que a altura do HTML pode ser maior que a altura da tela pelo simples fato que os navegadores geram barras de rolagem.

Via JQuery temos com capturar os dois casos:

$(window).height();   // Retorna a altura do view do navegador
 
$(document).height(); // Retorna a altura do HTML

Viram? Bem simples aplicando o JQuery, de posse dos valores o tratamento vai de como você quiser e precisar.

Leia mais:

• Utilizando máscaras com JQuery (1)
• Framework para desenvolvimento Web em PHP/JavaScript (2)
• Executando Ajax via JQuery de modo enfileirado – Parte II (1)
• Executando Ajax via JQuery de modo enfileirado (1)
• Conhecendo a JQuery (1)

JavaScript · JQuery

Algumas vezes temos de inserir funções JavaScript nos três eventos de mouse (onMouseOver, onMouseOut e onMouseMove) no mesmo elemento HTML.

Nem é precisa falar que são constantes os problemas de conflitos e quase sempre sofremos para equacionar nossas funções JavaScript para trabalharem atuando no mesmo elemento, em três eventos distintos do mouse sem bloquear ou atrapalhar as execuções uma das outras. Isso sem falar que muitas vezes temos problemas no JavaScript onde um browser executa o outro não ou ainda temos um comportamento alterado.

Como resolver? Simples, utilizando JQuery.

Podemos equacionar o acionamento dos três eventos de mouse de forma simples e o código JavaScript embutido dentro de cada chamada irá ser executado sem conflitar (é claro que se a execução de um atuar sobre o mesmo elemento e da mesma forma a execução mais recente irá sobrescrever a execução mais antiga). Como fica um exemplo de código:

var campoMeu = document.getElementById("campoMeu ");
 
$( campoMeu).mouseover(function(){
  //Seu código de execução aqui
 }).mousemove(function(e){
  //Seu código de execução aqui
 });
}).mouseout(function(){
 //Seu código de execução aqui
});

Viram como fica simples, basta buscar o elemento pelo seu ID e depois atribuir os eventos de mouse utilizando o JQuery.

Leia mais:

• Twitter teve cerca de 58 mil senhas vazadas (2)
• Mais um easter egg no Google (0)
• Hospedagem de sites (0)
• Ganhar dinheiro pela internet, os blogs – Parte I (0)
• Ganhar dinheir na internet (1)

dicas · internet · JQuery

Durante o ano de 2010 esteve um planejamento e execução o projeto de um Framework para desenvolvimento Web utilizando PHP e JavaScript baseado nas seguintes premissas e necessidades:

• Deixar o layout livre para qualquer tipo de desenvolvimento (seja utilizando Tableless ou não);
• Não ser tão friendly-user como o WordPress, nosso usuário irá desenvolver código e não arrastar elementos em tela. Centrar-se no poder do desenvolvimento de código, deixar o desenvolvedor, nosso público-alvo, fazer a sua mágica em PHP;
• Centrar-se no uso da JQuery como framework JavaScript para suprir todas as necessidades de crossbrowser;
• Ser livre para o desenvolvedor alterar o código-fonte do projeto e sugerir novos recursos;
• Padronizar e formatar a persistência de dados;
• Permitir que programadores e desenvolvedores iniciantes em PHP produzam sites e sistemas Web complexos;
• Facilitar a manutenção e gestão do sistema;
• Área administrava pronta, com elementos principais utilizados para gestão de sites.

Bem pessoal, está apresentado o framework iMais, que pelos testes permite reduzir em até 60% do tempo gasto no desenvolvimento de sites e sistemas Web.

Com o código-fonte aberto e livre é possível utilizar o framework com os recursos existentes e expandi-lo através de desenvolvimento próprio, de forma fácil e flexível. Mesmo utilizando o framework não existe a perda de performance, problema comumente encontra em frameworks de mercado.

Nos próximos dias estaremos liberando para download o conjunto básico, o que significa que no decorrer deste ano iremos investir tempo e recurso para que o framework cresça em termos de utilizadores e recursos, facilitando a criação de elementos Web ricos.

Vai desenvolver em PHP? Então utilize o iMais.

Leia mais:

• Executando Ajax via JQuery de modo enfileirado – Parte II (1)
• Executando Ajax via JQuery de modo enfileirado (1)
• Conhecendo a JQuery (1)
• Utilizando máscaras com JQuery (1)
• Utilizando JQuery para eventos do mouse (0)

dicas · JavaScript · JQuery · PHP · Webdesign

Imagine a seguinte necessidade, você tem um formulário HTML, e conforme o usuário vai preenchendo os dados é preciso alterar os dados dos campos seguintes desse mesmo formulário.

Essa tarefa pode ser realizada, utilizando somente PHP, porém será necessário alguns reloads no formulário que pode irritar algum usuário mais exigente e ainda teremos que criar uma série de controles para isso.

Qual a solução então?

Podemos utilizar JQuery para isso.

Como vimos nas máscaras utilizar JQuery além de simples pode deixar sua aplicação Web muito mais elegante e funcional, vamos ao exemplo.

Supondo que eu queira retornar o campo rua (que contém o nome da rua) após consultar o CEP informado pelo usuário. Começaremos pelo script HTML que gera o formulário Web. Vamos criar um div e colocar em seu id a string “retorno”.

<input type="text" name="cep" id="cep" value="<?php echo $cep; ?>" size="10" maxlength="10"  />
<input type="button" name="cCep" id="cCep"  value="Procurar" onclick="javascript:return chCEP(2, document.novoCliente.cep)"/>
 
<div id="retorno"></div>

No exemplo acima podemos observar que o botão “Procurar” dispara uma função JavaScript, o conteúdo dessa função é o seguinte:

function chPage(acao, campo){
 jQuery(function($){
  $("#retorno").load("buscaCep.php", {acao: acao, cep: campo.value} );
 });
}

Viram o pulo do gato nessa função?

Ela dispara o script PHP buscaCep.php passando duas variáveis via POST, a primeira é a variável acao e a outra cep.

Essas duas variáveis servem para que o script PHP execute uma consulta a um banco de dados qualquer e retorne HTML puro, ou seja, o seu retorno seria:

<input name="rua" id="rua" value="Rua pesquisada" />

E essa parte da função JavaScript - $(“#retorno”) - serve para indicar em qual objeto do formulário o HTML de retorno será inserido.

Viram que interessante, de uma página HTML que é na verdade um formulário HTML eu chamo e executo um script PHP e consigo inserir em tempo de execução o HTML retornado do script PHP sem a necessidade de reload em todo o formulário.

Leia mais:

• Utilizando máscaras com JQuery (1)
• Framework para desenvolvimento Web em PHP/JavaScript (2)
• Executando Ajax via JQuery de modo enfileirado – Parte II (1)
• Executando Ajax via JQuery de modo enfileirado (1)
• Descobrindo o tamanho da tela com JQuery (0)

JavaScript · JQuery

Continuando a falar das facilidades de desenvolvimento trazidas com a JQuery, vou explicar como fazer de forma simplificada como fazer máscaras utilizando a JQuery. Observem o código abaixo:

jQuery.noConflict();
jQuery(function($){
	$("#cnpj").mask("99.999.999/9999-99");
	$("#cep").mask("99.999-999");
});

Perceberam a facilidade?

Funciona da seguinte forma:

A primeira linha tem a função de evitar conflitos com outros scripts JQuery ou JavaScript puro que você possa ter na sua página.

A segunda linha iniciamos a função na sintaxe do JQuery.

A terceira linha temos o ID do nosso elemento HTML que irá receber a mascara (no caso é um text) e em seguida definimos a máscara, sem nenhum segredo, sem códigos miraculosos.

Sem mais nada.

Simples e funcional em todos os browsers modernos.

Leia mais:

• Framework para desenvolvimento Web em PHP/JavaScript (2)
• Executando Ajax via JQuery de modo enfileirado – Parte II (1)
• Executando Ajax via JQuery de modo enfileirado (1)
• Descobrindo o tamanho da tela com JQuery (0)
• Conhecendo a JQuery (1)

JavaScript · JQuery

Eu não sou muito fã de frameworks, até porque um framework pode engessar de forma desnecessária a sua aplicação e você fica dependente da ferramenta para prestar manutenção e/ou atualizar sua aplicação, porém em alguns casos temos que tirar o chapéu para um framework.

É o caso do JQuery, que é um framework para JavaScript que tem por finalidade diminuir a complexidade de desenvolvimento de software web e minimizar a incompatibilidade do código JavaScript entre navegadores, além de possuir a possibilidade de implementação segura de efeitos e CSS via adoção de plugins.

Com o JQuery podemos abranger máscaras, validações complexas em formulários até mesmo efeitos de transição entre páginas, tudo isso sem a grande preocupação de desenvolvedores JavaScript que é a compatibilidade do código-fonte entre os diversos navegadores disponíveis no mercado.

A sua instalação é simples, podemos fazer o download da versão de produção do próprio site do JQuery e depois para utilizar ele em uma página basta utilizar a seguinte linha na tag HTML header:

<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

Leia mais:

• Vídeos embebed na Web: Silverlight x Flash (0)
• HTML 5, finalmente se tornará um padrão do W3C (0)
• Framework para desenvolvimento Web em PHP/JavaScript (2)
• Adobe se borra de medo do HTML5 (0)
• A lástima do desenvolvimento de software web (0)

internet · JavaScript · JQuery · Webdesign · webdesigner