JQuery - Submit - Atualizar apenas resultado da pesquisa

Front-end
#1

Galera!

To com um problemão.
Tenho que fazer uma página de pesquisa com filtros e um botão de pesquisa que ao ser clicado, deve fazer a busca e reenderizar apenas o DIV do resultado. Setei o TARGET para o div do resultado, mas quando mando pesquisar, minha página mostra uma cópia inteira de si própria (banners, filtros, resultado) dentro do DIV.
Eu queria que apenas o DIV de resultado fosse reenderizado. Como fazer? Estou usando o lugin JQueryFrom para fazer o submit da página.

Declaração do método ajax

        function submeter(){
            var options = {
              target: "#divResultado",
              url: "http://localhost:8081/teste/pesquisar.action",
              success: showResponse
            };
            $("#formPesquisar").ajaxSubmit(options);
            return false;
        }

        function showResponse(responseText, statusText){
            $("#tableResultado").trigger("update").tablesorterPager({container: $("#pager")});
        }

Botão

<input id="btTeste" type="submit" value="teste" onclick="submeter();" >
#2

Dá uma olhada nesse cara aqui

www.livrojquery.com.br

#3

Dei uma olhada no livro, mas não achei o que quero. Achei como reenderizar o target com outra página JSP ou substituí-lo por trechos em HTML. Meu problema é que não gostaria de escrever um trecho de HTML relativo à tabela de resultado da minha pesquisa. Isso ficaria confuso para o programador.

#4

Qual a dificuldade de fazer:

$("#target").html("novoConteudo");

É o mesmo que usar inneHtml, ao meu ver já é um padrão de uso difundido.

#5

Entendo o que você quis dizer, mas na verdade não quero apenas mostrar “Mensagem enviada com sucesso!” ou “Registro cadasdrado”. Minha página possui um HTML inicial com minha “DIV” de resultado mostrando apenas as colunas da “table” que vai tabular o resultado da pesquisa. Após retornar do servidor, esse HTML mudou! Já é outro! No entanto trata-se da mesma página. Eu quero pegar esse HTML de retorno e dizer para ele alterar apenas a “div” de resultado e não colocar mensagens, outro JSP ou mesmo repetir a página inteira(banner, menus, botões) dentro na minha “div” que setei como TARGET.

#6

Eu entendi e o comando é o mesmo, a diferença é que vc deve passar a sua nova página no lugar da mensagem, inclusive utilizo muito esta prática.

Segue um exemplo de onde eu mudo um div especifico por uma página com conteudo diferente.


	PedidoLookup.carregarTelaCalculoDesconto(parametros, function (data) { // chamada AJAX ao DWR
            $("#painel1").html(data); // a nova pagina(data) sera carregada no div painel1.
	});
#7

Olha só. Fiz isso na declaração e mesmo assim continua repetindo a página inteira no meu DIV

<script>
   $(document).ready(function() {
       $("#formPesquisar").submit(function() {
            var options = {
              url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action",              
              success: function(data){
                    $("#divResultado").html(data);
              }
            }
           $(this).ajaxSubmit(options);
           return false;
       });
   })
</script>

Página

<s:form id="formPesquisar" theme="simple" class="formulario" method="POST">
...

<input id="btTeste" type="submit" value="teste" >

...

                <div id="divResultado" class="quadro_conteudo" >
                    <table id="tableResultado" summary="Resultado da Pesquisa" class="tablesorter">
                        <thead>
                            <tr>
                                <th style="text-align:center;">
                                    <input id="checkTodos" type="checkbox" title="Marca/Desmarcar todos" />
                                </th>
                                <th scope="col">Nome</th>
                                <th scope="col">Nome Fantasia</th>
                            </tr>
                        </thead>

                        <tbody>
                            <s:iterator value="entityList">
                                <s:url id="urlEditar" action="editar"><s:param name="id" value="%{id}"/></s:url>
                               <tr>
                                   <td style="text-align:center;"><s:checkbox id="checkSelecionado" name="selecionados" theme="simple" fieldValue="%{id}"></s:checkbox></td>
                                   <td> <s:a href="%{urlEditar}"><s:property value="nome"/></s:a></td>
                                   <td> <s:a href="%{urlEditar}"><s:property value="nomeFantasia"/></s:a></td>
                               </tr>
                            </s:iterator>
                        </tbody>
                    </table>
                    
                    <div id="pager" class="pager">
                        <form>
                            <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/first.png" class="first"/>
                            <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/prev.png" class="prev"/>
                            <input type="text" class="pagedisplay"/>
                            <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/next.png" class="next"/>
                            <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/last.png" class="last"/>
                            <select class="pagesize">
                                <option selected="selected" value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="<s:property value="totalRegistros"/>">todos</option>
                            </select>
                            <s:label>Total de registros: <s:property value="totalRegistros"/></s:label>
                        </form>
                    </div>
                    <br/>
            </div>
#8

Finalmente achei a resposta.

Podemos utilizar o comando load do JQuery:

        $("#formPesquisar").submit(
            function(){
                $("#divResultado").ajaxStart(function() {
                       $("#divResultado").text("processando...").show();
                });
               $("#divResultado").load('PesquisarPessoa.jsp #divResultado');
            }
        );

$("#divResultado").load(‘PesquisarPessoa.jsp #divResultado’);
$("#divResultado") informa o target, ou seja, aquilo que será atualizado.
PesquisarPessoa.jsp indica a página a ser carregada. No retorno do método, a página é retornada inteira.
O parametro #divResultado serve filtrar apenas a parte que vc deseja da página e que será usada para atualizar o target.

#9