7

アプリケーションが送信をリリースした後、ページの一部（ "DIV"）を更新するにはどうすればよいですか？プラグインajaxFormでJQueryを使用しています。「divResult」でターゲットを設定しましたが、ページは「divResult」内でコンテンツを繰り返します。出典：

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

ありがとう。

4

5 に答える 5

8

jqueryを使用してこれを解決するには、これを試してみます。

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

または、残りのhtmlドキュメントではなく、divに挿入する必要のあるhtmlだけをサーバーに返すようにすることもできます。

TableSorterプラグインについてはよくわかりませんが、要素をリロードするたびにTableSorterプラグインを再初期化する必要があることは知っています。したがって、次のようなテーブルを対象とする成功関数に行を追加します。

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

    $('table.tablesorter', resultDiv).TableSorter();
}
于 2009-05-15T14:32:37.530 に答える
3

問題はサーバー側にあります。必要なdivのみを返すページを作成し、それに一致するように「url」を変更する必要があります。

現在、AJAX呼び出しを使用してページ全体をロードしているため、ページ全体が返されます。

于 2009-05-15T14:31:02.447 に答える
0

通常のjqueryajax関数パラメーターのほとんどはajaxSubmitで使用できます。成功関数を渡すだけです。

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

より詳細な例については、ここを参照してください。

于 2009-05-15T14:11:04.587 に答える
0

投稿結果によって上書きされる前に含まれていたのと同じ静的コンテンツで更新したい場合divは、次のような方法を試すことができます。

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

もちろん、内部HTMLが変更されていないことに注意してください。あるいは、innerHTMLをdocument.ready()関数の変数に格納し、必要なときにいつでもロードすることができます。申し訳ありませんが、急いで書かれています。

于 2010-04-16T21:40:43.370 に答える
0

jQueryを使用して、データベースを更新するために.get ajax呼び出しを実行するときに、成功コールバック関数で単純なjQuery .loadステートメントを使用してページの別の部分をリロード/更新し、divの内容を置き換えることがあります。

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

これはデータのごく一部をリロードするための最も効率的な方法ではないため、トラフィックの少ないWebアプリでのみ使用しますが、コーディングは簡単です。

于 2014-08-04T23:54:27.987 に答える