Ir para conteúdo

POWERED BY:

Arquivado

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

Matias Rezende

[Resolvido] Problemas com Post e carregamento infinito

Por , em Javascript

Recommended Posts

Matias Rezende    50

Matias Rezende
Postado

Fala galera, tudo certo?

 

Estou com um problema já faz algum tempo. Vejam em funcionamento:

 

Clique aqui

 

Utilizando o IE (6, 7 ou 8) ocorre um problema, que não ocorre com nenhum outro dos principais navegadores (Chrome, Firefox, Opera e Safari).

 

Ao navegar por qualquer página, tudo funciona normal, menos quando enviamos qualquer formulário (de qualquer página). A partir daí, nenhuma página mais é aberta (fica o icone do loading e não termina nunca). O js utilizado é este:

 

$(document).ready(function(){
	$("#content").css({minHeight: '399px'});
	
	// abrindo os links do paginador dos imóveis
	setClick();
	setClickBuscaCompleta();
	setClickGaleria();
	
	// links do topo
	$('#header ul li a, div#topBar a').live('click', function( e ){
		e.preventDefault();
		
		$("#content").html( '' );
		$("#content").append( set_loading( 'img/layout/loading_small.gif' ) );
		
		var href = $( this ).attr('href');
		$.ajax({
			url: href,
			success: function( data ){
				var right_html = $( data ).find('#rightContent').html();
				var rightContent = set_rightContent( right_html );
				var src = $( data ).find('#content').find('img').attr('src');
				var img = set_img( src );				

				img.onload = function()
				{
					$("#ico-loading").remove();
					
					$("#content").append( img );
					$("#content img").animate({opacity: '1'}, 1000);
					
					window.setTimeout( function(){				
						$("#content").append( rightContent );
						$("#rightContent").animate({marginLeft: '400px'}, 1400);
					}, 900 );
				};
			}
		});
		return false;
	});
	
	// envio de formulário
	$("input[type='submit']").live('click', function(){
		var form = $( this ).parents().filter('form');
		$.ajax({
			url: $( form ).attr('action'),
			type: 'POST', 
			data: $( form ).serialize(),
			success: function( data ){
				$("#content").html( data );
				
				// fechando o lightbox da busca completa
				parent.$.fancybox.close();
			},
			dataType: 'html'
		});
		return false;
	});
	
	
	$("#slide").css({
		position: 'relative',
		height: '680px',
		overflow: 'hidden'
	});
	
	$("#slide li").css({
		position: 'absolute',
		top: '0',
		height: '680px',
		left: '0'
	});
	$(".destaqueContent").css({top: '-110px'});
	
	$("#slide li").eq( i-1 ).fadeIn(2000, function(){

		$("#slide li .destaqueContent").eq( i-1 ).animate({top: '0'},2000);

	});

	window.setTimeout( 'troca()', 6000 );
});
var i = 1;

function troca() {
	i++;
	$("#slide li").eq( i-1 ).fadeIn(2000, function(){
		$("#slide li .destaqueContent").eq( i-1 ).animate({top: '0'},2000);
	});
	$("#slide li").not( $("#slide li").eq( i-1 ) ).fadeOut(1500 , function(){
		$("#slide li .destaqueContent").animate({top: '-90px'},1000, function(){
		});
	});
	
	if( ($("#slide li").length) == i ) i=0;
	
	window.setTimeout( 'troca()', 8000 );
}

function set_img( src ) {
	var img = document.createElement('img');
	
	$( img ).attr({src: src});
	$( img ).css({opacity: '0'});
	
	return img;
}

function set_rightContent( text ) {
	var rightContent = document.createElement('div');
	$( rightContent ).attr({id: 'rightContent'});
	$( rightContent ).css({
			overflow: 'hidden',
			marginLeft: '1080px'
		});
	$( rightContent ).append( text );
	return rightContent;
}

function set_loading( src ) {
	var loading = new Image();
	$( loading ).attr({src: src, id: 'ico-loading'});
	$( loading ).css({
		display: 'block',
		margin: '30px auto 0 auto'
	});
	return loading;
}
/**
 * Função que cria o click para o fancybox da busca completa
 * 
 * @return void()
 */
function setClickBuscaCompleta() {
	$("#buscaCompleta").fancybox({
		ajax : {
		    type : "POST",
		    href : $( '#buscaCompleta' ).attr('href')
		}
	});
}

/**
 * Função que cria o click para o fancybox da galeria de imagens
 * 
 * @return void()
 */
function setClickGaleria() {
	$("#imagens a").fancybox();
}

/**
 * Função que cria o click para a paginação, para a exibição do imóvel e para o botão voltar 
 * 
 * @return void()
 */
function setClick() {
	$("#paginator a, ul#imoveis a, a.voltar, ul#ultimosVistos a, ul#slide a").live('click', (function( e ){
		e.preventDefault();
		
		$("#content").html( '' );
		$("#content").append( set_loading( 'img/layout/loading_small.gif' ) );
		
		$.ajax({
			url: $( this ).attr('href'),
			success: function( data ){
				$("#content").html( data );
			}
		});
		return false;
	}));
}

Alguém já viu algo assim acontecer? Alguma sugestão?

 

Obrigado a todos

 

Carlos Eduardo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matias Rezende    50

Matias Rezende
Postado

Galera, tinha 2 problemas. Um deles era no Javascript, o outro era na montagem do HTML dos formulários.

 

A parte do Javascript:

 

img.onload = function()
Não sei porque, mas o IE não entrava neste function de jeito nenhum. Como todo o processo ficava dentro deste function, então não fazia nada... Tirei tudo de dentro deste img.onload e funcionou!!!

 

Então, o JS ficou assim (li umas coisas sobre cache, então coloquei também uma opção para não fazer cache das requisições):

$(document).ready(function(){
	$("#content").css({minHeight: '399px'});
	
	// abrindo os links do paginador dos imóveis
	setClick();
	setClickBuscaCompleta();
	setClickGaleria();
	
	// links do topo
	$('#header ul li a, div#topBar a').live('click', function( e ){
		e.preventDefault();
		
		$("#content").html( '' );
		$("#content").append( set_loading( '../img/layout/loading_small.gif' ) );
		
		var href = $( this ).attr('href');
		$.ajax({
			url: href,
			cache: false,
			success: function( data ){
				var right_html = $( data ).find('#rightContent').html();
				var rightContent = set_rightContent( right_html );
				var src = $( data ).find('#content').find('img').attr('src');
				var img = set_img( src );			
				
				$("#ico-loading").remove();
				$("#content").append( img );
				$("#content img").animate({opacity: '1'}, 1000);
				
				window.setTimeout( function(){				
					$("#content").append( rightContent );
					$("#rightContent").animate({marginLeft: '400px'}, 1400);
				}, 900 );
				
			}
		});
		return false;
	});
	
	// envio de formulário
	$("input[type='submit']").live('click', function(){
		var form = $( this ).parents().filter('form');
		$.ajax({
			url: $( form ).attr('action'),
			type: 'POST', 
			cache: false,
			data: $( form ).serialize(),
			success: function( data ){
				$("#content").html( data );
				
				// fechando o lightbox da busca completa
				parent.$.fancybox.close();
			},
			dataType: 'html'
		});
		return false;
	});
	
	
	$("#slide").css({
		position: 'relative',
		height: '680px',
		overflow: 'hidden'
	});
	
	$("#slide li").css({
		position: 'absolute',
		top: '0',
		height: '680px',
		left: '0'
	});
	$(".destaqueContent").css({top: '-110px'});
	
	$("#slide li").eq( i-1 ).fadeIn(2000, function(){

		$("#slide li .destaqueContent").eq( i-1 ).animate({top: '0'},2000);

	});

	window.setTimeout( 'troca()', 6000 );
});
var i = 1;

function troca() {
	i++;
	$("#slide li").eq( i-1 ).fadeIn(2000, function(){
		$("#slide li .destaqueContent").eq( i-1 ).animate({top: '0'},2000);
	});
	$("#slide li").not( $("#slide li").eq( i-1 ) ).fadeOut(1500 , function(){
		$("#slide li .destaqueContent").animate({top: '-90px'},1000, function(){
		});
	});
	
	if( ($("#slide li").length) == i ) i=0;
	
	window.setTimeout( 'troca()', 8000 );
}

function set_img( src ) {
	var img = document.createElement('img');
	
	$( img ).attr({src: src});
	$( img ).css({opacity: '0'});
	
	return img;
}

function set_rightContent( text ) {
	var rightContent = document.createElement('div');
	$( rightContent ).attr({id: 'rightContent'});
	$( rightContent ).css({
			overflow: 'hidden',
			marginLeft: '1080px'
		});
	$( rightContent ).append( text );
	return rightContent;
}

function set_loading( src ) {
	var loading = new Image();
	$( loading ).attr({src: src, id: 'ico-loading'});
	$( loading ).css({
		display: 'block',
		margin: '30px auto 0 auto'
	});
	return loading;
}
/**
 * Função que cria o click para o fancybox da busca completa
 * 
 * @return void()
 */
function setClickBuscaCompleta() {
	$("#buscaCompleta").fancybox({
		ajax : {
		    type : "POST",
		    href : $( '#buscaCompleta' ).attr('href')
		}
	});
}

/**
 * Função que cria o click para o fancybox da galeria de imagens
 * 
 * @return void()
 */
function setClickGaleria() {
	$("#imagens a").fancybox();
}

/**
 * Função que cria o click para a paginação, para a exibição do imóvel e para o botão voltar 
 * 
 * @return void()
 */
function setClick() {
	$("#paginator a, ul#imoveis a, a.voltar, ul#ultimosVistos a, ul#slide a").live('click', (function( e ){
		e.preventDefault();
		
		$("#content").html( '' );
		$("#content").append( set_loading( '../img/layout/loading_small.gif' ) );
		
		$.ajax({
			cache: false,
			url: $( this ).attr('href'),
			success: function( data ){
				$("#content").html( data );
			}
		});
		return false;
	}));
}

Valeu galera!!! Resolvido.

 

Carlos Eduardo

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito