Clone com nested fieldset - jquery

Priscila Thompson · Agosto 13, 2009

Olá pessoal! Espero que alguém aqui consiga me responder essa...

Tenho um formulário dinâmico onde alguns fieldsets podem ser clonados infinitamente... até aí sem problemas, pois a função clone() (e seus vários tutoriais e plugins por aí: Form Field Carbon Copy,Clone Field ,Clone Fieldset) atende quando o fieldset não tem filhos.

O problema é quando existem fieldsets filhos que precisam ser clonados junto com o fieldset pai E também podem ser clonados de maneira independente.

Pra ilustrar melhor, vejam o código:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cloneFieldset.js"></script>
</head>

<body>
<form action="#" method="post" enctype="multipart/form-data">
<fieldset id="pai">
<a href="#" onclick="cloneMe(this); return false;" class="cloneMe" title="Add">[Adicionar Cliente+]</a>
<a href="#" onclick="deleteMe(this); return false;" class="deleteMe" title="Delete">[Remover Cliente x]</a>
<label>Nome: </label><input name="nome" type="text" /><br />
<label>Endereço: </label><input name="endereco" type="text" /><br />
	<fieldset id="filho">
	<a href="#" onclick="cloneMe(this); return false;" class="cloneMe" title="Add">[Adicionar Telefone+]</a>
	<a href="#" onclick="deleteMe(this); return false;" class="deleteMe" title="Delete">[Remover Telefone x]</a>
	<label>Telefone: </label><input name="telefone" type="text" /><br />
	</fieldset>
</fieldset>
</body>
</html>

cloneFieldset.js

/*
	cloneFieldset.js
	by Nathan Smith, sonspring.com

	Additional credits:
	> Ara Pehlivanian, arapehlivanian.com
	> Jeremy Keith, adactio.com
	> Jonathan Snook, snook.ca
	> Peter-Paul Koch, quirksmode.org
*/


// insertAfter function, by Jeremy Keith
function insertAfter(newElement, targetElement)
{
	var parent = targetElement.parentNode;
	if (parent.lastChild == targetElement)
	{
		parent.appendChild(newElement);
	}
	else
	{
		parent.insertBefore(newElement, targetElement.nextSibling);
	}
}


// Suffix + Counter
var suffix = ':';
var counter = 1;


// Clone nearest parent fieldset
function cloneMe(a)
{
	// Increment counter
	counter++;

	// Find nearest parent fieldset
	var original = a.parentNode;
	while (original.nodeName.toLowerCase() != 'fieldset')
	{
		original = original.parentNode;
	}
	var duplicate = original.cloneNode(true);

	// Label - For and ID
	var newLabel = duplicate.getElementsByTagName('label');
	for (var i = 0; i < newLabel.length; i++)
	{
		var labelFor = newLabel[i].htmlFor
		if (labelFor)
		{
			oldFor = labelFor.indexOf(suffix) == -1 ? labelFor : labelFor.substring(0, labelFor.indexOf(suffix));
			newLabel[i].htmlFor = oldFor + suffix + counter;
		}
		var labelId = newLabel[i].id
		if (labelId)
		{
			oldId = labelId.indexOf(suffix) == -1 ? labelId : labelId.substring(0, labelId.indexOf(suffix));
			newLabel[i].id = oldId + suffix + counter;
		}
	}

	// Input - Name + ID
	var newInput = duplicate.getElementsByTagName('input');
	for (var i = 0; i < newInput.length; i++)
	{
		var inputName = newInput[i].name
		if (inputName)
		{
			oldName = inputName.indexOf(suffix) == -1 ? inputName : inputName.substring(0, inputName.indexOf(suffix));
			newInput[i].name = oldName + suffix + counter;
		}
		var inputId = newInput[i].id
		if (inputId)
		{
			oldId = inputId.indexOf(suffix) == -1 ? inputId : inputId.substring(0, inputId.indexOf(suffix));
			newInput[i].id = oldId + suffix + counter;
		}
	}
	
	// Select - Name + ID
	var newSelect = duplicate.getElementsByTagName('select');
	for (var i = 0; i < newSelect.length; i++)
	{
		var selectName = newSelect[i].name
		if (selectName)
		{
			oldName = selectName.indexOf(suffix) == -1 ? selectName : selectName.substring(0, selectName.indexOf(suffix));
			newSelect[i].name = oldName + suffix + counter;
		}
		var selectId = newSelect[i].id
		if (selectId)
		{
			oldId = selectId.indexOf(suffix) == -1 ? selectId : selectId.substring(0, selectId.indexOf(suffix));
			newSelect[i].id = oldId + suffix + counter;
		}
	}

	// Textarea - Name + ID
	var newTextarea = duplicate.getElementsByTagName('textarea');
	for (var i = 0; i < newTextarea.length; i++)
	{
		var textareaName = newTextarea[i].name
		if (textareaName)
		{
			oldName = textareaName.indexOf(suffix) == -1 ? textareaName : textareaName.substring(0, textareaName.indexOf(suffix));
			newTextarea[i].name = oldName + suffix + counter;
		}
		var textareaId = newTextarea[i].id
		if (textareaId)
		{
			oldId = textareaId.indexOf(suffix) == -1 ? textareaId : textareaId.substring(0, textareaId.indexOf(suffix));
			newTextarea[i].id = oldId + suffix + counter;
		}
	}

	duplicate.className = 'duplicate';
	insertAfter(duplicate, original);
}


// Delete nearest parent fieldset
function deleteMe(a)
{
	var duplicate = a.parentNode;
	while (duplicate.nodeName.toLowerCase() != 'fieldset')
	{
		duplicate = duplicate.parentNode;
	}
	duplicate.parentNode.removeChild(duplicate);
}

Como fazer o fieldset filho ser clonado junto e também separado do fieldset pai? Como criar uma dependencia entre os dois? Ex.: fieldset filho 1.1 e 1.2 pertecem ao fieldset pai 1 e os fieldsets filhos 2.1, 2.2 e 2.3 dependem do fieldset pai 2? Como se o fieldset filho fossem atributos (clonáveis independentemente) do pai?

Obrigada pela ajuda!

Priscila

Matheus Tavares · Agosto 13, 2009

Olá Priscila, tudo bem?

Bem, eu aconselharia você utilizar jQuery. Isso é bem mais fácil fazer por lá, que tem seletores super práticos, como eq, next, siblings, children...

Com ele, você poderia selecionar os fieldsets filhos assim:

$(#fieldset_pai).children();

Desculpe se não fui muito claro, ou se seu objetivo é não utilizar jQuery, mas acho que qualquer ajuda vale :-).

Abraços

Priscila Thompson · Agosto 13, 2009

Oi H4X0R!

Meu objetivo é (ou era) usar jquery, mas a documentação deles sobre a função clone() com arrays multidimensionais é inexistente! Você tem algum "caminho das pedras" pra me indicar?

[]´s

Priscila

Matheus Tavares · Agosto 13, 2009

Bom minha amiga, você já chegou a ver a documentação no próprio site? Eu acho ela relativamente boa, porém concordo que quando vemos pela primeira vez é complicado.

www.jquery.com -> Documentation

A sintaxe jQuery é simples, aconselho este livro: http://www.novatec.com.br/livros/jquery/.

Você poderia, como eu disse, utilizar funções para selecionar os elementos-filho.

Se você não tem muita pressa com este projeto, aconselho dar uma breve estudada em jQuery / JS e pegar os macetes, fazendo testes e coisas assim, não é difícil.

Um exemplo prático:

Tenho duas divs-filha dentro de uma div pai. Quero mudar o texto de cada uma das filhas, como fazer?

$(document).ready(function() { //Avisa que, após o DOM estiver pronto, faça as funcoes jQuery
  $('div').text('Sou a div-pai').css('border','1px solid red');
  $('div').children().html('<strong>Sou a div filho</strong>').css({padding:'3px',background:'#ddd'});
});

E no body:

<div>
  <span>SDFSDFSDFSDFSF</span>
  <span>DFSDFSDFSFSS</span>
</div>

Peço que faça este teste para entender o que vai acontecer. Não esqueça de incluir no <head> a lib do jQuery.

Para achar tutoriais, o Google é seu pastor e nada lhe faltará, basta ter as palavras-chave.

Abraços.

Entrar

Arquivado

Clone com nested fieldset - jquery

Recommended Posts

Priscila Thompson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

Priscila Thompson 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante