(Resolvido) refresh na div. Spring mvc 3 com jquery

2 de setembro de 2012 4 respostas

menininhoBonitinho 2 de setembro de 2012

Olá, galera. Estou há 2 dias tentando resolver isso, mas continuo sem conseguir fazer um refresh na div da página.

Script da página:

<script>
            
           $(document).ready(function() {
                 $("input:submit", ".demo").button();	 
                $('input:submit').click(function(){
					
				$.ajax({
                                  url: '/spring/videos',
				  data : {name : $(this).attr("value")},
                                  success: function(response) {$('.filmes_list').html(response)}
                                  });
                                  });
                 		  });
   
                    
               
                
         
        </script>

Tenho dúvida principalmente se o “sucess” está correto para fazer o refresh. Ao invés de html(), já tentei com load() e replaceWith() também. Sem sucesso.

Quando clico no button, a requisicão com o parâmetro via jquery chega ao servidor. Isso funciona, pois fiz Sysos no método do servidor para testar. Mas a resposta, que seria o refresh da div, não rola.

Código do servidor:

@RequestMapping(value = "/videos", method = RequestMethod.GET)
	@ResponseBody
	public ModelAndView   filmesPorTipo(HttpServletRequest request, @RequestParam String name){
		
		//Syso pra testar se a requisição chegou
		System.out.println("ok");
		
		//Syso pra teste de parametro. 
		System.out.println(name);
		
		this.filmes = this.filmeDAO.listarFilmesPorTipo(name);
		
		//esse for também é só pra teste. 
		for (Filme filme : filmes) {
			System.out.println(filme.getNome());
		}
		
		
		this.modelAndView.addObject("filmes", this.filmes);
		return modelAndView;
	}

Dúvida: com esse tipo de retorno(model and view) é possível atualizar uma div ?

Dentro dessa div tem a lista de filmes que quero que seja carregada de acordo com o tipo de filme selecionado(através dos buttons).

E aqui está o body da pag.

<body>
        <div id="panel_center">
            <div class="demo">
                <div class="ui-widget">
                    <input id="aventura" value="Aventura" type="submit" />
                    <input id="suspense" value="Suspense" type="submit" />
                </div>
            </div>
            <div class="filmes_list" th:each="filme : ${filmes}">
                <p>
                    <a  th:href="@{/play(name=${filme.nome})}"><img  th:src="${'resources/imagens/miniaturas/'+filme.nome}+'.jpg'" /></a>
                    <br/>
                    <span  th:text="${filme.nome}"></span>
                </p>
            </div>
            </div>
        </body>
    </html>

4 Respostas

DarthCego 2 de set. de 2012

Ola amigo talvez tenho uma maneira de retornar o ModelAndView mas eu desconheço entao o que eu faço em um caso parecido com o seu e retornar a List direto para a jquery e montar o conteudo da minha div no proprio script assim:

@RequestMapping(value = "/videos", method = RequestMethod.GET)  
    @ResponseBody  
    public List<Filme>filmesPorTipo(HttpServletRequest request, @RequestParam String name){  
       
        this.filmes = this.filmeDAO.listarFilmesPorTipo(name);  
        return this.filmes;  
    }

$.ajax({  
                      url: '/spring/videos',  
                      data : {name : $(this).attr("value")},  
                      success: function(response) {
                           //no caso a resposta seria um array com os valores da List dai voce teria que manipula-la
                           //aqui no script  
                           manipulaAResposta(response);
                       }  
                });  
   });

Abraços

menininhoBonitinho 2 de set. de 2012

DarthCego, valeu pela resposta. Já havia tentado também com o retorno do tipo list. Vou tentar novamente dessa maneira, pois acredito que não rolou porque não consegui iterar a list que vem do server no array do jquery.

Vc pode dar um help ?

DarthCego 2 de set. de 2012

Amigo eu itero um array em jquery assim

$.each(array, function(i, val){ //acesso os objetos dentro do array simplesmente chamando eles dpois do . alert(val.nome); });

menininhoBonitinho 10 de set. de 2012

Amigo, valeu pela ajuda.

Demorei pra responder porque só mexo nesse código nas horas livres e também devido a ter pouco conhecimento da sintaxe de js e da api do jquery.

Adicionei isso logo após o evento clique para remover a listagem antiga:

$('.filme').fadeOut('slow');
  $('#filmes_list').empty();

E O Response ficou assim:

success : function(data) {
					  
			 $.each(data, function(index, val) {
                          var nomeFilme = val.nome;
                          
                          $('<img>',{src:'resources/imagens/miniaturas/'+nomeFilme+'.jpg'},'</img>').appendTo(
                          $('<a>',{href:'/spring/play?name='+nomeFilme},'</a>').appendTo($('<p class="p_left" >' + '</p>').appendTo('#filmes_list')));
                       
                  });
		}

Criado 2 de setembro de 2012

Ultima resposta 10 de set. de 2012

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados