Ir para conteúdo

POWERED BY:

Arquivado

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

eronventer

[Resolvido] Carregamento de paginas Jquery

Por , em Javascript

Recommended Posts

eronventer    2

eronventer
Postado

Ae galera,

 

Estou fazendo o carregamento do conteúdo central via ajax, porém quando a página carregada

possui por exemplo um formulário, eu não consigo validá-lo, o js de validação não funciona

agora se eu acessar essa mesma página fora da div em que ela carrega funciona...

 

Porque acontece isso?

 

Estou carregando a página da seguinte maneira:

$("#chat").empty().load("chat_login.php");

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunocampos_    3

brunocampos_
Postado

Opa,

 

 

É porque o script é ignorado quando você faz isto.

É necessário que você procure os scripts e dê um eval ou coloque eles no documento como scripts.

 

Uma maneira de você fazer isto é a seguinte:

 

_insertScripts: function(str) {
 var sfrag = '<script[^>]*>([\\S\\s]*?)<\/script>';
 var matchAll = new RegExp(sfrag, 'img');
 var matchOne = new RegExp(sfrag, 'im');
 $.map(str.match(matchAll), function(script) {
 eval( (script.match(matchOne) || ['', ''])[1] );
 });
 }

Este código eu adaptei do prototype.js eu acho. Onde str é a string que está dentro do div(no caso, o html de "chat_login.php").

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

O estranho é que funciona normalmente no IE8, agora no FF e no Chrome não...

Como eu teria que usar esse script? Atualmente minhas páginas estão assim:

 

index.php

<html>
<head>

<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/scripts.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	conectar();
});
</script>

</head>
<body>
<div id="chat"></div>
</body>
</html>

form.php

<html>
<head>

<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/scripts.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	contato();
});
</script>

</head>
<body>
Nome: <input name="nome" type="text" id="nome" style="width:370px;" maxlength="100">
Email: <input name="email" type="text" id="email" style="width:370px;" maxlength="100">
<input type="button" value="Enviar" id="enviar">
</body>
</html>

Função conectar(): carrega o conteudo, ou seja o form.php

Função contato(): faz a validação do formulário

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunocampos_    3

brunocampos_
Postado

Opa,

 

não cheguei a testar, mas primeiro você declara estas duas funções por exemplo:

 

function insertScripts(str) {
 var sfrag = '<script[^>]*>([\\S\\s]*?)<\/script>';
 var matchAll = new RegExp(sfrag, 'img');
 var matchOne = new RegExp(sfrag, 'im');
 $.map(str.match(matchAll), function(script) {
 eval( (script.match(matchOne) || ['', ''])[1] );
 });
}
function loadCallback(data) {
 insertScripts(data)
}

Depois você troca seu código de carregamento para:

$("#chat").empty().load("chat_login.php", null, loadCallback);

 

O que esta função faz é o seguinte:

Quando terminar de carregar a página no div #chat, ele vai procurar os scripts que estão no meio do html e dar um eval neles, fazendo com que suas funções sejam instanciadas no documento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Dentro dele tenho:

<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/scripts.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	contato();
});
</script>

E a minha função contato(); é a seguinte:

function contato()
{
	$("#enviar").bind("click", function(){
										
		var nome 	 = $("#nome");
		var email 	 = $("#email");
		var mensagem = $("#mensagem");
		
		if (nome.val() == null || nome.val() == "")
		{
			alert("Preencha seu nome.");
			nome.focus();
			return;
		}
		
		if (email.val() == null || email.val() == "" || email.val().indexOf("@",0) < 0 || email.val().indexOf(".") < 0)
		{
			alert("Preencha seu e-mail.");
			email.focus();
			return;
		}
		
		if (mensagem.val() == null || mensagem.val() == "")
		{
			alert("Preencha a mensagem do contato.");
			mensagem.focus();
			return;
		}
		
		$("#acao").hide();
		$("#espera").show();
		
		$.post("chat_contatar.php", { nome: nome.val(), email: email.val(), mensagem: mensagem.val() }, function(msg){
			
			if (msg == "enviado")
			{
				nome.val("");
				email.val("");
				mensagem.val("");
				
				alert("Contato enviado com sucesso, em breve estaremos lhe retornando.");
				conectar();
			}
			
		}); 	
	
	}); 
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu acredito que você terá que 'atachar' as funções usando o método live do jQuery.

Pois o elemento não consta na marcação qndo o jQuery foi carregado, e por isso não funciona.

 

Esse é 'um problema comum'..

Compartilhar este post

Link para o post
Compartilhar em outros sites

brunocampos_    3

brunocampos_
Postado

thescente,

 

Vi que sua página possui as tags <script> que chamam scripts externos.

Para que rode no FF, ou você coloca estes scripts sendo chamados na página principal, ou então você vai precisar de um script parecido com o que te passei, mas que da um attach nestes scripts externos(procura os scripts externos no html, e depois coloca no documento como elemento <script>).

 

William, o método live não é para attach de eventos? Como funciona o live para este problema? Nunca usei esta solução com o live, nem o live em si.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Galerinha, consegui resolver em partes, utilizando a função $.getScript(). Dai na pagina chat_login.php eu retirei tudo, deixei somente os campos input, sem tags <script>, <html>, <body> e etc e ainda criei um arquivo chamado executa.js.

 

executa.js

$(document).ready(function(){
	contato();
});

scripts.js

function carregar(p)
{
	$.ajax({
		url: p,
		cache: false,
		dataType: 'html',
		success: function(html){
			$("#chat").empty().append(html);
			$.getScript('_js/executa.js');			
		}
	});
}

Agora está funcionando a validação, porém ela esta sendo executada 2x, se eu nao preencher o nome, ele me mostra o alert duas vezes...porque será?

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