Ajax - How to update <DIV> after submit

Question

How can I refresh only part of the page ("DIV") after my application releases submit? I am using jQuery with the ajaxForm plugin. I set my goal using "divResult", but the page repeats 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> 

Page

  <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> 

Thanks.

Answer 1

To solve this problem with 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; }); }); 

you can force the server to return only the html that needs to be inserted in the div, and not in the rest of the html document.

I really don't know the TableSorter plugin, but I know that you will need to reinitialize your TableSorter plugin every time you reload the element. so add a row to your success function that targets your table like

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

Answer 2

Your server side problem: you need to create a page that returns only the ones you want, and then change the "url" to match.

You are currently loading a full page with an AJAX call, so it returns the whole page.

Answer 3

You can use most of the standard jjery ajax function parameters with ajaxSubmit. Just go to the success function.

 $('#formSearch').ajaxSubmit({success: function(){ /* refresh div */ }); 

See here for a more detailed example.

Answer 4

If you just want to update your div with the same static content that was in it before it is overridden by your posting results, you can try something like:

 $("#Container").html($("#Container").html()); 

Of course, be careful that the inner HTML does not change, or, alternatively, you can save innerHTML in a variable in the document.ready() function, and then load it when you need to. Sorry, written in a hurry.

Answer 5

Using jQuery, sometimes when I make an aget aget call to update the database, I reload / refresh another part of the page using simple jQuery . load in the success callback function to replace the contents of the div.

 $("#div_to_refresh").load("url_of_current_page.html #div_to_refresh") 

I would like to note that this is not the most efficient way to reload a small part of the data, and therefore I would use it only in a low traffic web application, but it is easy to encode it.