School of Net

Evolua constantemente, Online

Membros SON


Dojo: Usando Ajax, fade out e fade in -

Desenvolvimento — Tags: , , — Wesley Willians @ 11:26

Esse post vai mostrar uma função muito simples utilizando o DojoToolkit e também é totalmente integrável com qualquer framework, principalmente com o Zend.

Atualmente muitos procuram tutoriais de Dojo na internet e acabam se deparando que os mesmos não funcionam. Na realidade, a maioria dos tutoriais mostram exemplos da versão <= 0.9 e quando baixamos no site ficamos com a 1.1.

Segue abaixo uma simples função abstrata, para executar uma operação com ajax, enviando dados de um formulário, e ainda pega o resultado e o coloca dentro de uma “div” em formato HTML.

Arquivo HTML:




Arquivo JS:

dojo.xhrPost( {
// Essa URL fará uma requisição com o servidor
url: url,
handleAs: "text",
form: form,
timeout: 5000, // Tempo em milisegundos

// Função que será carregada quando a operação por realizada.
load: function(response, ioArgs) {
dojo.fadeOut({
node: box,
onEnd: function(){
// seta os dados e fade back in
dojo.byId(box).innerHTML = response;
dojo.fadeIn({node: box}).play();
}
}).play();
return response;
},
// Função que será executada caso haja algum erro.
error: function(response, ioArgs) {
console.error("HTTP status code: ", ioArgs.xhr.status);
return response;
}
});
}

A principal mudança da versão 0.9 em relação a 1.1 (sobre Ajax) foi de que antes a utilização de ajax era devida a classe dojo.io.bind que hoje foi substituida por dojo.io.script e os principais métodos de chamada são:

  • dojo.xhrPost (método POST)
  • dojo.xhrGET (método GET)

Qualquer dúvida, fiquem a vontade para comentar.


3 Comentários »

  1. Vesley, ficaria bem legal se ao fazer esses tipos de post você colocar um exemplo… :D

    Comentário by Ronildo Costa — 07/08/2008 @ 11:51

  2. Roni,
    Em breve vamos postar TUDO no pub.schoolofnet.com.
    O grande ponto é que como estamos usando o Zend Framework como base há uma série de arquivos para configurar e desfocaria bastante…
    Estamos preparando bastante coisa de tudo que estamos falando aqui no Blog também em nosso eCampus, que também vai tratar do desenvolvimento dos projetos do ZERO (passo-a-passo).
    Abraços e obrigado pela sugestão

    Comentário by Wesley — 07/08/2008 @ 11:57

  3. Wes,
    Não tem um exemplo desse Fade in Fade out?

    Comentário by Thiago — 07/08/2008 @ 12:24

Feed RSS para comentários sobre este post. TrackBack URL


Deixe um comentário