0

Tenho um sistema de controle de equipamento. Neste sistema,enquanto o usuário preenche o formulário, ele tem a opção de adicionar um outro campo para cadastrar mais um equipamento que ficará associado a um cliente. Para fazer essa funcionalidade eu usou um código em javascript

    <script type="text/javascript">
        $(document).ready(function () {
            var $link = $('#add_answer');
            var $model = $link.prev('.equipamento');
            $link.click(function () {
                var $clone = $model.clone(false);
                $(this).before($clone);
                $clone.wrap('<div class="wrapper"></div>')
                        .after('<a href="javascript:void(0)" class="remove"></a>')
                        .addClass('added')
                        .parent()
                        .hide()
                        .fadeIn();
            });

            $('a.remove').live('click', function () {
                $(this).parent().fadeOut('normal', function () {
                    $(this).remove();
                });
            });
        });
    </script>

Como eu faço para acessar os campos do formulário usando JQuery.

Podem me ajudar? Alguma sugestão? Estou fazendo da forma correta? Existe uma forma melhor de fazer isso?

nota:Não fui eu que programei esse javascript

7
  • Poderias traduzir melhor o seu problema? Commented 30/01/2014 às 15:29
  • O sistema é feito para saber por que equipamentos passam os cabos aqui da empresa. Não tem um número fixo de equipamentos, então o usuário insere a ponta A(de onde sai o cabo), os equipamentos por onde ele passa, e a ponta B(onde acaba o cabo). Como não sabemos quantos equipamentos tem nesse caminho, eu inseri um botão + para inserir um novo equipamento (o usuário insere quantos quiser).
    – jpklzm
    Commented 30/01/2014 às 15:44
  • Até ai tudo bem, mas depois precisamos consultar esses dados. O que eu não sei fazer é com que o sistema verifique quantos equipamentos tem cadastrados e gere os campos para visualização. Não sei como chamar esse clone criado através do código.
    – jpklzm
    Commented 30/01/2014 às 15:45
  • 1
    Você poderia exemplificar melhor seu problema, adicionando como está sua tabela no banco, pois "inseridos na forma de um array" não ficou claro como a informação é armazenada.
    – ricidleiv
    Commented 30/01/2014 às 15:53
  • 1
    Bem-vindo. Sempre procure explicar o melhor possível na pergunta. Para isso existe a edição. Fica mais fácil para todos entenderem o problema e ajuda os buscadores indexarem o conteúdo e ajudar outros programadores.
    – Maniero
    Commented 30/01/2014 às 16:10

4 Respostas 4

1

Você pode usar Knockoutjs para montar o seu layout ao invés de fazer isso 'na mão'. Na própria documentação da biblioteca você encontrará o que você está tentando fazer.

0

Ve se eu entendi sua pergunta, você quer acessar os clones no javascript.

Exitem algumas possibilidades vou abordar algumas.

Usando each

$(".equipamento").each(function() {
     var obj = $(this); //aqui você irá ter acesso aos "clones"
     console.log(obj);
});

Para saber quantos objetos existem vc pode usar length

$(".equipamento").length //retorna a quantidade de "clones"

Usando os filtering do jquery (sessão traversing)

Pode acessar cada objeto separadamente com eq first last

$(".equipamento").first() //acesso ao primeiro objeto
$(".equipamento").eq(0) //retorna o mesmo objeto de cima

$(".equipamento").eq(1) //acesso ao segundo objeto

$(".equipamento").last() //acesso ao último objeto
$(".equipamento").eq($(".equipamento").length-1) //mesma coisa de cima

Agora se a página já cria N objetos quando é renderizada. Você pode acessar os objetos usando a classe ".added" no lugar de ".equipamento" nos códigos acima (mudando o selector),

1
  • É exatamente isso que eu estava buscando. Obrigado Leandro
    – jpklzm
    Commented 31/01/2014 às 18:56
0

Se seu sistema for ASP.NET MVC com Razor ou Web Forms, este pacote resolve tudo o que você precisa:

https://www.nuget.org/packages/BeginCollectionItem/

Um exemplo de uso está abaixo (já traduzi para Razor). O componente é capaz de gerar um ID temporário para novos elementos inseridos que podem ser substituídos na lógica:

@using (Html.BeginCollectionItem("Equipamentos"))
{
    @Html.EditorFor(m => m.Nome)
    @Html.ValidationMessageFor(m => m.Nome)
    <br />
}

No link abaixo há exemplos para Web Forms e maiores explicações de uso, como validação em Ajax dos dados:

http://www.joe-stevens.com/2011/06/06/editing-and-binding-nested-lists-with-asp-net-mvc-2/

1
  • Resposta aprimorada e marcada como Wiki da comunidade, para quem quiser aperfeiçoá-la. Commented 30/01/2014 às 19:09
0

Para gravar no banco o array em forma de string, basta você serializar o array. Você pode utilizar, por exemplo, o JSON.

Algumas formas interessantes:

Link

JsonConvert.SerializeObject(product);

JsonConvert.DeserializeObject<Product>(json);

Porém, o correto para armazenar seria você percorrer o array e ir adicionando equipamento por equipamento no banco de dados. Ao carregar esses equipamentos em um formulário, você buscaria os equipamentos relacionados e montaria o html para cada equipamento.

O script do clone continuaria funcionando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .