阿贾克斯 - 如何刷新＆LT; D​​IV＆GT;提交后， [英] Ajax - How refresh <DIV> after submit

问题描述

在我的应用程序的版本我怎样才能刷新页面（DIV）只是一部分提交？ 我使用JQuery与插件当作ajaxForm。 我把我的目标与divResult，但网页重复你的内容里面的divResult。 资料来源：

How can I refresh just part of the page ("DIV") after my application releases a submit? I'm use JQuery with plugin ajaxForm. I set my target with "divResult", but the page repeat your content inside the "divResult". Sources:

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

页

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

 <input id="btTest" type="submit" value="test" >      

 ...      

                 <div id="divResult" class="quadro_conteudo" >      
                     <table id="tableResult" class="tablesorter">      
                         <thead>      
                             <tr>      
                                 <th style="text-align:center;">      
                                     <input id="checkTodos" type="checkbox" title="Marca/Desmarcar todos" />      
                                 </th>      
                                 <th scope="col">Name</th>      
                                 <th scope="col">Phone</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="name"/></s:a></td>      
                                    <td> <s:a href="%{urlEditar}"><s:property value="phone"/></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> 

感谢。

推荐答案

要解决这个使用jQuery我想试试这个;

To solve this using jquery I would try this;

$(document).ready(function() {
	$("#formSearch").submit(function() {
		var options = {
			/* target:"#divResult", */

			success: function(html) {
				$("#divResult").replaceWith($('#divResult', $(html)));
			},

			url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"
		}

		$(this).ajaxSubmit(options);
		return false;
	});
});

另外，你可以让服务器返回只需要插入DIV而不是HTML文档的其余部分的HTML。

alternatively, you could get the server to return just the html that needs to be inserted into the div rather than the rest of the html document.

我真的不知道该tablesorter插件，但我知道，你将需要重新初始化tablesorter插件每次重新加载元素的时间。所以行添加到你的成功的功能是针对你的表，如

I don't really know the TableSorter plugin but I do know that you will need to reinitialize your TableSorter plugin each time you reload the element. so add a line to your success function that targets your table such as

success: function(html) {
    var resultDiv = $("#divResult").replaceWith($('#divResult',     $(html)));

    $('table.tablesorter', resultDiv).TableSorter();
}

这篇关于阿贾克斯 - 如何刷新＆LT; D​​IV＆GT;提交后，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！