Ajax evento

E ai galera tudo bom?

Estou fazendo uns testes com mootools pra fazer uns sistemas e me deparei com um problema seguinte esse código abaixo funciona perfeitamente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript">
	  window.addEvent('domready', function() {
		$('myForm').addEvent('submit', function(e) {

			e.stop();

			var log = $('log_res').empty().addClass('ajax-loading');

			this.set('send', {onComplete: function(response) { 
				log.removeClass('ajax-loading');
				log.set('html', response);
			}});
			this.send();
		});
	});
	</script>
	<title>teste</title>
</head>
<body>
	<form id="myForm" action="resposta.html" method="post">
	  <input type="submit" value="enviar" />
	</form>

	<h1>teste envio</h1>
	
	<div id="log">
		<h3>Ajax Resposta</h3>
		<div id="log_res"></div>
	</div>
</body>
</html>

Quando clico no enviar do formulário ele dispara o javascript "mascarando" o postback e carrega na minha div "log_res" o valor que está na minha resposta.html , só tem texto e html msm, e funciona perfeitamente só que queria modificar esse exemplo para invês de um formulário com submit ser um link, pelo que li na documentação isso é possivel apenas mudando o evento que está sendo acionado no caso fiz assim:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="demo.css" type="text/css" />
	<script type="text/javascript" src="mootools.js"></script>
	<script type="text/javascript">
	  window.addEvent('domready', function() {
		$('meuLink').addEvent('click', function(e) {

			e.stop();

			var log = $('log_res').empty().addClass('ajax-loading');

			this.set('send', {onComplete: function(response) { 
				log.removeClass('ajax-loading');
				log.set('html', response);
			}});
			this.send();
		});
	});
	</script>
	<title>teste</title>
</head>
<body>
<a id="meuLink" href="resposta.html">clique aqui</a>

	<h1>teste envio</h1>
	
	<div id="log">
		<h3>Ajax Resposta</h3>
		<div id="log_res"></div>
	</div>
</body>
</html>

Só que ai ele fica no loading eterno e não carrega o arquivo html na div que eu quero, tentei modificar algumas coisas porém não deu certo, tentei tirar o loading mas ai da errado, tentei tirar o e.stop(); só que ai ele vai pra página do link e não é isso que eu quero quero o mesmo efeito do primeiro exemplo que é carregar uma outra página dentro de uma div sem o "postback" aparecerendo, se alguém puder me ajudar ficarei muito grato....valeu

Ops!

Imagino que esse que esse método “send” que você está usando seja somente de formulários, mas não tenho certeza.

tenta algo assim:

window.addEvent('domready', function(){

	$('meuLink').addEvent('click', function(e){
		
		e.stop();
		
		var destino = $('log'); //ou qualquer outro lugar que vc deseja colocar o resultado
		
		var ajax = new Request.HTML({
		
			url : this.get('href'), //ou qualquer outra página html
			
			onRequest: function(){
				//faz o que vc quiser durante o carregamento
			},
			
			onComplete:function(){
				//faz mais alguma outra coisa quando completar			
			},
			
			update: destino
		});
		
		ajax.get();
		
	}.bind(this));

});

nao testei o código, mas a idéia é essa…

lembrando que isso é Mootools 1.2
veja a documentação…

http://mootools.net/docs/Request/Request
http://mootools.net/docs/Request/Request.HTML

tem mais vários métodos e opções pra essa classe, da pra fazer muita coisa!

3 Respostas

Topicos relacionados