أياكس - كيف التحديث بعد تقديم

Question

وكيف يمكنني تحديث مجرد جزء من الصفحة ( "DIV") بعد بلدي النشرات التطبيق يقدم؟ أنا استخدم مسج مع 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>

صفحة

 <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

لحل هذه مسج باستخدام أود أن حاول هذا؛

$(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 والتي يجب إدراجها في شعبة بدلا من بقية الوثيقة أتش تي أم أل.

وأنا لا أعرف حقا المساعد TableSorter لكنني أعرف أنك لن تحتاج إلى إعادة تهيئة TableSorter بك المساعد في كل مرة إعادة تحميل العنصر. ذلك إضافة خط إلى وظيفة نجاحكم الذي يستهدف الجدول الخاص بك مثل

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

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

Answer 2

والمشكلة هي على الجانب الخادم: لديك لجعل صفحة وترجع فقط شعبة تريدها، ثم قم بتغيير "رابط" في المباراة التي

.

وكنت بصدد تحميل الصفحة كاملة مع الدعوة AJAX، وهذا هو السبب انها تعود صفحة كاملة.

Answer 3

ويمكنك استخدام معظم المعلمات وظيفة مسج اياكس طبيعية مع ajaxSubmit. يمر في وظيفة النجاح.

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

هنا لمثال أكثر تفصيلا.

Answer 4

إذا كنت ترغب فقط لتحديث div مع نفس محتوى ثابت الذي كان فيه قبل تجاوز من قبل آخر النتائج الخاصة بك، يمكنك ربما محاولة شيئا مثل:

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

وبالطبع يجب الحرص على أن HTML الداخلية لم يتغير، أو بدلا من ذلك، يمكنك تخزين HTML داخلي في متغير في وظيفة document.ready()، ثم تحميله كلما كنت في حاجة إليها. آسف، وكتب على عجل.

Answer 5

وعن طريق مسج، وأحيانا عندما أقوم مكالمة. احصل على اياكس لتحديث قاعدة البيانات، وتحميل / تحديث جزء آخر من الصفحة باستخدام مسج بسيط <لأ href = "http://api.jquery.com/load/ "يختلط =" نوفولو ">. تحميل بيان في وظيفة نجاح الاستدعاء إلى استبدال محتويات شعبة.

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

وأود الإشارة إلى أن هذه ليست الطريقة الأكثر فعالية لتحميل جزء صغير من البيانات، وبالتالي أود أن استخدامه فقط على تطبيق ويب انخفاض حركة المرور، ولكنها بسيطة إلى رمز.