2

Estou desenvolvendo um app web em java utilizando o framework Spring MVC. Porém chegou uma parte no projeto que estou quebrando a cabeça!.

Antes vou mostrar o print da tela para facilitar o entendimento.

Imagem: inserir a descrição da imagem aqui

O que eu quero fazer é o seguinte: quando o usuário selecionar a empresa, os elementos abaixo (salário, 13º salário e Informe de rendimentos) serão carregados dinamicamente. Nem todas as empresas tem todas as opções. Obs: Aquele botão gerar demonstrativo não existira mais.

Depois de algumas pesquisas pensei em fazer assim:

  • Criar uma função em javascript para pegar a ação do select e enviar o item selecionado via ajax. Pelo que entendi, posso usar a annotation @RequestBody para ler o json enviado pelo ajax.

  • Com o item selecionado em mãos, consigo passa-lo como parâmetro no select que faço no banco que traz as opções disponíveis para aquela empresa.

  • com a annotation @ResponseBody envio um json com as opções e crio as tags com javascript.

Não sei se a lógica está certa, mas o problema disso tudo é que não sei fazer.

Minha dúvidas:

  • Como eu recupero o item selecionado e envio para o controller do spring? Por exemplo: eu tenho um objeto empresa que tem os atributos nome e CNPJ, como pego o atributo CNPJ do item selecionado e envio para controller?

  • Depois como eu devolvo para a pagina os itens disponíveis para aquela empresa?

Vejam como está o método do meu controller:

@RequestMapping(value = "/", method = RequestMethod.GET)
public String index(Model model, 
                    @ModelAttribute("usuarioLogado") Usuario usuario,
                    Empresa empresa) {

    Funcionario funcionario = daoFuncionario.getFuncionario(usuario);
    List<Empresa> empresas = daoEmpresa.listaEmpresas(funcionario);

    model.addAttribute("empresa", empresa);
    model.addAttribute("funcionario", funcionario);
    model.addAttribute("empresas", empresas);

    return "usuario/menu";
}

Agora a página:

<form:form commandName="empresa" class="form-horizontal">
    <fieldset>
        <legend>Olá, ${funcionario.nome}</legend>

        <!-- Select Empresa -->
        <div class="form-group">
            <label for="empresa">Empresa </label>

            <!-- 
            <select class="form-control">
                <c:forEach items="${empresas}" var="empresa">
                    <option value="${empresa.cnpj}">
                        ${empresa.cnpjFormatado}- ${empresa.razaoSocial}
                    </option>
                </c:forEach>
            </select>
             -->

            <form:select path="razaoSocial" class="form-control">
                <form:options items="${empresas}" />
            </form:select>

Não sei também qual a melhor forma de fazer o select. Da primeira forma usando c:forEach ou usando a próprio select do spring.

EDIT

Pessoal, estou conseguindo pegar o item selecionado no controller assim:

$(document).ready(function() {

    function empresaSelecionaClick() {
        var cnpj = $("#razaoSocial option:selected" ).val();
        var json = {cnpj : cnpj}

        $.ajax({
            type: 'POST',
            url: 'menuDinamico',
            contentType: 'application/json',
            data: JSON.stringify(json),

            success : function(resposta){
                // pegar a lista e montar os elementos
            }
        })

        .done(function() {
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        });
    }

    $("#razaoSocial").change(empresaSelecionaClick);

});

Métodos no controller:

@RequestMapping(value = "/menu", method = RequestMethod.GET)
public @ResponseBody ModelAndView menu(@ModelAttribute("usuarioLogado") Usuario usuario, Empresa empresa) {
    ModelAndView mav = new ModelAndView("usuario/menu");

    Funcionario funcionario = daoFuncionario.getFuncionario(usuario);
    mav.addObject("funcionario", funcionario);
    mav.addObject("empresa", empresa);
    mav.addObject("empresas", daoEmpresa.listaEmpresas(funcionario));

    return mav;

}

@RequestMapping(value = "/menuDinamico", method = RequestMethod.POST)
private @ResponseBody List<UltimoPeriodoAberto> listaOpcoes(@RequestBody Empresa empresa) {

    List<UltimoPeriodoAberto> opcoes = daoUltimoPeriodoAberto.getPeriodoHolerite(empresa);

    System.out.println("CNPJ empresa: " + empresa.getCnpj());

    for (UltimoPeriodoAberto ultimoPeriodoAberto : opcoes) {
        System.out.println(ultimoPeriodoAberto.getDescricao());
    }

    return opcoes;
}

Porém no segundo método está dando null pointer execption na linha:

List<UltimoPeriodoAberto> opcoes = daoUltimoPeriodoAberto.getPeriodoHolerite(empresa);

Não estou conseguindo identificar o erro.

EDIT

Bom, eu consegui resolver. Fiz assim

Troquei a anotação @RequestBody pela @ModelAttribute:

    @RequestMapping(value = "/menuDinamico", method = RequestMethod.POST)
public @ResponseBody List<UltimoPeriodoAberto> opcoesDinamicas(@ModelAttribute("empresa") Empresa empresa) {

    System.out.println(empresa.getCnpj());
    List<UltimoPeriodoAberto> opcoes = daoUltimoPeriodoAberto.getPeriodoHolerite(empresa);

    System.out.println(opcoes.size());

    return opcoes;
}

Mudei a requisição ajax também..

$(document).ready(function() {
    function empresaSelecionaClick() {
        var empresa = $(this).serialize();

        $.ajax({
            type: 'POST',
            url: 'menuDinamico',
            data: empresa,
        })

        .done(function(data) {
            console.log("success");
            console.log(data)
        })
        .fail(function() {
            console.log("error");
        });
    }
    $("#cnpj").change(empresaSelecionaClick);
});

Agora estou recebendo o erro 406 no ajax:

The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers

O ajax não está conseguindo pegar a minha lista, alguém tem alguma sugestão?

2
  • Felipe, na sua consulta você vai passar o que como parâmetro para consulta? ID, CNPJ? Espera como resultado um JSON, por exemplo? Se for, faço um exemplo para você, só me informe a versão do Spring está usando. Commented 9/06/2015 às 19:27
  • Estou passando como parâmetro o CNPJ. A consulta estou conseguindo fazer, acredito que meu problema está em receber o retorno da requisição ajax. Por exemplo, devo retornar uma lista de objetos, e montar as tags com os atributos. Estou usando a versão 4.1.6 do spring. Commented 9/06/2015 às 19:39

2 Respostas 2

2

Da forma que você pretende usar, e a que entendi, você não precisa usar usar @ModelAttribute, já que não iremos enviar todo o objeto do modelo que está no form.

Como iremos passar apenas o CNPJ como parâmetro da consulta, irei considerar dois exemplos:

  • recebendo o CNPJ no corpo da requisição, como JSON, no formato {"cnpj": "11111111111"}. O serviço para consulta atenderá em /empresa/menudinamico
  • recebendo o CNPJ como parâmetro da URL, tendo a URL o padrão ``

Nos cenários acima, ambos retornam JSON como resposta e este é o meu HTML de teste:

<select id="razaoSocial">
  <option value="0">--- Selecione</option>
  <option value="11111111111">Empresa 1</option>
  <option value="22222222222">Empresa 2</option>
</select>

<div id="options"></div>

OK, feito esta introdução, primeiro vou lhe mostrar como ficou o controller. Para o primeiro caso teremos isto (observe que é de forma resumida):

@ResponseBody
@RequestMapping(value = "/menudinamico",
    method = {GET, POST},
    consumes = APPLICATION_JSON,
    produces = APPLICATION_JSON)
public final List<UltimoPeriodoAberto> optionByRequestBody(@RequestBody final Empresa empresa) {
    LOGGER.info("CNPJ recebido: " + empresa.getCnpj());
    return this.daoUltimoPeriodoAberto.getPeriodoHolerite(empresa);
}

Como estamos passando um JSON no corpo da mensagem precisamos falar para o spring isto, ou seja, com isto ele vai pegar o JSON e já deserializar para o objeto.

E para o segundo, seu método deverá se parecer com isto:

@ResponseBody
@RequestMapping(value = "/menudinamico/{cnpj}", method = GET, produces = APPLICATION_JSON)
public final List<UltimoPeriodoAberto> optionByRequestParam(@PathVariable final String cnpj) {
    LOGGER.info("CNPJ recebido: " + cnpj);
    return this.daoUltimoPeriodoAberto.getPeriodoHolerite(new Empresa(cnpj));
}

Neste caso, de diferente do primeiro, estamos usando @PathVariable, que é para falara para o string "injetar" o valor de acordo com o template da URL informada. Foi também retirado @RequestBody já que não estamos enviado nada no corpo da mensagem agora, mas apenas como parâmetro na URL.

Nos dois caos usamos @ResponseBody, ou seja, estamos falando para o spring serializar o retorno de acordo com o definido em produces e de acordo com o Accept enviado pelo cliente também. Você pode ver sobre isto detalhadamente na documentação de referência.

Para a chamada, vou considerar este trecho que você disse que já está OK para recuperar o valor do select do form, mudando apenas o corpo deles:

$(document).ready(function() {
    function empresaSelecionaClick() {
        var cnpj = $(this).val();
        var json = {cnpj: cnpj};

        // substitua aqui conforme necessário

    }

    $("#razaoSocial").change(empresaSelecionaClick);
});

Este para o primeiro método:

$.ajax({
    type: 'POST',
    url: '/menudinamico',
    contentType: 'application/json',
    data: JSON.stringify(json),
    success : function(data){
        innerOptionsInHTML(data);
    }
}).done(function() {
    console.log("success");
}).fail(function() {
    console.log("error");
});

Este para o segundo método:

$.ajax({
    type: 'GET',
    url: '/menudinamico/' + cnpj,
    success : function(data){
        innerOptionsInHTML(data);
    }
}).done(function() {
    console.log("success");
}).fail(function() {
    console.log("error");
});

Usei o CNPJ 11111111111 para o primeiro método, que me retornou isto:

[
   {
      "id":1,
      "nome":"Option 1"
   },
   {
      "id":2,
      "nome":"Option 2"
   }
]

E o CNPJ 22222222222 para o segundo método, que retorno isto:

[
   {
      "id":3,
      "nome":"Option 3"
   },
   {
      "id":4,
      "nome":"Option 3"
   },
   {
      "id":5,
      "nome":"Option 5"
   }
]

Para gerar o conteúdo no seu HTML, você pode fazer algo assim:

function innerOptionsInHTML(data) {
    var json = JSON.parse(data);
    var options = $("#options");
    $(options).empty();
    $.each(json, function(i, item) {
        var obj = json[i];
        $(options).append("<li id=" + obj.id + ">" + obj.nome + "</li");
    });
};

Após a execução do primeiro método, ele gerou esta parte no HTML para o primeiro caso (o segundo é semelhante):

<ul id="options">
    <li id="1">Option 1</li>
    <li id="2">Option 2</li>
</ul>

Observação: como você está usando ModelAndView, é importante gerar as opções dentro do form e com nome/id ao do objeto, para que o Spring posso "injetá-lo" corretamente.

Observação 2: estou considerando que seu ambiente está com o Spring devidamente configurado.

2
  • Cara muito obrigado. Compreendi muito bem sua explicação. Eu estava com problemas porque tinha configurado o JsonViewResolver, contentNegotiatingViewResolver e configureContentNegotiation, para retornar mais de um formato, porém não será mais necessário. Eu tinha consigo com o modelAttribute, porém nesse contexto também entendo que é melhor usar PathVariable, pois não envio o objeto todo. Commented 11/06/2015 às 12:35
  • @FelipeRenan legal que tenha conseguido Commented 11/06/2015 às 12:40
0

Eu faria da seguinte forma:

Uma chamada AJAX com o evento .change(); Ou seja, toda vez que for selecionado algum item dentro do meu select iria ser passada o nome da empresa ou id da mesma para o meu controller, com isso você poderia realizar a logica na sua action devolvendo os valores pertinentes e posteriormente montando-os na tela com o jQuery.

Exemplo:

<form:select id="razao-social" path="razaoSocial" class="form-control">
        <form:options items="${empresas}" />
</form:select>

$('#razao-social').change(function() {
    $.get("action/fazalgumaCoisa", {parametro: $(this).val()}, function(data) {
        //Criar a montagem da tela com o jQuery
    }).fail(function() {
        alert("Ocorreu um erro, tente novamente mais tarde.");
    });
});


    @RequestMapping(value = "action/faz-alguma-coisa", method=RequestMethod.GET)
    public @ResponseBody Object retornaAlgo(Model model, 
                    @ModelAttribute("usuarioLogado") Usuario usuario,
                    Empresa empresa, @RequestParam Long parametro){
   model.addAttribute("empresa", empresa);
    model.addAttribute("funcionario", funcionario);
    model.addAttribute("empresas", empresas);
        return Object;      
    }

No seu caso você deve retornar algo para ser tratado com o callback do Ajax.

3
  • Opa... valeu pela sugestão. Porém tentei fazer dessa forma e não consegui. Eu até consigo pegar item selecionado e enviar para o controller, porém não consigo fazer o restante. Com o item selecionado tenho que fazer o select no banco e retornar uma lista para a pagina. Porém quando faço isso da null pointer execption. Vou editar a pergunta para facilitar o entendimento Commented 8/06/2015 às 12:41
  • stack do nullpionter cadê? Colocou em debug e verificou o que está sendo retornado na lista de opções? Commented 8/06/2015 às 19:17
  • João, adicionei a exception no post. Fiz debug sim, mais não consigo identificar o erro. Declarei os objetos com Autowired, e o engraçado é que se eu crio uma lista dentro do método "menu" e percorro não dá a exception, o mesmo código dentro dentro do outro método está dando null pointer. Commented 8/06/2015 às 22:33

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 .