JQUERY TILLILLARDER + AJAX DIV محتوى مشكلة تحديث

Question

أواجه مشكلة في تحديث محتوى TILLILD و AJAX DIV. بمجرد إعادة تحميل AJAX، يتم فقد جميع وظائف TableDower. لقد جربت Livequery لكنها لا يبدو أنها تعمل بما يتجاوز القائمة الأولى من الطاولة.

<script type="text/javascript">
    $(document).ready(function(){
        $(".tabs > ul").tabs();
        $("#sortabletable").tablesorter({
            headers: {
                4: { sorter: false },
                5: { sorter: false }
            },
            widgets:['zebra'],
            sortlist:[[0]]
        });
    });
    $("#sortabletable").livequery(function(){
       $(this).tablesorter({
            headers: {
                4: { sorter: false },
                5: { sorter: false }
            },
            widgets:['zebra'],
            sortlist:[[0]]                          
       });
    });

</script>


// The AJAX function...
function AJAX(){
   try{
       xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
       return xmlHttp;
   }
   catch (e){
       try{
           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
           return xmlHttp;
       }
       catch (e){
           try{
               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
               return xmlHttp;
           }
           catch (e){
               alert("Your browser does not support AJAX.");
               return false;
           }
       }
   }
}

// Timestamp for preventing IE caching the GET request (common function)
function fetch_unix_timestamp(){
   return parseInt(new Date().getTime().toString().substring(0, 10))
}

////////////////////////////////
//
// Refreshing the DIV TIMEDIV
//
////////////////////////////////

function events_listings(){

   // Customise those settings
   var seconds = 5;
   var divid = "tab01";
   var url = "events_listings.php";

   // Create xmlHttp
   var xmlHttp_one = AJAX();
     // No cache
   var timestamp = fetch_unix_timestamp();
   var nocacheurl = url+"?t="+timestamp;

   // The code...

   xmlHttp_one.onreadystatechange=function(){
       if(xmlHttp_one.readyState==4){
           document.getElementById(divid).innerHTML=xmlHttp_one.responseText;
           setTimeout('events_listings()',seconds*1000);
       }
   }
   xmlHttp_one.open("GET",nocacheurl,true);
   xmlHttp_one.send(null);
}

// Start the refreshing process
window.onload = function startrefresh(){
   setTimeout('events_listings()',seconds*1000);
}

////////////////////////////////
//
// Refreshing the DIV TIMEINWASHINGTON
//
////////////////////////////////
var formvar = "";
function view_job(temp){

   // Customise those settings
   var seconds = 8;
   var divid = "tab02";
   var url = "view_job.php";
   formvar = temp;

   // Create xmlHttp
   var xmlHttp_two = AJAX();

   // No cache
   var timestamp = fetch_unix_timestamp();
   var nocacheurl = url+"?t="+timestamp+"&"+formvar;
       // The code...
   xmlHttp_two.onreadystatechange=function(){
       if(xmlHttp_two.readyState==4){
           document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
           setTimeout('view_job(formvar)',seconds*1000);
       }
   }
   xmlHttp_two.open("GET",nocacheurl,true);
   xmlHttp_two.send(null);
}

// Start the refreshing process
window.onload = function startrefresh(){
   setTimeout('view_job(formvar)',seconds*1000);
} 

Answer 1

بعد تحميل النتيجة، تحتاج إلى القيام به $("#table").tablesorter() مرة أخرى لإعادة فرزها. أيضا، بدلا من كتابة رمز Ajax الخاص بك باليد، استخدم $.get أو $.post من jQuery.

Answer 2

بدلا من الاتصال .tablesarدر () مرة أخرى، يمكنك تشغيل تحديث بدلا من ذلك، دون أي من النفقات العامة للاتصال .tables ():

("#table").trigger("update");

لقد استخدمت هذا بنجاح في مشروعي الخاص. يمكنك إجراء مكالمة الزناد () في: معالج النجاح.

هذر

Answer 3

كانت مشكلتك الأصلية هي أن الاستعلام المباشر يمكن فقط اكتشاف التغييرات في المستند الذي بدأ مكالمة مسج.

الإعداد مباشرة Innerhtml لن يؤدي إلى إطلاق النار. تغيير هذا الخط إلى $("#"+divid).html(xmlHttp_one.responseText) سوف تحل مشكلتك.

أنا سعيد لسماع أنك وجدت حل! ومع ذلك، تكون على دراية بأن الاستعلام المباشر لديه لمسحة المستند في كل مرة يتم تعديلها - وهو مناسب ولكن يأتي مع ضرب أداء كبير. سيكون من الأفضل وضع المكالمة tablesorter() في الخاص بك jQuery.ajax(success:) وظيفة.

Answer 4

كان لدي نفس المشكلة ووجدت هذه الطريقة.

$("#table tbody tr").addClass("to-delete");
$("#table tbody").append(data);
$("#table").trigger("update");
$("#table").trigger("appendCache");
$("#table").trigger("sorton",[[[2,1],[0,0]]]);
$("#table tbody tr.to-delete").remove();
$("#table").trigger("update");

انها ليست جميلة جدا ولكنها تعمل!

Answer 5

وجدت حل باستخدام وظيفة jQuery .jax. أسهل بكثير، ويعمل تماما.

Answer 6

كما ذكرنا باستخدام مكالمة jQuery ajax هي أفضل طريقة للذهاب: p ولكن وجدت المنشور أن تكون غامضة بعض الشيء بالنسبة للمبتدئين حتى هنا رمز الذي استخدمته في مشروعي:

    $('input.user').click(function() {
    var getContact = $(this).val();
    $.ajax({
        url: 'contact_table.php',
        data: 'userID='+getContacts,
        success: function(result) {
            $('#UserContactTable').append(result);
            $("#contact-list").tablesorter();
        }
    });
});

Answer 7

استخدم وظيفة AJAXSTOP وسيتم تشغيل التعليمات البرمجية بعد اكتمال مكالمة AJAX.

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter()
});

Answer 8

أنا جديد تماما في برمجة Java / Ajax، ولكن لديك بالضبط نفس المشكلة - عندما أقوم بتحديث محتوى DIV (باستخدام Ajax) مع طاولتي، لا يعمل TILLESORDER. إذا قمت بتحميل الجدول مباشرة إلى الصفحة الأولى للغاية (وليس في DIV)، فإن tablerwer يعمل تماما.

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

شكرا، bujan.

Answer 9

الجواب غير ذي صلة بالسؤال المطروح ولكن قد يساعد شخص ما.

في حالة وجود محتويات جدول التحميل عبر AJAX، يجب استدعاء Told LibleSter () الوظيفة () بعد التنفيذ الناجح لإجراء مكالمة AJAX. الرمز الذي يفسر نفسه ->

        $(document).ready(function(){
        //once the document is loaded make the AJAX call to required url
        $.ajax({
            url : 'nutrition.xml',  //I have accessed nutrition.xml file
            type : 'GET',
            dataType : 'xml'    //return type is xml
        })
        .done(function(xml){
            //after successful call
            /*here i have created an html string but,
            one call also use appendTo() like : 
            $("<thead></thead>").appendTo("table"); and so on.. */

            var str = "<thead><tr><th>Name</th><th>Calories</th></tr></thead><tbody>";

            //loop through each element of xml filer
            $(xml).find('food').each(function(i){
                var name = $(this).find('name').text();
                var calories = $(this).find('calories').attr('total');
                //append to string
                str = str + "<tr><td>"+name+"</td><td>"+calories+"</td></tr>";
            });
            str = str + "</tbody>";
            //set html for <table>
            $("table").html(str);

            //the main part call tablesorter() once contents are set successfully
            $("table").tablesorter({debug: true}); 
        })
        .fail(function(xhr,status,errorThrown){
            //on ajax call failure
            alert("An error occurred while processing XML file.");
        });         
    });

محتويات ملف Nutrition.xml:

<?xml version="1.0"?>
    <nutrition>
    <food>
        <name>Avocado Dip</name>
        <calories total="110" fat="100"/>
    </food>
    <food>
        <name>Bagels, New York Style </name>
        <calories total="300" fat="35"/>
    </food>
    <food>
        <name>Beef Frankfurter, Quarter Pound </name>
        <calories total="370" fat="290"/>
    </food>
    </nutrition>