[Resolvido] [Dica] Função rápida pra AJAX

[setfreak 0]

CARA, TU SALVOU MINHA VIDA http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Macox, obrigado mesmo... aquela dica do return false tambem foi ótima...

Agora vou colocar a mão na massa aqui e tentar entender seu código a fundo... comecei no ajax tem 3 dias e tava precisando exatamente disso ^_^

Bem, é isso o/

[andrea cerqueira 0]

não consigo chamar um arquivo php usando essa função, na verdade só consigo se tiver usando o IE, no firefox não rola.

http://www.cuboaoquadrado.info/teste/

abram nos dois navegadores pra ver.

 

a pagina chamada é essa http://www.cuboaoquadrado.info/teste/noticias.php

 

alguém sabe pq isso ocorre?

 

abçs

[Renan Andrade 0]

Cara ótima função, eu queria colocar ao invez do carregando uma imagem do load como faria ???

 

 

Obrigado cara!

[micox 2]

Troca onde tem

 

if(exibe_carregando){ put("Carregando ...") }

 

Pela sua tag IMG.

[Renan Andrade 0]

Cara será que é algum problema meu, não estou conseguindo usar o script no meu select, exemplo:

 

Quando selecionar uma opção do select chama uma pagina numa div com uma variável setada dependendo do que escolher no select. Porém pra fazer isso eu preciso definir o 'onchange' no meu select e não no option e isso anula a possibilidade da variavel com uma valor mutavel. Como poderia resolver isso com sua função ????

 

 

Obrigado mais uma vez!

[Renan Andrade 0]

Micox o que eu quero fazer é tipo um combo box sabe, o valor do option atrelado à função...porém par amudar o select o "onchange" tem que ficar na tag selec e não na "option" dae eu não consigo passar o id que eu quero pra ela.

[Amaciel 0]

Olá pessoal, estou com um problema aqui, para uso a função e tambem uso aquela atualização do dreamweaver para resolver os problemas daquelas "bordas" nos flashs no ie, porem quando tento utilizar em alguma pagina o script do flash a pagina é recarregada e nao funciona a função em ajax.

Alguem ja teve esse problema?

[Amaciel 0]

Desculpa a pergunta gente.. resolvido o problema...rsrsrs

na verdade nao preciso do AC_RunActiveContent.js com ajax.

valeu!

[Gustavo Barbosa 0]

Valeu, sempre quando to desesperado tem o iMasters pra salvar !

:D :D

[SnakeX 1]

Olá tudo bem?

 

Eu estou usando esta função e tem funcionado bem, mas agora estou com a necessidade de retornar um array do php para js, eu estou a usar o json_encode para retornar o array:

 

na página php tenho assim para retornar

....
echo json_encode($arr);
exit();

mas no javascript ele não assume isso como um objecto mas sim como texto, existe alguma maneira de fazer isso?

[SnakeX 1]

já consegui resolver.

 

coloquei assim na minha função js:

....
var array = ajaxGet(pagina, pega(div_nome), false);
var data = eval('(' + array + ')');
....

e prontos está a funcionar para o que quero! Obrigado na mesma!

[Davimm 0]

E aí galera...

 

só uma complementação pro script...

 

quem já tentou usar esse script de maneira síncrona (SJAX), ou seja, alterando a linha ajax1.open("GET",url,true); para ajax1.open("GET",url,false); pôde perceber que no FireFox não funciona, apenas no IE.

 

Isso acontece porque como a execução é síncrona ela trava a página até terminar de processar para então continuar o carregamento. Sendo assim o "onreadystatechange" nesse caso não tem necessidade. E por isso no FF não funciona.

 

Fiz essa alteração simples pra quem tiver o mesmo problema:

 

function ajaxGet(url, elemento_retorno, exibe_carregando, assincrono_ou_sincrono){
	/******
	* ajaxGet - Coloca o retorno de uma url em um elemento qualquer
	* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
	* A funçao é grande, coloque-a em um arquivo .js separado.
	* Versao: 1.2 - 20/04/2006
	* Autor: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br - elmicox.blogspot.com
	* Parametros:
	* url: string; elemento_retorno: object||string; exibe_carregando:boolean; assincrono_ou_sincrono:boolean (true para assincrono, false para sincrono)
	*  - Se elemento_retorno for um elemento html (inclusive inputs e selects),
	*	exibe o retorno no innerHTML / value / options do elemento
	*  - Se elemento_retorno for o nome de uma variavel
	*	(o nome da variável deve ser declarado por string, pois será feito um eval)
	*	a funçao irá atribuir o retorno a variável ao receber a url.
	*******/
	var ajax1 = pegaAjax();
	if(ajax1){
		url = antiCacheRand(url)
		if(assincrono_ou_sincrono){ //Se for true será AJAX (assincrono); Se for false será SJAX (sincrono)
			ajax1.onreadystatechange = ajaxOnReady;
		}
		ajax1.open("GET",url,assincrono_ou_sincrono);
		//ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");
		ajax1.setRequestHeader("Cache-Control", "no-cache");
		ajax1.setRequestHeader("Pragma", "no-cache");
		if(exibe_carregando){ put("Carregando ...")	}
		ajax1.send(null);
		if(!assincrono_ou_sincrono){ //Se for sincrono...
			return ajax1.responseText;
		}	
		return true;
	}else{
		return false;
	}


... continua igual ao script anterior ...

 

 

Aí você pergunta: pra que usar o síncrono??

 

Pra você retornar o resultado para uma variável por exemplo.

 

Ex.:

 

var msg = ajaxGet(URL, "", false, false);
alert(msg);

Com o assíncrono você não consegue fazer isso.

 

 

 

Se eu tiver errado me corrijam, por favor.

 

Valeu!

 

PERFEITO!!!!

Este ERA o meu problema....

 

Mas agora está resolvido....

UP para a solução acima!!!

 

 

Abraaaço....

[marfig74 0]

Micox, realmente é um bom trabalho.

Os posts são de 2006, mas ando pesquisando na net uma solução em AJAX em 2009 e não vejo nada parecido que chegue perto do que eu quero.

Portanto, antes de tudo parabéns!

 

Agora, entendo pouco de AJAX, e pelo HTML de sua solução, essa função que você criou envolve muitos elementos (duas divs, input, select...) e por esses numeros de elementos imagino que o que eu esteja procurando esteja imbutido aqui.

 

Eu só estou precisando de um codigo AJAX que seja possível carregar duas DIVs diferentes.

Algo que exemplificando ficaria no html

 

div id="menu1"

div id="conteudo1"

div id="menu2"

div id="conteudo2"

 

Entende? O que fosse solicitado no menu2 só apareceria no conteudo2 e não desabilitaria o menu1.

Eu tenho uma função que uso feita pelo Ted K' que carrega direitinho, funciona emtodos osnavegadores é uma beleza, mas só funciona no esquema que seria menu1 e conteudo1, se botar um segundo, ele deixa de funcionar no primeiro.

 

A função do TED K já dissiminada na net é essa (nome do arquivo: instrucao.js)

 

function abrirPag(valor){

var url = valor;

xmlRequest.open("GET",url,true);

xmlRequest.onreadystatechange = mudancaEstado;

xmlRequest.send(null);

if (xmlRequest.readyState == 1) {

document.getElementById("conteudo").innerHTML = "<img src='loader.gif'>";

}

return url;

}

function mudancaEstado(){

if (xmlRequest.readyState == 4){

document.getElementById("conteudo").innerHTML = xmlRequest.responseText;

}

}

 

aliada ao arquivo (ajax.js)

 

 

function GetXMLHttp() {

if(navigator.appName == "Microsoft Internet Explorer") {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }

else {

xmlHttp = new XMLHttpRequest();

}

return xmlHttp;

}

var xmlRequest = GetXMLHttp();

 

 

e no link HTML que você for chamar é só botar algo como

<div id="menu1">

<li><a href="#" onclick="abrirPag('noticias.html');">Noticias</a></li>

<li><a href="#" onclick="abrirPag('contato.html');">Contato</a></li>

</div>

<div id="conteudo1">

</div>

 

Basicamente é isso e funciona muito bem!!

Porém se eu acrescentar mais duas DIVs (menu2 e conteudo2 por exemplo) mesmo repetindo a função acima modificando os nomes (mudei o abrirPag para abrePag por exemplo) não dá certo.

 

Por isso postei aqui.

 

Micox, por favor cara, voc~e teria uma solução pra mim disso? Acho que é bem mais simples do que você fez.

Cara, se puder me ajudar, sou muito grato mesmo!!

Muito obrigado, e parabens pelo seu desenvolvimento!

[GARC 0]

Galera, boa noite.

 

Uma dúvida que já foi solicitada e ainda não respondida que também estou.

 

Quando carregamos a página dentro da div, ela vem ser formatação alguma.

 

Ex:

 

No aquivo principal onde tem os links que as páginas secundárias para dentro da div contém o css do site.

 

No arquivo secundário tenho um texto com <span class'exemplo'> o class exemplo está dentro do meu arquivo css, mesmo assim o texto vem sem formatação. É como se não pegasse o css da página principal.

 

Mesmo que eu colcoque um css (formatação) dentro da página secundária, quando é carregado dentro da div vem toda sem formatação.

 

Como resolver isso?

 

Aguardo,

 

George Costa

[Zenner 0]

Salve!!!!!!!!!!

 

Povão é o seguinte, o script funciona filezão, mas até hoje não consegui fazer uma coisa em ajax e o script tb não nos proporciona...

 

Imaginem 2 páginas.. uma contendo a div id=conteudo e outra contendo uma noticia com um album de fotos...

 

Até aí filé, clicou no link da 1 página, ele carrega no div o conteúd da 2 página.. Agora, caso essa 2 página tenha algum script do tipo lytebox, ou algum carroussel ou algo parecido, esse script não é ativo.

 

:(

 

 

E agora José???

 

Como fazer ele carregar e ativar um jquery ou qualquer outra coisa do tipo que tenha vindo na página importada após carregar??

[webruno 0]

O negócio é o seguinte Zenner e GARC:

 

Em geral, quando se usa o Jquery você ativa o plugin usando o seguinte script:

 

<script type="text/javascript">

$(function() {

$('a').lightBox();

});

</script>

 

Esse é um exemplo do lightBox, mas a maioria dos plugins são ativados dessa forma.

 

Trocando em miúdos o script faz com que quando a página for carregada totalmente, o Jquery faz uma varredura pelo HTML procurando pelos links e aplica o lightBox, certo?

 

Quando você carrega uma outra página via Ajax e insere dentro do DIV a página "pai" já passou pela varredura, portanto os links da página carregada não receberam a função lightBox ainda!

 

O que você precisa fazer é adicionar na sua function que carrega a página via Ajax o seguinte script:

$('#conteudo a').lightBox();

 

Dessa forma o javascript irá fazer uma nova varredura dentro da <div id="conteudo"> para aplicar o lightBox aos links.

 

Acredito que seja isso. Se não for, tens que colocar o teu teste em algum servidor e mandar o link pra nós.

 

Qualquer coisa posta aí.

Falou.

[Zenner 0]

Bem, postei um exemplo da minha dúvida pra ficar mais claro...

 

Em um server coloquei alguns arquivos..

 

Esse arquivo é um exemplo, funcionando, do script original.. você clica na figura e ele abre ampliado a foto (veja que nesse código tenho o css e js do script tudo junto).

http://www.genesisead.com/teste/album_fotos.html

 

 

Em outro link, coloquei somente o conteúdo que a função do micox deve carregar (sem o js e css) - http://www.genesisead.com/teste/album_fotos2.html

 

No terceiro link, coloquei a função do micox, carregando esse segundo arquivo.. No arquivo pai (index) tem as chamadas do js e do css

 

http://www.genesisead.com/teste/index.html

 

 

Fuçando o lytebox.js, vi que lá tem chamada a:

 

window.onload = function() {initLytebox();}

 

Logo, tentei chamar initLytebox() logo após a função do micox carregar o arquivo e também não funciona..

 

Aguardo a ajuda milagrosa dos santos de plantão..

 

Para baixar o exemplo completo, acesse: http://www.genesisead.com/teste/teste_lytebox.rar

[webruno 0]

Cara, sugiro que você utilize o Jquery e o plugin LightBox para fazer isso.

 

Eu tava analisando seus arquivos, mas é complicado porque me parece que o problema está no Lytebox.js. Não sei bem o que é, mas como não posso perder muito tempo fiz uma solução com o Jquery pra você.

 

Nada contra o Ajax feito pelo Micox. Eu inclusive, já usei e postei uma alteração que eu achava necessário. Mas acredito que nem ele usa mais esse script, acho que já partiu pro Jquery.

 

Vou te mandar um link por mensagem privada. Se der certo sobe pro teu servidor e deixa de exemplo pro pessoal daqui.

 

Mas basicamente no seu index ficaria assim no <head>

 

<link rel="stylesheet" href="jquery.lightbox-0.5.css" type="text/css">
<script src="jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.lightbox-0.5.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">

$(function() {
	$('a').lightBox();
});

function teste(){
	$.get('album_fotos2.html', function(data) {
		  $('#conteudo').html(data);
		  $('#conteudo a').lightBox();
		});	
}

</script>

Falou.