2009-04-05 13 views
5

Ich habe Probleme mit meinem Tablesorter und Ajax div Inhalt Update. Sobald der Ajax neu geladen ist, gehen alle Funktionen des Tafelsortierers verloren. Ich habe versucht, Live-Abfrage, aber es scheint nicht über die erste Auflistung der Tabelle zu arbeiten.jquery tablesorter + Ajax Div Inhalt Update Problem

<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); 
} 

Antwort

7

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

+0

Dank Kumpel. Ich habe das gerade herausgefunden und jquery .ajax jetzt benutzt. es funktioniert perfekt. – Nalla

+0

Keine Sorgen :) Sie können upvote und markieren Sie die Antwort als akzeptiert, wenn Sie möchten –

+1

Aufruf der Trigger() -Methode sollte funktionieren, nach meiner Antwort. Ich vermute, dass es weniger Aufwand als das Aufrufen von .tablesorter() hat. –

1

Eine Lösung gefunden mit jQuery .ajax Funktion. viel einfacher und funktioniert perfekt.

2

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

Durch direktes Setzen von innerHTML wird es nicht ausgelöst. Das Ändern dieser Zeile auf $("#"+divid).html(xmlHttp_one.responseText) hätte Ihr Problem gelöst.

Ich bin froh zu hören, dass Sie eine Lösung gefunden haben! Beachten Sie jedoch, dass Live Query das Dokument bei jeder Änderung scannen muss - was praktisch ist, aber mit einem großen Leistungseinbruch einhergeht. Es wäre besser, den Anruf auf tablesorter() in Ihrer jQuery.ajax(success:) Funktion zu setzen.

+0

Vielen Dank für diese Idee Sidney. Ich habe meinen Code jetzt aktualisiert, mit dem Aufruf von tablesorter inside success:, und seiner viel besseren Ausführung, und eliminierte das Flimmern, das durch Live-Abfrage verursacht wurde. Danke nochmal. – Nalla

0

Ich bin ziemlich neu in Java/Ajax-Programmierung, aber habe genau das gleiche Problem - wenn ich den Inhalt eines div (mit Ajax) mit meiner Tabelle aktualisieren, funktioniert salesorter nicht. Wenn ich die Tabelle direkt auf die allererste Seite lade (nicht in ein div), dann funktioniert tablesorter perfekt.

So wäre ich sehr dankbar, wenn Sie genauer erklären können, wie genau Sie Ihren Code geändert haben, um ihn zu lösen.

Danke, Bojan

24

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

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

ich verwendet habe, dies erfolgreich in meinem eigenen Projekt. Sie können den Aufruf von trigger() in Ihrem: success handler vornehmen.

HTH

+2

Danke. Das ist wirklich hilfreich! Wenn Sie einen benutzerdefinierten Parser schreiben, stellen Sie sicher, dass er den korrekten Typ (numerisch oder Text) zurückgibt, andernfalls funktioniert dies nicht für diese Spalte. –

+2

OMG, du hast gerade mein Leben gerettet. Danke danke danke. – dsummersl

+0

In meinem Projekt nach dem Aktualisieren des Tabellenkörpers, nachdem ich auf den Sortierer einer beliebigen Spalte geklickt hatte, ersetzte er den Körper durch den letzten Inhalt. Aber diese Lösung (Trigger ("update")) funktioniert wie ein Zauber. Danke – Ehsan

1

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(); 
     } 
    }); 
}); 
2

Ich hatte das gleiche Problem und fand diese Methode.

$("#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 hübsch, aber es funktioniert!

1

Verwenden Sie die AjaxStop-Funktion und der Code wird ausgeführt, nachdem der Ajax-Aufruf abgeschlossen ist.

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

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

Beim Laden von Tabelleninhalten über AJAX-Aufruf muss nach erfolgreicher Ausführung des AJAX-Aufrufs die Funktion tablesorter() aufgerufen werden. Code, der die gleiche 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>