[Resolvido] Ajax com JQuery

[Paulo de Tarso F. M. 24]

Olá pessoal!

 

É o seguinte, estou utilizando o JQuery para carregar algumas páginas via Ajax mas estou tendo um problema.

 

1) Tenho um <select> com categoria de produtos. Beleza. A função Ajax funciona perfeitamente até aqui. A função é simples, é mais ou menos assim:

$('#idDoSelect').change(function(){
	$('#divDestino').load('url_da_pagina.php');
});

O problema não está nesse carregamento, afinal, como já disse, funciona perfeitamente (inclusive minha função não é só isso, uso também as funções ajaxStart, ajaxStop, etc., que não vêem ao caso.

 

2) Na página carregada pela função acima (url_da_pagina.php), tenho a formação de um novo <select>, que também fará uma nova requisição via Ajax. O problema é que esse <select> não funciona!

 

Uma observação: quando utilizava a função "antiga", sem ser com JQuery, funcionava perfeitamente. Já tentei colocar a função dentro da propria página chamada na primeira requisição, mas não funciona.

 

 

Alguém sabe me explicar por que com JQuery uma segunda requisição não funciona?

[Otata 4]

a pagina ue foi carregada via ajax possui essa outra chamada com esse select? se você carregar pagina via ajax o javascriptque estiver dentro nãoc funcionará, é isso?

[Paulo de Tarso F. M. 24]

Assim, na primeira chamada via Ajax tenho um arquivo PHP que faz um select no Banco e monta um novo select (a tag <select>), que terá uma lista de subcategorias que pertencem à categoria selecionada inicialmente. Um exemplo de como funciona, veja esse site com uso de Ajax "normal":

http://www.tecdec.com.br/revenda.php

 

Observe que, ao selecionar um Estado, ele monta um novo select do lado direito, e neste select, ao escolher uma cidade, ele exibe a lista abaixo. Essa página é montada com uso do Ajax tradicional.

 

O que estou montando segue o mesmo princípio, seleciono uma categoria, exibe um novo select, escolho a subcategoria e exibe os produtos. Só que, se eu faço isso com JQuery, o segundo select não funciona, só o primeiro...

 

O pior é que não tenho onde colocar os arquivos de testes para mostrar... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Observação: vale lembrar que com o Ajax tradicional, devemos colocar na tag <select> o evento onchange, já com JQuery eliminamos isso de nossa marcação HTML, controlando tudo via Javascript, de preferência externamente, em arquivos separados.

[Otata 4]

esse script

$('#idDoSelect').change(function(){
	$('#divDestino').load('url_da_pagina.php');
});

está vindo com a primeira chamada quando você monta o segundo select ? ou na chamada dentro da func que cria o segundo select você chama para adicionar o onchange? pq se estiver vindo com a resposta não vai execura esse script..... enetendeu ?

[Paulo de Tarso F. M. 24]

Não entendi amigo... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Você já utilizou o Ajax com JQuery? Se sim, já precisou montar uma "requisição dupla" como esta situação? :mellow: Porque, como falei, a primeira requisição funciona sem problema nenhum, o que não funciona é a página PHP utilizada na primeira requisição...

 

Que confusão, né?

 

Bom, se você conseguir montar um exemplo de uma situação como esta, e se tiver como me disponibilizar um exemplo...

 

 

Um abraço!

[Otata 4]

cara fiz um exemplo bem simples

 

pagina.php

<?php

if(isset($_GET['carregar']) && $_GET['carregar'] == "sim"){
	$html="<select id='idDoSelect'>";
	$html.="<option>selecione</option>";
	$html.="<option>teste select 2</option>";
	$html.="</select>";
	
	echo $html;
	exit;
}

if(isset($_GET['carregar']) && $_GET['carregar'] == "segundoselect"){		
	echo "opa funciona";
	exit;
}

?>
<script src="jquery.js"></script>
<script>

$(document).ready(function(){
	$('#cbo').change(function(){
		$('#divDestino').load('pagina.php?carregar=sim');		
		setTimeout("addEvento()","1500");
	});
});
function addEvento(){
	$('#idDoSelect').change(function(){
		$('#divDestino2').load('pagina.php?carregar=segundoselect');

	});
}

</script>
<select id="cbo">
	<option>selecione</option>
	<option>teste select1</option>
</select>
<div id="divDestino"></div>
<div id="divDestino2"></div>

da ma olhada vê se ajuda você..

[Paulo de Tarso F. M. 24]

Testei este exemplo e não funcionou... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif Não tem como disponibilizá-lo on-line para eu ver? :mellow:

[Ghean 0]

Bom dia Paulo, pra montar a segunda combo (<select>) você precisa de algum parametro da primeira e para a exibição algum parametro da segunda?

[Paulo de Tarso F. M. 24]

Olá Ghean, sim, eu uso parâmetros, mas esse não é o problema. Eu nem citei o uso dos parâmetros porque não tive problemas com isso, mesmo porque no primeiro Ajax eu já tenho passagem de parâmetros. No primeiro select eu escolho uma categoria de produtos, e o Ajax monta um segundo select com as subcategorias que pertencem àquela categoria selecionada. O problema está na execução do change desse segundo select, montado via Ajax com JQuery.

 

Como disse antes, se eu faço isso utilizando o Ajax "tradicional", com uso do try, catch, XMLHttpRequest, etc., funciona sem problema nenhum, mas ao utilizar as funções de Ajax do JQuery, ele só consegue executar o primeiro, o segundo não.

 

É estranho porque o arquivo PHP utilizado para montar o segundo select não consegue executar nenhum script JQuery, mesmo se eu insiro os arquivos diretamente nele.

 

Me parece que é uma limitação do JQuery... http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

[Otata 4]

da uma olhada

 

http://otavioluiz.pro.br/pagina.php

[DarkDragonLord 0]

Estou tendo o mesmo problema que você.

 

A página que chamo no AJAX tem JS nela.. E quando chamo ela, o JS nao é 'contabilizado'. Aí tenho que apertar F5 (refresh) que ai o JS da pagina carregada funciona...

http://forum.imasters.com.br/index.php?showtopic=323581

 

 

jQuery também :(

[jpraminelli 3]

olá você pode fazer assim:

  $("#id").live("click",function(){
         //seu codigo aqui
  });

o evento "live" captura os eventos de objetos que foram add via ajax

 

abraço

[Renan Fernandes. 0]

olá você pode fazer assim:

  $("#id").live("click",function(){
         //seu codigo aqui
  });

o evento "live" captura os eventos de objetos que foram add via ajax

 

abraço

 

Nossa cara!

 

Eu estava com o mesmo problema, e mesmo este post ser um pouco antigo, salvou a minha vida.

 

Muito obrigado.