jquery tablesorter + Ajax div Content-Update Problem

Question

Ich habe Probleme mit meinem tablesorter und Ajax div Content-Update. Sobald die Ajax alle tablesorter Funktionalitäten verloren neu geladen wird. Ich habe versucht, aber es scheint livequery nicht über Erstnotiz der Tabelle zu arbeiten.

<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

Nach dem Ergebnis Laden, müssen Sie $("#table").tablesorter() tun noch einmal neu zu sortieren sie. Auch anstatt Ihren Ajax-Code von Hand zu schreiben, verwenden Sie $.get oder $.post von jquery

Answer 2

Statt Aufruf .tablesorter () erneut, können Sie ein Update stattdessen auslösen, ohne dass der Aufwand des Aufrufs .tablesorter ():

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

Ich habe dies erfolgreich in meinem eigenen Projekt verwendet. Sie können den Auslöser () Anruf in Ihrem. Erfolg handler

HTH

Answer 3

Ihr ursprüngliches Problem war, dass Live-Abfrage nur Änderungen an das Dokument erkennen kann, die mit einem jQuery Aufruf gestartet.

Direkt Einstellung innerHTML- wird es nicht dazu führen, zu feuern. diese Linie zu $("#"+divid).html(xmlHttp_one.responseText) ändern würde Ihr Problem gelöst hat.

Ich bin froh zu hören, dass Sie eine Lösung gefunden! Beachten Sie jedoch, dass Live-Abfrage das Dokument es jedes Mal scannen muss geändert wird - was sehr praktisch ist, sondern kommt mit einem großen Leistungseinbußen. Es wäre besser, den Anruf zu setzen in Ihrer tablesorter() Funktion jQuery.ajax(success:).

Answer 4

Ich hatte das gleiche Problem und diese Methode gefunden.

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

Es ist nicht sehr schön, aber es funktioniert!

Answer 5

eine Lösung gefunden von jQuery .ajax Funktion. viel einfacher und funktioniert perfekt.

Answer 6

Wie bereits erwähnt die Jquery AJAX-Aufruf ist der beste Weg zu gehen: P aber ich fand die Post etwas vage für Anfänger sein, so ist hier der Code, den ich in meinem Projekt verwendet:

    $('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

Mit der ajaxStop Funktion und der Code wird ausgeführt, nachdem der Ajax-Aufruf abgeschlossen ist.

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

Answer 8

Ich bin ganz neu in Java / Ajax-Programmierung, aber genau das gleiche Problem - wenn ich den Inhalt eines div aktualisieren (mit Ajax) mit meinem Tisch, tut tablesorter nicht funktionieren. Wenn ich die Tabelle direkt auf die erste Seite laden (nicht in ein div), Tablesorter perfekt funktioniert.

Also, ich würde dankbar sein, wenn Sie in mehr Details erklären, wie genau Sie Ihren Code geändert, um es zu lösen.

Danke, Bojan

Answer 9

Die Antwort ist irrelevant für die Frage gestellt, aber es könnte jemand helfen.

Bei Ladetabelleninhalten über AJAX rufen Sie die Funktion tablesorter () muss nach erfolgreicher Ausführung von AJAX-Aufruf aufgerufen werden. Code, der die gleichen erklärt ->

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

Der Inhalt nutrition.xml Datei:

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