Ajax - Как обновить <DIV>после отправки

Question

Как я могу обновить только часть страницы ("DIV") после того, как мое приложение выпустило отправку? Я использую JQuery с плагином ajaxForm. Я установил свою цель с помощью «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>

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> 

Спасибо.

Answer 1

Чтобы решить эту проблему с помощью 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();
}

Answer 2

Ваша проблема на стороне сервера: вам нужно создать страницу, которая возвращает только нужный вам div, а затем изменить 'url', чтобы соответствовать этому.

В настоящее время вы загружаете полную страницу с помощью вызова AJAX, поэтому он возвращает всю страницу.

Answer 3

Используя jQuery, иногда, когда я выполняю вызов .get ajax для обновления базы данных, я перезагружаю / обновляю другую часть страницы, используя простой оператор jQuery .load в функции обратного вызова success, чтобы заменить содержимое div.

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

Хочу отметить, что это не самый эффективный способ перезагрузить небольшую порцию данных, и поэтому я бы использовал его только в веб-приложении с низким трафиком, но его легко кодировать.

Answer 4

Если вы просто хотите обновить div тем же статическим контентом, который был в нем до того, как он был переопределен результатами вашего поста, вы можете попробовать что-то вроде:

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

конечно, будьте осторожны, чтобы внутренний HTML не изменился, или же вы можете сохранить innerHTML в переменной в функции document.ready(), а затем загружать ее всякий раз, когда вам это нужно. Извините, написано на скорую руку.

Answer 5

Вы можете использовать большинство обычных параметров jjery ajax-функции с ajaxSubmit. Просто передайте функцию успеха.

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

См. здесь для более подробного примера.