Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

dinhografo

[Resolvido] Problemas serios ao utilizar $.ajax() do Jquery

Recommended Posts

Já tentei de N maneiras utilizar o método $.ajax() do jQury, infelizmente sem sucesso, pois ao executá-lo a pag2.html que tem apenas tags simples(h1, h2 e p) é carregada da div#resultado como uma página completa(desde o 1º html até o /html), ou seja o site é carregado todinho na #resultado. Por que isso acontece? Lembro que com o método load() também ocorre isso porém o load() tem a opção de restringir o conteúdo de uma div por exemplo, tem como fazer isso com o $.ajax()?

já tentei usando this.append(data), this.html(data), this.text(data) e até refiz a função usando o .live() mas não obtive sucesso. Não dá erro algum no console do Chrome e do FF e por mais incrivel que pareça depois que eu comecei a usar o .live() ficou funcionando até os links e outros códigos da jQuery de dentro das páginas, porem o fato de sempre carregar todo o html dentro da div além de estragar o layout torna o código muito lento.

Eu uso a vesão 1.6.4 do jQuery.

 

Segue os códigos de que eu usei para os testes:

 

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página de teste</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
os códigos testados estão abaixo
});
</script>
<style type="text/css">
body {font:normal 12px Arial, Helvetica, sans-serif; color:#333333;}
#menuzinho, h1, h2 {text-align: center;}
#conteudo {text-align:justify;}
h1 {color:#FF9900;}
h2 {color:#CC6600;}
h3 {font-weight:normal;}
h3 strong.lista {font-weight:bold;}
p {color:#0099FF;}
ul {list-style:none}
ul li {display:inline; margin: 0 10px ;}
ul li a {color:#996600; font-weight:bold;}
ul li a {color: #FF9900;}
</style>
</head>
<body>
<div id="menuzinho">
   <ul>
   <li><a href="?pagina=home.php">Principal</a></li>
   <li><a href="?pagina=pag2.php">Página 2</a></li>
   <li><a href="?pagina=pag2.html">Página HTML</a></li>
   </ul>
</div>
<div id="conteudo">
  <?php 
  	if(!$pagina){
		include('home.php');
	}else{
		include($pagina);
	}
  ?>
</div>
</body>
</html>

 

home.php, pag2.php e pag2.html, só mudei o H1 e h2 de cada página

<h1>Home</h1>
<h2>Página Home</h2>
<?php echo "<h3>O valor de $pagina é: <strong class=\"lista\">".$_GET['pagina']."</strong></h3>";?>
<p>Meu conteúdo vai ficar todo aqui! Meu conteúdo vai ficar todo aqui! Meu   conteúdo vai ficar todo aqui! Meu conteúdo vai ficar todo aqui! Meu conteúdo vai   ficar todo aqui! Meu conteúdo vai ficar todo aqui! Meu conteúdo vai ficar todo   aqui! Meu conteúdo vai ficar todo aqui! Meu conteúdo vai ficar todo aqui! Meu   conteúdo vai ficar todo aqui! </p>

 

Codigo 1
$("a").live('click', function(event) {
 	event.preventDefault();
$.ajax({
               //pegando a url apartir do href do link
	url: $(this).attr("href"),
	type: 'GET',
	context: jQuery('#conteudo'),
	success: function(data){
		this.html(data);
	}
});
});
Codigo 2
var conteudo = $('#conteudo');   
$('a').live('click', function( e ){  
   	e.preventDefault();   
       var links = $( this ).attr('href');
	//alert ( links );
       $.ajax({  
		url: links,
		dataType: 'html',
		success: function( response ){ 
			conteudo.html( response );
			console.log(response);
		},
		error: function(response){
			console.log(response);
			if ( response.status == 404 ) {
				conteudo.html('Houve um erro: ' + response.status + ' ' + response.statusText);
			}else if ( response.status == 403 ) {
				conteudo.html('Sem permissão para acessar o arquivo.');
			}else{
				conteudo.html('Erro: ' + response.status + ' - ' + response.statusText+ ' ao tentar acessar');
			}
		}
	});
});
Codigo 3
$('a').click(function(){
   $.ajax({
   //url que enviaremos
       url : $( this ).attr('href'),    
   //aqui colocamos o callback na div #retorno
       success : function(retorno){
           $(#conteudo).html(retorno);
       },
   //veja se teve erros
       error : function(retorno){
           console.log(retorno);
       }
   });
});

Codigo de exemplo da api com algumas modificações
$.ajax({
 url: $( this ).attr('href'),
 context: $(#conteudo),
 success: function(){
   $(this).html();
 }
});

 

Alguém sabe o(s) motivos e principalmente a solução para esses problemas?

Desde já eu agradeço!

Compartilhar este post


Link para o post
Compartilhar em outros sites
porém o load() tem a opção de restringir o conteúdo de uma div por exemplo, tem como fazer isso com o $.ajax()?

tem como sim cara. Ai você usa o otimo parser de HTML q o core do jQuery possui.

http://wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

 

note o trecho:

//forçando o parser  
var data = $( '<div>'+response+'</div>' ).find('#content').html();

este é o arquivalente para o:

$("#content").load( href +" #content");

 

 

entendeu? :lol:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, se eu te disser que eu copiei este teu código 3 vezes e não consegui fazer funciona,r tu vais até dizer que é mentira minha, porem agora com um comidinha boa na barriga percebi que eu troquei 3 vezes a

var content = $('#content');

para

var content = $('#conteudo');

e não troquei a

var data = $( '<div>'+response+'</div>' ).find('#content').html();

para

var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();

 

Agora sim tá funfando que uma loucura e tá bonito viu, vou dar uma adaptada para as minhas necessidades reais e posto aqui assim que possivel. Por enquanto vou dormir um pouco.

 

Veleu mesmo pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom com a cabeça mais traquila eu coletei outros tutoriais e montei esse script que resolve uma boa parte dos meus problemas.

 

$(document).ready(function(){  
       var content = $('#conteudo');
       $('a').live('click', function( e ){  
           e.preventDefault();
    //Em http://www.ajaxload.info/ se pode gerar uns loadings legais
    var loading = $('<img />', {src: 'loader.gif', id: 'loading'}).css('margin','0 46%');  
           var href = $( this ).attr('href');
           $.ajax({  
               url: href,                
	beforeSend : function(){//Chama o loading antes do carregamento
	    content.html( loading ).fadeIn('fast');
	},
	complete : function(){//Desaparece com o loading após o carregamento
	    loading.fadeOut(4000);
	},
	success: function( response ){  
                   //forçando o parser  
                   var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();   
                   //apenas atrasando a troca, para mostrarmos o loading  
                   window.setTimeout( function(){
                      content.html( data ).fadeIn();  
                   }, 3000 );  

               },
	statusCode: {
	    404: function() {
		content.html('A Página Não Foi Encontrada<br /> Erro: ' + response.status + ' ' + response.statusText);
	    }
	} 
           });   
       });  
});

 

Como dito acima isso resolve a parte de GET, mas, ainda falta o POST, mais uma judinha por aí? hehehehe.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Achei para o POST

$('.botform').live('click', function( e ){  
e.preventDefault();
var valores = $(this).parent("form").serialize()//o serialize retorna uma string pronta para ser enviada
console.log(valores);//remover para IE que não tem Console
$.ajax({
	url : $(this).parent("form").attr("action"),
	type: 'post',
	dataType : 'html',
	data: valores,
	beforeSend : function(){//Chama o loading antes do carregamento
	content.html( loading ).fadeIn('fast');
	},
	complete : function(){//Desaparece com o loading após o carregamento
			loading.fadeOut(1000);
	},
	success : function(pre){
		loading.fadeOut(4000);
		var data = $( '<div>'+pre+'</div>' ).find('#conteudo').html();
		content.html( data ).fadeIn();					
	},
	error : function(response){
	console.log(response);
		if ( response.status == 404 ) {
			content.html('A Página Não Foi Encontrada<br /> Erro: ' + response.status + ' ' + response.statusText);
		} else if( response.status == 403 ){
			content.html('Você Não Tem Permissão Para Acessar Esta Página <br /> Erro: ' + response.status + ' ' + response.statusText);	
		} else {
			content.html('Houve um erro desconhecido entre em contato com o administrador.' + response.status + ' ' + retorno.statusText);
		}
	} 
});    
});

Recupere os posts com

<?php
if(strtoupper($_SERVER["REQUEST_METHOD"]) == "POST"){
foreach($_POST as $key => $valor){
		echo "<p>$key: ".utf8_decode($valor)."</p>";//utf8_decode($valor) é preciso para decodificar os acentos vindos do form
}
}
?>

Referências das adaptações:

Navegação sem refresh – carregando conteúdo com ajax em div 2

http://wbruno.com.br/blog/2011/05/27/navegacao-sem-refresh-%E2%80%93-carregando-conteudo-ajax-em-div-2/

 

Ajax e Formulários

http://tutsmais.com.br/blog/2011/ajax-e-formularios-pegar-dados-de-input/

 

Criando variáveis dinâmicas em PHP a partir de um formulário(PHP)

http://www.vivaolinux.com.br/dica/Criando-variaveis-dinamicas-em-PHP-a-partir-de-um-formulario

 

Obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

Agora eu me enrasquei numa coisinha aqui.

Eu tenho um form com o Uploadify que eu deixei na pagina php 'galeria.php' porque eu preciso receber parametros vindos da base de dados e ele não funciona de jeito nenhum.

Segue o código:

<!--Essa inclusão do 'jquery-1.6.4.min.js' tá na index.php-->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

<script type="text/javascript" src="app/uploadify3/swfobject.js"></script>
<script type="text/javascript" src="app/uploadify3/jquery.uploadify.v2.1.4.min.js"></script>
<script type="text/javascript">
$('#file_upload').uploadify({
'uploader'  	: 'app/uploadify/uploadify.swf',
'script'    	: 'galeria.php',
'cancelImg' 	: 'app/uploadify/cancel.png',
'folder'    	: '<?=$galeria->getFotos()?>',
'fileExt'   	: '*.jpg',
'sizeLimit' 	: 2048000,
'buttonText'	: 'Buscar Imagens',
'multi'     	: true,
'fileDesc'  	: 'Apenas Imagens ( jpg e jpeg )'
});
</script>
<form method="get" action="galeria/Fotos/<?=$get[3]?>" enctype="multipart/form-data">
  <input id="file_upload" name="file_upload" type="file" />
  <input class="botform" type="image" value="<?=$get[2]?>" src="imagens/frmAdicionar.png" alt="<?=$get[2]?>" /> 
  <a href="javascript:$('#file_upload').uploadifyUpload();">Subir Imagens Para Galeria</a><br />
</form>

 

Antes da implementação do ajax com a jQuerytava tudo funcionando beleza e agora, puff!

Alguma idéia de como eu posso fazer isso funcionar

Compartilhar este post


Link para o post
Compartilhar em outros sites

não traga tags scripts com ajax.

 

e só atrele o plugin depois de trazer o html.

Mais ou menos isso aqui:

http://wbruno.com.br/blog/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso eu já tinha visto enquanto eu tava lendo a respeito do $.ajax().

Minha duvida continua sendo como recuperar os parametros vindos do banco com php pois eu já tenho um GET(que é enviado e recuperado via $.ajax()) que define através de uma busca na base de dados pelo parametro (ex: ?pagina=galeria.php&id=1), e que por sua vez me retorna a que galeria(pasta) as imagens serão upadas "'folder': '<?=$galeria->getFotos()?>'" e que em seguida salva os devidos links para as imagens também na base de dados.

 

Eu já havia pensado em ao invés de buscar pelo "id" buscar direto pela pasta daí daria pra eu passar o parametro da galeria direto pela url, assim:

?pagina=galeria.php&fotos=pasta_da_galeria

'folder': '<?=$_GET['fotos']?>'

 

Porém isso anularia um construtor de imagem que eu uso para que o caminho da imagem não seja mostrado nem na sua propriedade requerida pelo browser tipo(?pagina=mostra.php&foto=minha_imagem.jpg) pois o caminho real dela eu deixo no mostra.php, e fazendo essa busca por $_GET['fotos'] praticamente seria o mesmo que dizer para todo mundo qual é a pasta da galeria no servidor.

E por final ainda tem o fato de o Uploadify fazer tambem um requisição assicrona do script que faz o upload "script':'galeria.php'" e outros efeitos visuais do tipo aparecer o nome das imagens em divs antes do upload e fazer as divs irem sumindo após o upload completo de cada imagem.

 

Vou ir tentando por aqui, mas tá muito difício!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom eu até consegui fazer funcionar com esse código

$('a.galeria').live('click',function(e){
		e.preventDefault();
		var lnk = $(this).attr("href");
		$.ajax({
			url : lnk,
			success:function(response){
				function upIfy(){						
				var pasta = $(":input[type=hidden]").attr("name");
				//alert(pasta);
					$('#file_upload').uploadify({
						'uploader'  	: 'uploadify/uploadify.swf',
						'script'    	: 'uploadify/uploadify.php',
						'cancelImg' 	: 'uploadify/cancel.png',
						'folder'    	: 'ups/'+pasta+'',
						'fileExt'   	: '*.jpg',
						'sizeLimit' 	: 2048000,
						'buttonText'	: 'Buscar Imagens',
						'multi'     	: true,
						'fileDesc'  	: 'Apenas Imagens ( jpg e jpeg )'
					});						
				};
				var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();
				conteudo.html(data);
				conteudo.html(upIfy());
			}
		});
});

 

Repare o conteudo.html(data) e conteudo.html(upIfy()), esta foi a unica forma fazer funcionar, pois, a lógica seria conteudo.html(data,function(){$('#file_upload').uploadify....}) não funfa, até criei a upIfy() para tentar melhorar a visualização do código, talvez seja algo necessário por causa do var data = $( '<div>'+response+'</div>' ).find('#conteudo').html(), e eu disse em $('a.galeria').live.... que eu só quero que isso retorne se o <a href="?pagina=galeria.php&id=1>" class="galeria">Galeria</a> for clicado, e por fim em var pasta = $(":input[type=hidden]").attr("name") eu tive que recuperar um <input type="hidden"... que eu criei no form para conseguir recuperá-lo com javascript.

Compartilhar este post


Link para o post
Compartilhar em outros sites

hum... eu tinha em mente algo mais assim:

 

                            success:function(response){
                                       var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();
                                       conteudo.html(data);


                                       var pasta = $(":input[type=hidden]").attr("name");
                                       //alert(pasta);
                                       $('#file_upload').uploadify({
                                                       'uploader'      : 'uploadify/uploadify.swf',
                                                       'script'        : 'uploadify/uploadify.php',
                                                       'cancelImg'     : 'uploadify/cancel.png',
                                                       'folder'        : 'ups/'+pasta+'',
                                                       'fileExt'       : '*.jpg',
                                                       'sizeLimit'     : 2048000,
                                                       'buttonText'    : 'Buscar Imagens',
                                                       'multi'         : true,
                                                       'fileDesc'      : 'Apenas Imagens ( jpg e jpeg )'
                                       });                                             
                            }

em ordem mesmo.

 

primeiro coloco o html no lugar dele, e em seguida faço o instanciamento do plugin.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara na verdade essa foi uma das minhas primeiras tentativas, até tentei novamente agora pra ver se eu não tinha feito algo errado, mas não obtive sucesso.

 

Tentei assim também:

var data = $( '<div>'+response+upIfy()+'</div>' ).find('#conteudo').html();

var data = $( '<div>'+response+'</div>' ).find('#conteudo').html(upIfy());

E várias outras que eu nem faço idéia como eu organizei o código, a maioria não retornava erro algum no console, porém, só da forma que eu citei em cima que funcionou perfeita.

 

Só esqueci de dizer anteriormente que eu mudei também a classe dos links e o código do 1º $('a').live... para $('a.link').live... para não fazer 2 requisoções (de $('a') e $('a.galeria')), e as funções beforeSend: e complete: que eu implementei atravéz de $.ajaxSetup() não sejam executadas novamente, caso contrário o botão de upload aparece e desaparece como se fosse o loading, mas isso só se aplica a mim e a quem fizer uso do método $.ajaxSetup().

 

Só mais uma coisinha!

Como fazer para que o jQuery preserve a página carregada por $.ajax() quando o usuário apertar F5(atualizar/refresh)?

 

Valeu pela ajuda

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu achei em:

http://forum.imasters.com.br/topic/368508-eventos-com-jquery/

 

Adaptei um pouquinho e o código e ficou:

$('html').keydown(function(e){
if(e.which == 116){
	var caminho = $('a').attr('href');
	console.log('Voce Apertou a tecla numero: '+e.which+' - '+caminho+'');
	return false;
}
});

 

Agora é que é, pois eu não tô conseguindo o mudar a variável "caminho", ela sempre grava o link da primeira página(home.php nesse caso) e mesmo que eu clique em outros links ou acesse outra página pelo endereço no browser o resultado é sempre "home.php".

 

Alguma idéia de como eu posso mudar isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites
$('a').click(function( event ){
   event.preventDefault();


   var caminho = $this.attr('href');
   console.log( 'O valor de caminho agora é: '+caminho );


});

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estamos quase lá. Com o código abaixo eu já consigo inserir via ajax as páginas, e ao apertar a tecla F5 ele mostra no console a mensagem com o comando console.log( 'O valor de caminho agora é: '+href ). O comando "return false" desabilita a função de atualizar da tecla F5.

$('a').live('click', function( e ){ 
e.preventDefault();
var href = $( this ).attr('href');

$.ajax({
	url: href,
	success: function( response ){  
		var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();
		window.setTimeout( function(){
			conteudo.html(data);
			conteudo.html(function () {
				var caminho = href;
				$('a').keydown(function (e){
					if(e.which == 116){
						console.log( 'O valor de caminho agora é: '+caminho );
						return false;
					}
				});							
			});
		}, 1000 );                     
	}
});  
});

O problema agora é que se eu clicar em um e depois em outro link ao apertar F5 o console.log( 'O valor de caminho agora é: '+href ) me retorna os o dois últimos links clicados

O valor de caminho agora : home.php

O valor de caminho agora : pag2.php

Se eu clicas em 3 links o console me retorna os 3 ultimos

O valor de caminho agora : home.php

O valor de caminho agora : pag2.php

O valor de caminho agora : pag3.php

E assim por diante.

Como eu faço para retornar apenas o ultimo?

Pois a intenção é utilizar window.location() ao invéz de console.log() e atualizar para a mesma página sem dar refresh.

Compartilhar este post


Link para o post
Compartilhar em outros sites

não não cara... assim é mais difícil..

 

 

você pode deixar o cara dar F5, se trabalhar com a hash lá na url.

 

note que isso aqui:

$('a').keydown(function (e){
    if(e.which == 116){

não deveria estar dentro da chamada ajax, e muito menos dentro do a.live(), é por esse motivo q está multiplicando cada vez q você chama.

 

coloque isso fora, é uma outra rotina, com outro evento.(pode até usar o live nela, mas não colocar isso dentro do ajax como você fez).

Compartilhar este post


Link para o post
Compartilhar em outros sites

Êêêê complicação:

$('a').keydown(function (e){
var caminho = $(this).attr('href');
if(e.which == 116){
	console.log('O valor de caminho agora é: ' + caminho );
	$(this).click();
	return false;
}		
});
var conteudo = $('#conteudo');
$('a.link').live('click', function( e ){  
e.preventDefault();
var href = $( this ).attr('href');
$.ajax({
	url: href,
	success: function( response ){  
		var data = $( '<div>'+response+'</div>' ).find('#conteudo').html();
		window.setTimeout( function(){
			conteudo.html(data);
		}, 1000 );                     
	}				
});  
});

O código acima tá funcionando diretinho ao seu propósito.

Se F5 foi teclada o código gera uma mensagem ao console, simula um clique real ao navegador(assim se pode usar a função $.ajax) e diz que não quer que o refresh seja dado.

 

Problema: Ele só tá funcionando no FF, no Chrome e no IE8 nada feito.(o $.ajax() tá normal)

Mais uma vez uma ajudinha se for possível. Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

if(e.keyCode == 116){

 

só que eu acredito que você deve disparar esse keyDown no documento, e não no a.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei, testei e retestei vários códigos sem sucesso algum, e a única informação que realmente foi útil foi a de que o keyCode é cros-browser.

minha função ficou funcionando no FF, IE e Chrome.

 

$('html').keydown(function (e) {
if(e.keyCode == 116){
	console.log('O valor teclado é: ' + e.keyCode);
}
});

Porém o seletor tem que ser genérico($('*'), $('html') e $('body')) para o IE e Chrome, para o FF pode ser um $('a') que ele roda sem bronca menos com o seletor $('body').

Mas ainda assim, eu não faço a menor idéia de como eu recupero o link que foi clicado?

Caramba da coisa xata nem na documentação da api tem nada de relevante.

Compartilhar este post


Link para o post
Compartilhar em outros sites

cara... a melhor estratégia que eu conheço, para o cara navegar no teu site.

ai ele aperta F5, e tem q carregar a página em que estava antes é usar a hash na URL.

 

Ou então, imagina que ele quer enviar uma página interna para um amigo.. isso só vai ser possível se você fizer com hash.

Que seria o script que fiz aqui:

http://wbruno.com.br/blog/2011/03/11/carregando-conteudo-com-ajax-trocando-url/

 

 

ele troca a URL, percebeu ?

basta implementar esse comportamento com que você já tem.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara assim, sem querer de qualquer forma menospresar a tua ajuda, esse teu script não vai me ajudar muito, pq de javascript eu só sei o basicão pra não me afundar(tipo nadar estilo cachorrinho), já de ajax aí é q eu me ferro de verde e amarelo, mesmo pq quando eu tava saindo do javascript puro pro ajax, me apareceu na vida o jQuery e eu abracei ele(linguajar mais fácil, muita coisa pronta pra usar, ...).

 

Como eu falei anteriormente (pouco de javascript e quase nada de ajax), eu vou ter que implementar uma POG e usar uma vaiável do php mesmo em um velho e bom window.location pra suprir essa minha necessidade que eu já tô ficando com o prazo apertado.

 

Fiz umas melhorias nesses scripts que funcionaram e o código tá bem enxuto e eu vou ver se consigo enxugar mais um pouco, depois eu vou comentar as linhas e postar em um novo tópico pra galela se valer melhor do código.

 

Obrigado pela sua paciência, e parabéns por partilhar seus conecimentos, em verdade eu digo, parei de portar duvidas aqui no imasters por que os moderadores ou não sabiam de nada ou não tinham a menor vontade de ajudar, mas vejo que isso mudou.

 

Mais uma vez obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.