Ajax bloqueando jquerys

wneo · Outubro 23, 2014

Bom dia pessoal,

Estou usando ajax para carregar as páginas dentro da index, mas quando essas páginas possuem jquery, eles não são carregados!!!!

Ajuda aih pessoal por favor!!!!!

Vou colocar o codigo q toh usando abaixo:

<script type="text/javascript">
	$(document).ready(function(){
		var content = $('.blocos');
 
		//pre carregando o gif
		loading = new Image(); loading.src = '2015/gsite_final/images/500.GIF';
		$('#menu a').live('click', function( e ){
			e.preventDefault();
			content.html( '<img src="2015/gsite_final/images/500.GIF" />' );
 
			var href = $( this ).attr('href');
			$.ajax({
				url: href,
				success: function( response ){
					//forçando o parser
					var data = $( '<div>'+response+'</div>' ).find('.blocos').html();
 
					//apenas atrasando a troca, para mostrarmos o loading
					window.setTimeout( function(){
						content.fadeOut('slow', function(){
							content.html( data ).fadeIn();
						});
					}, 500 );
				}
			});
 
		});
	});
	</script>

William Bruno · Outubro 23, 2014

Exato.

Leia:

http://wbruno.com.br/jquery/metodo-live-jquery/

http://wbruno.com.br/ajax/usando-lightbox-em-pagina-carregada-ajax/

wneo · Outubro 23, 2014

Oi William!!!

Estou tentando utilizar o método live conforme você colocou no seu site, mas não toh conseguindo:

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">

<script type="text/javascript">
$(document).ready(function(){
	var i = $('.box').size();
	$("input[name='add']").click(function(){
		i++;
		$('#campos').append('<div class="box">'+i+'</div>');
	});
 
	$('.box').click(function(){
		oi( $( this ).html() );
	});
});
function oi( nome ){
	alert( 'Oi, eu sou o .box: '+nome );
}
</script>

<style>
#campos {
	width: 400px;
}
.box {
	background: #f0f;
	height: 70px;
	width: 70px;
	float: left;
	margin: 0 10px 10px 0;
	text-align: center;
	line-height: 70px;
}
 
</style>

</head>
<body>
 
 
	<input type="button" name="add" value="add" />
	<div id="campos">
		<div class="box">1</div>
		<div class="box">2</div>
	</div><!-- /campos -->
 
 
</body>
</html>

Inseri os codigos em uma página em branco para entender o mecanismo... está aparecendo a box 1 e 2, e um botão de add, sem nenhuma interação...

William,

e o script com light box, apliquei sem carregar os plugins do lightbox, aproveitei apenas o script para carregamento do ajax, e dessa forma funcionou, porém com um problema sério, o carregamento não ficou bom, dá pra ver um delay no processamento da página inteira, mesmo eu especificando o local(div) onde desejo carregar o conteudo.

Utilizei dessa forma:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var content = $('#content');

		//pre carregando o gif
		loading = new Image(); loading.src = '2015/gsite_final/images/500.GIF';
		
		
		
		$('#menu a').click(function( e ){
			var arq = pega_arq( $( this ).attr('href') );
			abre( arq, content );
		});
		
		
		/* iniciando com a home */
		abre( pega_arq( document.location.href ), content ); 
	});
	function abre( href, content){
		content.html( '<img src="2015/gsite_final/images/500.GIF" />' );
		

		$.ajax({
			url: href,
			success: function( response ){
				content.delay(1000).hide().html( response ).fadeIn();
				
				init_plugins( href );
			}
		});
	}
	function pega_arq( url ){
		var file = url.split('#');
		return ( file[1] ) ? file[1]+'.php' : 'home.html';
	}
	function init_plugins( href )
	{
		if( href=='lightbox.html' )
		{
			$('#gallery a').click(function( e ){
				e.preventDefault();
			})
			$('#gallery a').lightBox();
		}
	}
	</script>

<div id="content">
...paginas externas com seus efeitos e jquerys carregadas aqui, dentro da index...
</div>

O que pode ser ????

- Tem algum ponto do script q pode ser reescrito para corrigir?

- A biblioteca jquery tem que ficar dentro da pagina recebedora(index), certo?

- Os scripts dos plugins das páginas que serão carregadas ficam nelas mesmas, certo?

William Bruno · Outubro 23, 2014

Não.

Os scripts ficam todas na index. Todos eles.

Releia os artigos.

wneo · Outubro 24, 2014

Olha só, digamos que eu tenho um index, e uma página2.html onde possui um link com uma modal...

Essa página2.html ao ser carregada dentro da index, perde o efeito do jquery... já tentei colocar todos os scripts dentro da index, e também já tentei dentro e fora da div content(q é a receptora das páginas, a qual está sendo referenciada em todas as páginas)...

vou colocar como estou fazendo abaixo:

<html><head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>	<script type="text/javascript">	$(document).ready(function(){		var content = $('#content'); 		//pre carregando o gif		loading = new Image(); loading.src = 'loading.gif';		$('#menu a').live('click', function( e ){			e.preventDefault();			content.html( '<img src="loading.gif" />' ); 			var href = $( this ).attr('href');			$.ajax({				url: href,				success: function( response ){					//forçando o parser					var data = $( '<div>'+response+'</div>' ).find('#content').html(); 					//apenas atrasando a troca, para mostrarmos o loading					window.setTimeout( function(){						content.fadeOut('slow', function(){							content.html( data ).fadeIn();						});					}, 500 );				}			}); 		});	});	</script><!--modal--><script>$(document).ready(function(){    $(".openBox").click(function(){        var windowName = $(this).attr("name"),            height = ($(window).height() - $('.dialog').outerHeight())/2;        $(".fullScreen").fadeIn("fast");        $("#"+windowName).css("margin-top",height+"px").fadeIn("fast");    });        $(".button").click(function(){        $(".fullScreen, .dialog").fadeOut("fast");    });});    </script><style>#content{border-radius:5px 5px 20px 20px;width:400px;height:200px;background-color:#c12;}</style></head><body>	<ul id="menu">		<li><a href="home.html">Home</a></li>		<li><a href="fotos.html">Fotos</a></li>		<li><a href="contato.html">Contato</a></li><li><a href="modal_jqEajax.html">Modal</a></li>	</ul><!-- /menu -->	<div id="content">		<h1>Bem Vindo!</h1>		<p>Essa eh a home desse nome pseudo-site.</p>	</div><!-- /content --></body></html>

página q será carregada:<html><head>	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head><body>	<ul id="menu">		<li><a href="index.html">Home</a></li>		<li><a href="fotos.html">Fotos</a></li>		<li><a href="contato.html">Contato</a></li><li><a href="modal_jqEajax.html">Modal</a></li>	</ul><!-- /menu -->	<div id="content"><style>a {    color: #466000;}a:hover {    color: #fff;    cursor: pointer;}.fullScreen {    width: 100%;    height: 100%;    background: rgba(0,0,0,0.8);    display: block;    position: absolute;    top: 0;    left: 0;    display: none;}.dialog {    position: relative;    background: rgba(0,0,0,1.0);    color: #eee;    width: 500px;    height: 200px;    border-radius: 10px;    margin: 0 auto;    padding: 15px;    z-index: 999;    box-sizing:border-box;    -moz-box-sizing:border-box;    display: none;    font-size: 14px;}.button {    position: absolute;    display: block;    bottom: 15px;    background: #cc0000;	color: #fff;	width: 100px;    border-radius: 4px;        margin-left: 185px;    padding: 5px;    text-align: center;    box-sizing:border-box;    -moz-box-sizing:border-box;	font-size: 13px;}.button:hover {    background-color: #ee0000;    cursor: pointer;}</style>		<h1>Modal</h1>		<a class="openBox" name="box1">Abrir Janela 1</a>  <a class="openBox" name="box2">Abrir Janela 2</a><div class="fullScreen">	<div class="dialog" id="box1">Esta é a janela 1 com form.<form action="ola_teste.html"><input type="text"><input type="submit" value="enviar"></form>		<a class="button">Ok</a>	</div>	<div class="dialog" id="box2">Esta é a janela 2.		<a class="button">Fechar</a>	</div>	</div> 	</div><!-- /content --></body></html>

dessa forma, estou tentando carregar com o script da modal,( q está na página2), dentro da index...mas não executa o script...

toh perdido nessa questão..=/...

se vc puder, preciso mto de um norte pra implementar corretamente...

Salve!

Passando para enviar um agradecimento ao william=)

Encaixei as peças e Implementei dessa forma:

<script type="text/javascript">	$(document).ready(function(){		var content = $('#content');		//pre carregando o gif		loading = new Image(); loading.src = 'ico-loading.gif';								$('#menu a').click(function( e ){			var arq = pega_arq( $( this ).attr('href') );			abre( arq, content );		});						/* iniciando com a home */		abre( pega_arq( document.location.href ), content ); 	});	function abre( href, content ){		content.html( '<img src="ico-loading.gif" />' );				$.ajax({			url: href,			success: function( response ){				content.delay(1000).hide().html( response ).fadeIn();								init_plugins( href );			}		});	}	function pega_arq( url ){		var file = url.split('#');		return ( file[1] ) ? file[1]+'.php' : 'home.html';	}	function init_plugins( href )	{		if( href=='lightbox.html' )		{			$('#gallery a').click(function( e ){				e.preventDefault();			})			$('#gallery a').lightBox();		}	}	</script></head><body>	<p id="menu">		<a href="#home">Home</a>		<a href="#modal_comForm">Contato</a>		<a href="#lightbox">Lightbox</a>	</p>	<div id="content">				</div><!-- /content -->

Estou colocando a biblioteca jquery na pagina q recebe as outras(index), e os scripts de cada plugin direto em suas páginas. Com algumas peculiaridades, como por exemplo uma modal, onde o script e a estrutura do link montei na pagina relativa, e a estrutura da modal com a mascara q cobre o site montei na index para funcionar corretamente. Tive problemas ao implementar uma api do googlemaps...mas creio q deve ser um detalhe q devo estar errando por cansaço...Mas tá tudo clareando^^...Obrigado!

Entrar

Arquivado

Ajax bloqueando jquerys

Recommended Posts

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

wneo 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Abrir url na mesma janela

Sistema de Login

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante