[Resolvido]Submit "N" Campos

Front-end
#1

Bom dia.

Estou com um impasse, como não tenho muito conhecimento de desenvolvimento front-end…preciso realizar o submit de dados de um formulário que pode conter N campos de um tipo, e preciso enviá-los para meu Controller(Spring MVC).

è o seguinte, tenho um bean de Receita, que é resumidamente algo assim:

public class Receita
{
    private String nome;
    private Categoria tipo;
    ...
    ...
   private List<String> ingredientes;
   ....
}

è no atributo ingredientes que estou com problema, porque é o seguinte, o site é um portal de Receitas e etc, e o usuário que cadastra as receitas, pode inserir mais do que um ingrediente, então tenho um script com Jquery que ao clicar em “Novo Ingrediente” adiciona mais uma linha na tabelinha de ingredientes e tal…

Agora, não sei como fazer o submit desses ingredientes, já que pode ser inumeros…

Eu estava fazendo o submit normal, por um , mas por conta dessas N linhas, não sei como enviar os dados do front-end para meu controller, que esta assim basicamente com o Spring:

@Controller
@RequestMapping("/receitas")
public class ReceitaController 
{
	@RequestMapping(value="/adiciona",method=RequestMethod.POST)
	public void adiciona(Receita receita)
	{
		//Adicionar a receita...
	}
}

Se alguém puder me ajudar, fico agradecido…obrigado.

Atenciosamente,

Guilherme Dio.

#2

Tenta adicionar as linhas usando ajax.

#3

A partir de alguns auxílios do JQuery para recuperar os campos adicionados no documento, consegui montar um JSON com os dados dos campos que foram criados dinamicamente, e enviá-los para o server-side.

Se alguém precisar do código, ficou assim:

<script type="text/javascript">

var qtdIngrediente = 0;
var qtdTag = 0;
$(document).ready(function()
{
	$('#txtPreparo').wysihtml5();
	$('#estilo').dropdown();
	
	//Botão Adicionar Ingrediente
	$('#btnIngredientes').click(function(event)
	{
		//Incrementa a qtd de ingredientes
		qtdIngrediente++;
		
		//HTML
		var input = "<input id='ingrediente_"+qtdIngrediente+"' class='span4' placeholder='Algum ingrediente...' type='text' name='ingrediente_"+qtdIngrediente+"'/>";
		var botao = "<a id='btnRemoverIngrediente_"+qtdIngrediente+"' class='btn btn-danger' style='vertical-align: top;' title='Remover Ingrediente'><i class='icon-remove-sign icon-white'></i></a>";
		
		//Adiciona o campo
		$('#ingredientes').append("<div id='divIngrediente_"+qtdIngrediente+"'>"+input+"&nbsp;&nbsp;"+botao+"</div>");
		
		//Evento do botão remover ingrediente
		$('#btnRemoverIngrediente_'+qtdIngrediente).click(function(event)
		{
			//Recupera o ID
			var id = $(this).attr('id').replace('btnRemoverIngrediente_','');
			
			//Remove o ingrediente
			$('#divIngrediente_'+id).remove();
		});
	});
	
	//Botão Adicionar Tag
	$('#btnTags').click(function(event)
	{
		//Incrementa a qtd de ingredientes
		qtdTag++;
		
		//HTML
		var input = "<input id='tag_"+qtdTag+"' class='span4' placeholder='Alguma tag...' type='text' name='tag_"+qtdTag+"'/>";
		var botao = "<a id='btnRemoverTag_"+qtdTag+"' class='btn btn-danger' style='vertical-align: top;' title='Remover Tag'><i class='icon-remove-sign icon-white'></i></a>";
		
		//Adiciona o campo
		$('#tags').append("<div id='divTag_"+qtdTag+"'>"+input+"&nbsp;&nbsp;"+botao+"</div>");
		
		//Evento do botão remover ingrediente
		$('#btnRemoverTag_'+qtdTag).click(function(event)
		{
			//Recupera o ID
			var id = $(this).attr('id').replace('btnRemoverTag_','');
			
			//Remove o ingrediente
			$('#divTag_'+id).remove();
		});
	});
	
	//Botão Cadastrar
	$('#btnCadastrar').click(function(event)
	{
		if(valida())
		{
			//Dados
			var titulo = $('#txtTitulo').val();
			var descricao = $('#txtDescricao').val();
			var tipoCategoria = $('#cbCategoria').val();
			var preparo = $('#txtPreparo').val();
			var rendimento = $('#txtRendimento').val() != "" ? $('#txtRendimento').val() : 0;
			var tempo = $('#txtTempo').val() != "" ? $('#txtTempo').val() : 0;
			var imagem = $('#txtImagem').val();
			var tags = new String();
			var ingredientes = new String();
			
			//Recupera os ingredientes
			for(var index = 1;index <= qtdIngrediente-1;index++)
			{
				if($('#ingrediente_'+index).val().length != 0)
				{
					ingredientes += $('#ingrediente_'+index).val()+",";
				}
			}
			if(qtdIngrediente > 0)
			{
				ingredientes += $('#ingrediente_'+qtdIngrediente).val().length != 0 ? $('#ingrediente_'+qtdIngrediente).val() : "";
			}
			
			//Recupera as tags
			for(var index = 1;index <= qtdTag-1;index++)
			{
				if($('#tag_'+index).val().length != 0)
				{
					tags += $('#tag_'+index).val()+",";
				}
			}
			if(qtdTag > 0)
			{
				tags += $('#tag_'+qtdTag).val().length != 0 ? $('#tag_'+qtdTag).val() : "";
			}
			
			//JSON
			var dados =
			{
					titulo : titulo,
					descricao : descricao,
	 				ingredientes : ingredientes,
	 				preparo : preparo,
	 				rendimento : rendimento,
	 				tempo: tempo,
	 				imagem: imagem,
	 				tags : tags,
					tipoCategoria : tipoCategoria
			};
			
			//AJAX para Cadastro
			$.ajax
			({
				type : 'POST',
				url : '${urlAdiciona}',
				data : dados,
				success: function(data,texto)
				{
					$('#mensagem').modal('toggle');
					$('#mensagem').modal('show');
					$('#btnContinuar').click(function(event)
					{
						window.location.replace("${urlReceitas}");
					});
					$('#mensagem').on('hidden', function () 
					{
					    window.location.replace("${urlReceitas}");
					});
				},
				error: function(request,status,error)
				{
					alert("Ocorreu um erro durante o cadastro !");
				}
			});
		}
	});
});
#4