1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Trabalhando com listas e sublistas

Antes de mais nada gostaria de informar que estou me baseando em um exemplo do Washington Botelho por isso alguns campos ainda estão com o mesmo nome do exemplo. http://www.wbotelhos.com/manipulando-listas-com-jquery-e-vraptor-3

Estou querendo criar um formulário a qual ele permita a inserção de listas e sublistas. No meu caso de uso a pessoa poderá cadastrar a refeição e dizer quais alimentos essa refeição terá. Estou tendo dificuldade em ordenar esses dados e ate mesmo criar os campos.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<a href="${pageContext.request.contextPath}/filme">Listagem</a><br/><br/>

<form action="${pageContext.request.contextPath}/filme" method="post">
    <c:if test="${filme != null && filme.id != null}">
        <input type="hidden" name="filme.id" value="${filme.id}" />
    </c:if>


    <fieldset id="artista-container" style="width: 300px;">
        <legend>
            Alimentos
            <img src="${pageContext.request.contextPath}/img/adicionar.png" alt="+" onclick="clona();" />
        </legend>

        <c:forEach items="${filme.artistas}" var="artista" varStatus="status">
            <div class="artista">
                <label>Nome:</label>
                <input type="text" name="filme.artistas[${status.index}].nome" value="${artista.nome}" />
                <input type="hidden" name="filme.artistas[${status.index}].id" value="${artista.id}" />

                <img src="${pageContext.request.contextPath}/img/remover.png" alt="-" class="button-remover" />
            </div>
        </c:forEach>
    </fieldset><br/>

    <input type="submit" value="Salvar" />
</form>

<script type="text/javascript">
    var campo =
    '<div class="artista">' +
        '<label>Nome:</label>' +
        '<input type="text" name="filme.artistas[0].nome" />' +

        '<img src="${pageContext.request.contextPath}/img/remover.png" alt="-" class="button-remover" />' +
    '</div>';
    var model =
        '<fieldset id="artista-container" style="width: 300px;">'+
            '<legend>Refeição</legend>'+
            '<label>Alimento:</label>'+
            '<input type="text" name="filme.titulo" value="${filme.titulo}" /><img src="${pageContext.request.contextPath}/img/remover.png" alt="-" class="button-remover" />'+
            '<img src="${pageContext.request.contextPath}/img/adicionar.png" alt="+" onclick="adicionar();" />'+
        '</fieldset>';

    $('.button-remover').live('click', function() {
        $(this).parent().remove();
        reorderIndexes();
    });

    function clona() {
        $('#artista-container').append(model);

    };

    function adicionar() {
        $('#artista-container').append(campo);

    };
    function reorderIndexes() {
        var regex = /\[[0-9]\]/g;

        $('.artista').each(function(index) {
            var $campos = $(this).find('input'),
                $input    ,
                name    ;

            $campos.each(function() {
                $input    = $(this),
                name    = $input.attr('name');

                $input.attr('name', name.replace(regex, '[' + index + ']'));
            });
        });
    };
</script>
  • Ola @david.cs20, eu fiz um exemplo no jsfiddle apenas na parte de adicionar e remover, por favor, explique melhor a parte de reordenar. Ps: O link que postou do exemplo esta quebrado.

    Mickdark   20 de ago de 2014
  • Então @Mickdark o que estou querendo e fazer o seguinte a pessoa vai cadastrar uma refeição e dentro dessa refeição vai ter uma lista de alimentos. Mais quero que ela possa fazer varios cadastros de refeições na mesma tela. Então tenho que clonar aquele FieldSet a qua tem aquela listagem e assim permitir o cadastro de varias refeições e alimentos.

    david.cs20   20 de ago de 2014
  • Então o exemplo que eu fiz não serve?

    Mickdark   20 de ago de 2014
  • Entao para ficar igual ao que eu quero e tenho que consegui clonar aquele Fieldset todo. isso que não estou conseguindo. Por que alem de clonar o frame eu tenho que permitir inserir imputs dentro deles.

    david.cs20   20 de ago de 2014
  • Bom eu adicionei um button para clonar o fildset inteiro, e colocar ele abaixo do ultimo. De uma olhada para ver se é isso que precisa! Teste

    Mickdark   20 de ago de 2014
Mostrar todos os 8 comentários>
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags vraptor jquery arraylist ou faça a sua própria pergunta.