Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Aula07 - Ajax - metodo não é acessado.

Implementei a função no Jsp de remoção dos produtos, porém quando clico sobre o link nada acontece, olhei através do firebug e não ocorre a chamada do onclick, ele nem entra no metodo, estou postando o código abaixo para analise.

----JSP-----

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value="/js/jquery-1.6.1.min.js"/>"></script>
<script type="text/javascript">
    function remove(id){
        $.get('remove?produto.id=' + id, function(){
            alert('Produto removido com sucesso');
             $('#produto-'+id).remove();
        });
    }
</script>

<script type="text/javascript">
//     function remove(id) {
//         $.get('remove?produto.id=' + id, function(data) {
//             $("#produto"+id).hide();
//             alert("Produto removido com sucesso.");
//         })
//     }
</script>

<title>Lista de Produtos</title>
</head>
<body>
${mensagem }
<table>
<c:forEach var="produto" items="${produtoList }">
    <tr id="produto-${produto.id }">
        <td>${produto.nome }</td>
        <td>${produto.descricao }</td>
        <td><fmt:formatNumber value="${produto.preco }" type="currency"/></td>
        <td id='cor'>${produto.cor }</td>
        <td><a href="" onclick="remove(${produto.id}); return false;">Remove</a>        
    </tr>
</c:forEach>
</table>

</body>
</html>

----Produto Controller ------

package br.com.caelum.online.loja.controlador;

import java.util.List;

import br.com.caelum.online.loja.dao.ProdutoDao;
import br.com.caelum.online.loja.dominio.Produto;
import br.com.caelum.vraptor.Path;
import br.com.caelum.vraptor.Post;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;
import br.com.caelum.vraptor.Validator;
import br.com.caelum.vraptor.validator.ValidationMessage;
import br.com.caelum.vraptor.validator.Validations;
import br.com.caelum.vraptor.view.Results;

@Resource
public class ProdutoController {

    private final ProdutoDao produtos;
    private final Result result;
    private Validator validator;

    public ProdutoController(Result result, ProdutoDao produtos, Validator validator) {
        this.result = result;
        this.validator = validator;
        this.produtos = new ProdutoDao();
    }

    public void formulario(){}

    @Post
    public void adiciona(final Produto produto){
        /* if(produto.getPreco() < 0.1)
            validator.add(new ValidationMessage("O preço deve ser maior do que 0.1", "preco"));
            validator.add(new I18nMessage("preco", "produto.preco.invalido"));
        */
        validator.checking(new Validations(){
            {
                that(produto.getPreco() > 0.1, "erro", "produto.preco.invalido");
                that(produto.getNome().length() > 3 && produto.getNome().length()<100, "erro","produto.nome.invalido");
                that(produto.getDescricao()== null, "erro","produto.descricao.invalido");
                that(produto.getCor()== null, "erro","produto.cor.invalido");
            }
        });
        validator.onErrorUsePageOf(ProdutoController.class).formulario();
        produtos.salva(produto);
        result.include("mensagem", "Produto Adicionado com sucesso !!!");
        result.redirectTo(ProdutoController.class).lista();
    }

    public List<Produto> lista(){
        return new ProdutoDao().pegaTodos();
    }

    @Path("/produto/{id}")
    public Produto exibe(Long id){
        return new ProdutoDao().pegaPorId(id);
    }

    @Path("/produto/{id}/xml")
    public void exibeComoXML(long id){
        Produto produto = produtos.pegaPorId(id);
        result.use(Results.xml()).from(produto).serialize();
    }

    @Path("/produto/{id}/json")
    public void exibeComoJson(long id){
        Produto produto = produtos.pegaPorId(id);
        result.use(Results.json()).from(produto).serialize();
    }

    public void remove(Produto produto){
        produtos.remove(produto);
        result.nothing();
    }

}
2 respostas

Oi Renato

Você poderia verificar se no seu projeto o arquivo jquery-1.6.1.min.js está dentro da pasta WebContent/js/?

Além disso, verifique no console do navegador se o seu código javascript não possui nenhum erro de sintaxe. Para isso, dentro do Chrome (ou Firefox) aperte a tecla F11 e na janela que é aberta clique na guia Console (esse é o Console de debug do navegador que pode ser utilizado para testar código).

Depois que você entrou no console, faça um refresh da página e verifique se aparece algum erro no console. Poste qualquer erro que aparecer aqui no fórum de discussões.

solução!

Tive problemas nesse tópico também. O primeiro foi a questão do nome do método java script que realmente não funcionou usando remove(), tive que mudar para remover no JSP. O segundo foi a chamada da biblioteca do jquery no contexto. Como a lista está dentro de produtos no texto do site está "" ocorrendo que o nevegador tenta carregar do contexto vraptor-produtos/produto. Para sanar basta usar o jslt

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software