Ajax - How refresh <DIV> after submit

Question

Hi,

How refresh part of page ("DIV") after my application release 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:

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

Page
...

...

             <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

You can use most of the normal jquery ajax function parameters with ajaxSubmit. Just pass in a success function.

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

See here for a more elaborate example.

Answer 2

How use normal JQuery in this case?

Answer 3

My problem is precisely that!!! How refresh DIV? The "response text" return all HTML and not only DIV's HTML.

Answer 4

Your problem is on the server side: you have to make a page that returns only the div you want, and then change the 'url' to match that.

Currently you're loading the full page with the AJAX call, which is why it's returning the whole page.

Answer 5

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;
 });
});

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.

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();
}

Answer 6

Nice!!!! Thanks!!!

Answer 7

One more question. I'm using TableSorter plugin with pager to show result of the search. After perform the search and replace my DIV, my pager not work. How fix that problem?

Answer 8

if you just want to refresh your div with the same static content that was in it before it was overridden by your post results, you can maybe try something like $("#Container").html($("#Container").html()); ofcourse be careful that the innerhtml has not changed, or alternatively, you can store the innerHTML in a variable in the document.ready function, then load it whenever you need to. sorry, written in haste...

Answer 9

How is it that this .ajaxSubmit() is not documented?