6 replies to this topic

[Bruno Augusto]

Estava eu mais uma vez estudando a jQuery no sentido de riação de nós DOM dinâmicos.

Cheguei a isso:

$("div.teste").click(
		function()
		{
			$("div.teste").after("<div id='foo'></div>");
			
			$("#foo").prepend("<font color='red'>OK!</font>");
		}
	);

No HTML, criei uma DIV de classe "teste". Daí ao clicar nela criaria uma outra DIV de ID foo e colocaria um certo conteúdo dentro.

Até aí beleza.

Minha dúvida seria como aplicar esse esquema em um certo radiobutton de um formulário com vários deles.

Tipo:

---- Radio #1
------ Clica abre uma DIV abaixo dele.
---- Outro Campo
---- Outro Campo
---- Outro Campo
---- Outro Campo
---- Radio #2
------ Clica e abre uma outra DIV abaixo dele.

E assim vai.

Pra que isso? Vindo do banco de dados terei uma opção que detrminará se haverá manipulação de layout por JavaScript. Se o valor dessa variável for verdadeiro, o radiobutton que a possuir criará essa DIV e adicionará um conteúdo X.

O problema? Não saberei quantos radiobuttons terá na página e nem quatas DIV precisaram ser abertas.

E não seria nada bom ter de repetir esse trechinho de código n vezes.

[]'s

[Klaus]

Bom... faz assim, dá um atributo rel="algumacoisa" pra esses radios que forem abrir uma div após eles.

Aí, seu código ficaria assim:

var install_click_events = function()
{
  $( "input[@rel=algumacoisa]" ).click(
	function()
	{
	  $( this ).after( '<div id="foo">Oi! :D</div>' );
	  $( this ).unbind( "click" );
	}
  );
}
$( install_click_events );

[Bruno Augusto]

Não funcionaria pois até mesmo a geração dos códigos que montam os radios é dinâmica.

Pensei eu outra forma, que apenas coultasse as DIVs de uma determinada classe.

No caso eu criaria dois campos no banco de dados que especificaria:

• Qual evento a ser usado
  Pois uns campos acima eu defino se é TEXT, dropdown e etc, e até onde eu sei, onchange não funionar em campos TEXT
• hide
  Campo TRUE/FALSE que, depois da checagem, adicionará, no template, <div class='hide'> antes de div.tem, que envolve "uma linha", onde tem os campos à esquerda, no meio e à direita.

A minha idéia foi, depois de criado os campos:

function showHide( bool, range )
{
	if( bool )
	{
		for( i = 0; i < range.length; i++ )
		{
			$( 'div.hide' )[i].hide();
			$( 'div.hide' )[i].css( 'display', 'block' );
			i++;
		}
	}
	else
	{
		for( i = 0; i < range.length; i++ )
		{
			$( 'div.hide' )[i].visible();
			$( 'div.hide' )[i].css( 'display', 'none' );
			i++;
		}
	}
}

Sendo range, o número de DIVs abaixo da que tem o elemento radiobutton.

Daí, no template, eu faria um modo de adicionar, algo como:

evento=showHide( true, n );

para exibir

evento=showHide( false, n );

para oultar

Onde n, seria o número de DIV's abaixo da atual
e evento, o valor vindo do banco de dados.

Deu pra sacar a idéia?

O problema é que eu mesmo duvido que funcione, pois algo m diz que a forma como eu capturo as DIV's abaixo da atual está errada.

Além do mais eu rabisquei com mudança de CSS básica (leia-se brusca), sendo que no caso eu deveria aplicar o efeito de slide da jQuery.

O pior de tudo é que não tive possibilidade de ir primeiro no manual do site oficial, pois foi deletado

Como seria a forma correta de se fazer essa minha idéia?

[]'s

[Klaus]

Bom... a solução que sugeri já funciona da forma que você tá falando, pelo menos de acordo com o primeiro texto... esse segundo aí não entendi nada.

Se a geração é dinâmica, é exatamente por isso que estou falando pra você adicionar o rel nos radios que têm coisas abaixo deles...

[Bruno Augusto]

E tem como fazer assim:

Adiciono um campo no formulário de adicção/edição de configurações a ser preenchido com esse rel.
Daí uma função montada com a jQuery pegaria todas as rel de valor XXX abaixo de um radiobutton e exibe (com slide) ao se clicar em sim e oculta ao se clicar em não

Exemplo:

<input type="radio" value="Sim" name="radio">Sim
<input type="radio" value="Não" name="radio">Não
<br />
<div class"item" rel="area1">...</div>
...
<input type="radio" value="Sim" name="radio">Sim
<input type="radio" value="Não" name="radio">Não
<br />
<div class"item" rel="area2">...</div>
...
<input type="radio" value="Sim" name="radio">Sim
<input type="radio" value="Não" name="radio">Não
<br />
<div class"item" rel="area3">...</div>

E a função montaria os onclick/onchange automaticamente?

P.S.: O rel vai só na DIV debaixo ou nas duas?

[]'s

[bimonti]

Acho que o Klaus quis dizer pra colocar o rel no radio button ... e deixa eu começar aqui com as picuinhas ... ^^

Não é muito semântico usar radio para 2 opções, como você tem sim/não, aconselho usar checkbox ... ^^

[Bruno Augusto]

Que seja, bimonti. O problema seria uma única função com a sintaxe de utilização da jQuery abrir / fechar a(s) DIV's com determinado atributo, se for o caso, o rel, que pra ser sincero nunca usei por falta de conhecimento.

[]'s