web-dev-qa-db-ja.com

Ajax-送信後に<DIV>を更新する方法

アプリケーションが送信をリリースした後、ページの一部（ "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>

ありがとう。

jqueryajaxrefreshsubmit
7
user107712

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

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

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

3
mishac

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

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

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

0
rz.

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

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

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

0
Ryan

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

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

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

0
Shane