Loading no Ajax

Oi pessoal…
estou fazendo uns testes com loading usando ajax e consegui colocar a imagem em um div
document.getElementById(“divCharacters”).innerHTML = ‘<img src=“ajax-loader.gif” alt="" />’;
porem…

Eu quero colocar no evento do MOUSE… tem como??

Obrigada :wink:

Ana, vc está o usando o DWR?

…se sim…poderia usar o loading do util.js
exemplo:

&#91;head&#93;
  &#91;script&#93;
  function init&#40;&#41; &#123;
    DWRUtil.useLoadingMessage&#40;&#41;;
  &#125;
  &#91;/script&#93;
  ...
&#91;/head&#93;
&#91;body onload=&quot;init&#40;&#41;;&quot;&#93;
  ...

fonte:
http://getahead.ltd.uk/dwr/browser/util/useloadingmessage

t+

Estou tentando usar o DWR… por enquanto usei o basico msm…
Vou tentar implementar…

Vc ja usou DWR??

[]s

Ana

oi Ana!
eu uso o dwr…qdo tem ajax na aplicação… :wink:

vc está estudando ajax?

Esse artigo…(retirado do site da javamagazine)…é uma introdução ao dwr…
http://www.devmedia.com.br/visualizacomponente.aspx?comp=3284&site=6

t+

Ola Diana…

Estou comecando com Ajax… :smiley: baixei a video aula do Java Magazine…
Vamos ver se consigo fazer alguma aplicacao :smiley:

Obrigada

:grin:

Olá ana, bem vc pode fazer na mão basta entender como funciona o useLoadingMessage() , ele usa nada mais que um setPreHook e o setPostHook, lembrando que o useLoadingMessage() SÓ funciona para chamadas do DWR, caso vc queria por exemplo que ao carregar a pagina ele coloque o loading, vc terá que fazer na mão mesmo, pois ao carregar a pagina vc nao faz nenhuma chamada aos facades do DWR, por isso o useLoadingMessage não é executado.

Segue um trecho do código para um loading com DWR

/**
 * Declaração do contrutor para usar algumas funções.
 * Exemplo&#58; Ajax.useLoadingMessage&#40;&#41;;
 * @constructor
 */
function Ajax&#40;&#41; &#123; &#125;

/**
 * Função init&#40;&#41; é carregada toda vez que se usa alguma função do DWR, fazendo
 * a chamada para a função useLoadingMessage&#40;&#41; que carrega o Loading....
 * 
 * @see useLoadingMessage&#40;&#41;
 */
function initLoadingDWR&#40;&#41;
&#123;
    Ajax.useLoadingMessage&#40;&#41;;
&#125;

/**
 * Funções para testar o browser.
 */
if &#40;window.addEventListener&#41;
&#123;
    window.addEventListener&#40;&quot;load&quot;, initLoadingDWR, false&#41;;
&#125;
else if &#40;window.attachEvent&#41;
&#123;
    window.attachEvent&#40;&quot;onload&quot;, initLoadingDWR&#41;;
&#125;
else
&#123;
    window.onload = initLoadingDWR;
&#125;

/**
 * Função que carrega na tela uma imagem de Loading
 * 
 * @param &#123;Object&#125; message
 */
Ajax.useLoadingMessage = function useLoadingMessage&#40;message&#41; &#123;

  var loadingMessage;
  
  if &#40;message&#41; 
  	loadingMessage = message;
  else
  	loadingMessage = &quot;Carregando..&quot;;

    DWREngine.setPreHook&#40;function&#40;&#41; &#123;
        var disabledZone = $&#40;'disabledZone'&#41;;
        if &#40;!disabledZone&#41; &#123;
			disabledZone = document.createElement&#40;'div'&#41;;
        disabledZone.setAttribute&#40;'id', 'disabledZone'&#41;;
        disabledZone.style.position = &quot;absolute&quot;;
        disabledZone.style.zIndex = &quot;1000&quot;;
        disabledZone.style.left = &quot;0px&quot;;
        disabledZone.style.top = &quot;0px&quot;;
        disabledZone.style.width = &quot;100%&quot;;
        disabledZone.style.height = &quot;100%&quot;;
        disabledZone.style.textAlign = &quot;center&quot;;
        document.body.appendChild&#40;disabledZone&#41;;
        
		var messageZone = document.createElement&#40;'div'&#41;;
        messageZone.setAttribute&#40;'id', 'messageZone'&#41;;
        messageZone.style.margin = &quot;250px&quot;;
        messageZone.style.marginLeft = &quot;350px&quot;;
        messageZone.style.marginRight = &quot;350px&quot;;
        //messageZone.style.background = &quot;#dcedad&quot;;
        //messageZone.style.color = &quot;white&quot;;
        messageZone.style.fontFamily = &quot;Arial,Helvetica,sans-serif&quot;;
        messageZone.style.padding = &quot;4px&quot;;
        messageZone.innerHTML = &quot;&lt;img src='../imagens/aguarde_carregandoAzul.gif'/&gt;&quot;;
        disabledZone.appendChild&#40;messageZone&#41;;
        &#125; else &#123;
            $&#40;'messageZone'&#41;.innerHTML = &quot;&lt;img src='../imagens/aguarde_carregandoAzul.gif'/&gt;&quot;;
            disabledZone.style.visibility = 'visible';
        &#125;
    &#125;&#41;;

    DWREngine.setPostHook&#40;function&#40;&#41; &#123;
        $&#40;'disabledZone'&#41;.style.visibility = 'hidden';
    &#125;&#41;;
&#125;

/**
 * Variável glogal para gerar um único disabledZone
 */
var disabledZone = $&#40;'disabledZone'&#41;;

/**
 * Variável glogal para gerar um único messageZone
 */
var messageZone = document.createElement&#40;'div'&#41;;

Bem quando vc acionar QUALQUER chamada do DWR o loading será executado. Mais se você quiser chamar um loading para uma chamada que NÃO acesse um facadeAjax do dwr então veja o próximo código, que poderá estar no mesmo arquivo js que o código anterior está.

Segue o código para caso vc precise usar um loading sem ser pelo DWR.

/**
 * Função que gera o carregando da página.
 * Utilizado para qualquer página, e não necessita do DWR.
 * @param &#123;Object&#125; flag - String para abilitar se vai exibir ou retirar o carregando&#40;true = exibe / false = retira&#41;
 */
function carregandoGrafico&#40;flag&#41;&#123;
	 if&#40;flag == &quot;true&quot;&#41;&#123;
	 	 
	 	disabledZone = document.createElement&#40;'div'&#41;;
	    disabledZone.setAttribute&#40;'id', 'disabledZone'&#41;;
	    disabledZone.style.position = &quot;absolute&quot;;
	    disabledZone.style.zIndex = &quot;1000&quot;;
	    disabledZone.style.left = &quot;0px&quot;;
	    disabledZone.style.top = &quot;0px&quot;;
	    disabledZone.style.width = &quot;100%&quot;;
	    disabledZone.style.height = &quot;100%&quot;;
	    disabledZone.style.textAlign = &quot;center&quot;;
	    document.body.appendChild&#40;disabledZone&#41;;
		
	    messageZone.setAttribute&#40;'id', 'messageZone'&#41;;
	    //messageZone.style.border = &quot;1px solid black&quot;;
	    messageZone.style.margin = &quot;250px&quot;;
	    messageZone.style.marginLeft = &quot;350px&quot;;
	    messageZone.style.marginRight = &quot;350px&quot;;
	   	//messageZone.style.background = &quot;#dcedad&quot;;
	    //messageZone.style.color = &quot;white&quot;;
	    messageZone.style.fontFamily = &quot;Arial,Helvetica,sans-serif&quot;;
	    messageZone.style.padding = &quot;4px&quot;;
	    messageZone.innerHTML = &quot;&lt;img src='../imagens/aguarde_carregandoAzul.gif'/&gt;&quot;;
	    disabledZone.appendChild&#40;messageZone&#41;;
	 &#125;else&#123;
		disabledZone.style.visibility = &quot;hidden&quot;;
	 &#125;
	
&#125;

JSP

script type=&quot;text/javascript&quot;&gt;
		function carrega&#40;&#41;&#123;
			setTimeout&#40;function&#40;&#41;&#123; parent.carregandoGrafico&#40;&quot;false&quot;&#41;; &#125;,1000&#41;;
		&#125;
	/script&gt;

body onload=&quot;carrega&#40;&#41;;&quot;&gt;......

Bem parece até uma gambi esse último, mais como tá bem simples e enxuto, nao o vejo assim, sem faler que é bem facil de entender o que ele ta fazendo e fácil implementação…

Só para dica de informação :wink:

Qualquer coisa acessa os artigos na Java Magazine que fiz…esse que a diana passou e já tem outros lá, inclusive vídeo aulas…

Abraços e boa sorte…qualquer coisa posta no meu blog ou me envia um email que eu respondo e ajudo no que for necessário. :wink:

www.handersonfrota.com.br