Ajax - How aktualisieren <DIV> nach dem Einreichen

Wie kann ich aktualisieren nur ein Teil der Seite ("DIV") nach meiner Anwendung löst ein submit?
Ich verwende JQuery-plugin ajaxForm.
Ich hatte mein Ziel mit "divResult", aber die Seite, wiederholen Sie Ihre Inhalte in der "divResult".
Quellen:

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

Seite

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

Dank.

InformationsquelleAutor user107712 | 2009-05-15

Lösen diese mithilfe von jquery-ich würde versuchen, diese;

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

alternativ könnten Sie die server-Rückgabe nur der html-Code muss eingefügt werden in das div eher als der rest des html-Dokuments.

Ich weiß wirklich nicht, das TableSorter plugin, aber ich weiß, dass müssen Sie neu zu initialisieren Sie Ihren TableSorter-plugin jedes mal, wenn Sie und laden Sie das element. so fügen Sie eine Zeile zu Ihrem Erfolg-Funktion, die Ziele Ihrer Tabelle, wie

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

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

InformationsquelleAutor Matt Smith

2

Dein problem auf der server-Seite: Sie haben, um eine Seite, die gibt nur die div, die Sie wollen, und ändern Sie dann die " url " zu entsprechen.

Derzeit sind Sie das laden der vollständigen Seite mit der AJAX-Aufruf, der ist, warum es ist Rückkehr die ganze Seite.

InformationsquelleAutor mishac
0

Können Sie die meisten der normalen jquery ajax-Funktion Parameter mit ajaxSubmit. Geben Sie einfach in einen Erfolg Funktion.
```
$('#formSearch').ajaxSubmit({success: function(){ /* refresh div */ }); 
```
Sehen hier für eine aufwändigere Beispiel.

Wie normale JQuery in diesem Fall?

InformationsquelleAutor rz.
0

Wenn Sie nur wollen, zu aktualisieren Sie Ihre div mit denselben statischen Inhalten, die in es war, bevor es wurde überschrieben durch deinen post Ergebnisse, Sie können vielleicht versuchen Sie so etwas wie:
```
$("#Container").html($("#Container").html());
```
natürlich darauf achten, dass die innere HTML hat sich nicht geändert, oder alternativ können Sie speichern die innerHTML in eine variable in der document.ready() Funktion, dann laden Sie es, Wann immer Sie Sie benötigen. Sorry, written in Eile.

InformationsquelleAutor Shane
0

Verwendung von jQuery, manchmal, wenn ich eine .erhalten ajax-Aufruf zum aktualisieren einer Datenbank, die ich neu laden/aktualisieren von einem anderen Teil der Seite mit einem einfachen jQuery - .laden - Anweisung in der Erfolgs-callback-Funktion zu ersetzen, die den Inhalt einer div.
```
$("#div_to_refresh").load("url_of_current_page.html #div_to_refresh")
```
Möchte ich beachten, dass dies nicht der effizienteste Weg, um neu zu laden, einen kleinen Teil der Daten, und deshalb würde ich nur verwenden Sie es auf einem low-traffic-web-app, aber es ist einfach zu code.

InformationsquelleAutor Ryan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.