Resgatar Id Dinamico

[juliano.ma 0]

Olá amigos,

 

como eu poderia pegar o id dinamico do form/submit e do result?

 

Do jeito que está, todo resultado vai sempre para primeira div#result

 

Gostaria que cada resultado fosse apresentado em sua devida div#result

 

Só lembrando que os ids são gerados dinamicamente.

 

 

<script type="text/javascript">
$(document).ready(function()
{
	$('#loading').hide();	
	$("input:submit[id^='sub']").click(function()
	{		
		$('#loading').show();
		$.post("busca.php",
		{
			buscar: $('#buscar').val()
		}, function(response)
		{
			$('#result').fadeOut();
			setTimeout("finishAjax('result', '"+escape(response)+"')", 400);
		});		
	return false;
	});
});

function finishAjax(id, response)
{
	$('#loading').hide();

	$('#'+id).html(unescape(response));

	$('#'+id).fadeIn();
	$('#sub').hide();
}
</script>

 

<div>
<form id='101'> 101
<input type='hidden' name='buscar' id='buscar' value="101" />
<input id='sub' name='sub' type='submit' value='Show' />
</form>
</div>			
<div id='result'></div>
			
<div>
<form id='102'> 102
<input type='hidden' name='buscar' id='buscar' value="102" />
<input id='sub' name='sub' type='submit' value='Show' />
</form>
</div>			
<div id='result'></div>			
						
<div>
<form id='124'> 124
<input type='hidden' name='buscar' id='buscar' value="124" />
<input id='sub' name='sub' type='submit' value='Show' />
</form>
</div>			
<div id='result'></div>

[William Bruno 1501]

você não pode repetir IDs numa mesma página.

Já que está usando jQuery, pq não faz o seletor de outra maneira? como por exemplo, selecionando o próximo elemento DIV após o form que você está.

 

http://docs.jquery.com/Traversing/next

Ou mudando essa marcação, e colocando o '#result', dentro do form. Fica até mais fácil para acessá-lo.

[juliano.ma 0]

Então Willian,

 

na verdade eu só repeti no exemplo nessa div, pois não sei como poderia fazer:

 

<div id='result'></div>

Mas a minha dúvida é como o ajax vai saber que o primeiro form é ID 101 e o segundo é 102 etc, já que esse ID é gerado dinamicamente dependendo de outra tipo de busca que o usuário fizer...

 

tipo:

 

<form id='101'>
<input type='text' id='101' />
<input type='submit' id='101' value='mostrar' />
</form>
<div id='101'></div>

<form id='102'>
<input type='text' id='102' />
<input type='submit' id='102' value='mostrar' />
</form>
<div id='102'></div>

Como você faria para pegar esse id dinamico para que quando clickasse no mostrar o resultado fosse apresentado na div correspondente?

[William Bruno 1501]

Está ai o ponto. "Ele não precisa saber o id".

 

Tem como você colocar um link simplificado desse processo? ai posso analisar melhor a situação

[juliano.ma 0]

Clique aqui

[Bruno Augusto 417]

Pelo que eu vi, você nem precisa de tudo isso de <form>

 

Coloca um só, tira os hidden substituindo-os por, sei lá, um atributo rel no próprio botão.

 

Depois pega com seletor todos os botões cujo atributo name seja sub e faz um loop com each()

 

Dentro desse loop você dispara a requisição AJAX passando como valor da consulta o valor do rel.

 

E adiciona o retorno dentro da DIV #result mesmo.

 

Detalhe: XHTML válido não aceita tags que iniciem com números, então para esse rel você terá de colocar um prefixo de texto como ID_ e, antes de enviar o valor da tag, removê-lo. Pode ser com parseInt() ou com replace(), tanto faz.

 

Detalhe 2: Não estou certo se rel pode ser usado num botão. Se nãopuder, adapte para outro atributo "invisível" ao usuário.

 

Só parece complicado, masé bem simples. Eu fiz isso uma vez com um sistema de "Favoritos" de um usuário cadastrado. A diferença é que o rel que usei estava numa tag <A>

[juliano.ma 0]

Imaggens, obrigado por ter respondido.

 

no caso eu só posso enviar por POST mesmo.

 

poderia me dar um help prático para montar isso?

[William Bruno 1501]

Acredito que assim fica melhor:

<script type="text/javascript">
$(document).ready(function()
{
	$('#loading').hide();	
	$("input:submit[id^='sub']").click(function()
	{
		var form = $(this).parent('form');
		var b = $(form).find("input[name='buscar']");


		$('#loading').show();
		$.post("busca.php",
			{
				buscar: b.val() 
			}, function(response)
			{
				$( form ).parent('div').after('<div class="bo">'+response+'</div>');
			});		
	return false;
	});
});
</script>

ai você nem precisa da DIV vazia lá na marcação, pois ela vai ser criada com JS tb.

ficando apenas:

<div class="border1px"> 
		<form id="101"> 101 
			<input type="hidden" name="buscar" value="101" /> 
			<input id="sub" name="sub" type="submit" value="Show" /> 
		</form> 
	</div><!-- /border1px -->

[juliano.ma 0]

Perfeito William!!

 

Clique aqui

 

Só preciso esconder o botão depois de enviado o post, se não o usuário vai achar bonitinho e enviar umas 500 vezes...

[William Bruno 1501]

E qual a dificuldade?

..
	return false;
	});
});
</script>

por

..
		$(this).hide();
	return false;
	});
});
</script>

[juliano.ma 0]

Perfeito Bruno!

 

Não querendo abusar da sua bondade, poderia me dar um help para que eu possa implantar um colapse e esconder a div gerada?

 

Dá uma olhada no que eu tentei...

 

 

Clique aqui

[Bruno Augusto 417]

É outro manipulador de evento click().

 

Primeiro que tem um errinho aí que seus links estão TODOS com ID collapse. ID é único, se quiser reaproveitar o nome, use uma classe.

 

Você atribui um evento click() em todos os links (depois de corrigidos os ID para classe). Como o HREF dos links carregam #XXX, onde XXX é o ID da DIV que está sendo exibida, você pode usá-lo para ocultar.

 

$( 'a.collapse' ).click( function() {

    // Pega o HREF que tem o mesmo valor da DIV e monta o seletor

    var seletor = 'div' + $( this ).href;

    if( seletor ).is( ':visible' ) ) {
        $( seletor ).hide();
    }
});

Veja se funciona.