jqModal – Update (em breve)

20 08 2009

Pois é pessoal, conversando com o Guilherme Camarotto, vimos que há um problema quando se utiliza o jqModal com ajax sendo feita uma requisição à uma página aspx.

O que acontece é que ele traz os controles da outra página e, no postback, causa “invalid controls” (ou algo do gênero, não lembro o nome do erro exatamente).

A solução é simples.
Ao trazer o conteúdo, preenche-se o div de conteúdo do modal.
Ao fechar o modal, deve-se remover esse conteúdo.

Isso pode ser feito no evento click do botão que fecha, mas no caso de fechar clicando fora continua causando erro.

Nos próximos dias farei uma alteração no plugin pra solucionar esse problema.
(Tentei entrar em contato com o autor do plugin, mas os emails que envio para o email fornecido pro ele estão retornando.)

Aguardem novos releases! 😉

Por não conseguir entrar em contato com o autor do plugin e este estar licenciado sob MIT e GPL, não realizei a tal alteração.

Caso alguém encontre esse problema e precise de um help, pode me procurar.

No mais, peço desculpas por não disponibilizar esse update.

Até mais…





jqModal – jQuery – How to use

15 08 2009

Bom, pra começar a abordar também aspectos técnicos do meu dia-a-dia de trabalho, vou montar uma séria de “How to use” para plugins de jQuery.
Nesse primeiro post, vou mostrar como se implementa um Modal com Ajax da forma mais simples existente.

Primeiramente, é bom deixar claro que não gosto de fazer a mesma coisa duas vezes.
Então vamos fazer um engine (ou utilizar o do jqModal né) de Modal pra nunca mais termos que fazer isso.

Ingredientes

jQuery 1.3.2
jqModal JS
jqModal CSS

Modo de Preparo

– Junte todos os ingredientes dentro da tag head da sua página, de preferência, na ordem colocada a cima.

– Crie sua estrutura genérica de modal (o recheio).
Ela deve ser um container (particularmente, uso div)  com classe jqmWindow (a menos que vc altere no jqModal.css) e um id definido.
Dentro dela deve haver  um outro container que vai receber o conteúdo do modal, que também deve ter um id definido.

– Agora você junta a massa com o recheio.
<script type=”text/javascript”>
$(‘#id_container_principal’).jqm({ajax: ‘@href’, target: ‘#id_container_conteudo_modal’});
$(‘#id_container_principal’).jqmAddTrigger(‘a.openModal’);
</script>

Cobertura

Pronto, seu engine de modal está feito.
Pra facilitar a minha vida, coloquei isso dentro de algo reutilizável (no asp.net, dentro de um usercontrol; no asp.net mvc, dentro de um extender da classe Html; no php, em um .php separado pra dar include…).

Você adiciona isso a sua página e coloca a css class “openModal” no seus links que eles abrirão em Modal!
<a href=”http://seudominio.com/abreDentroModal.htm&#8221; class=”openModal”>Abre Dentro Modal</a>

Vantagens

– Modais não-obstrusivos
O que acontece se você clicar em um link de modal, na nossa estrutura, e o javascript estiver desabilitado?
Apenas é levado à página que seria renderizada dentro do modal

– NADA de iframes
O conteúdo do modal não é simplesmente um iframe com a página que foi solicitada.
Todo o conteúdo é lido e inserido no container de conteúdo do modal que foi definido na sua estrutura.

– NADA de kbytes a mais de conteúdo escondido
Você só traz pra página o necessário.
Um Modal é uma informação adicional, logo só é trazida ao ser solicitada pelo usuário.

– Velocidade
Se o html da página que será renderizada dentro do modal for bom, o resultado é uma renderização muito rápida, mesmo mediante ajax e etc.

Quem quiser ver funcionando em uma aplicação, acesse: http://www.minhavida.com.br/avaliacao/beleza

Lá, fiz uma alteração na renderização default do jqModal pra que sempre centralizasse o meu Modal na vertical e na horizontal.
Quem quiser essas alterações, pode roubar o js e dar uma olhada na css de lá… 😉

Até mais!