jquery tablesorter + ajax div problème de mise à jour du contenu

Question

Je vais avoir du mal avec mon tablesorter et ajax div mise à jour de contenu. Une fois que la ajax est rechargé toutes les fonctionnalités de tablesorter sont perdues. J'ai essayé livequery mais il ne semble pas fonctionner au-delà de la première liste de la table.

<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

Après avoir chargé le résultat, vous devez faire $("#table").tablesorter() une fois de plus pour re-trier. En outre, plutôt que d'écrire votre code ajax main, utilisez $.get ou $.post de jquery

Answer 2

Au lieu d'appeler .tablesorter () à nouveau, vous pouvez déclencher une mise à jour à la place, sans aucun des frais généraux d'appeler .tablesorter ():

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

Je l'ai utilisé avec succès dans ce mon propre projet. Vous pouvez faire l'appel déclencheur () dans votre. Gestionnaire succès

HTH

Answer 3

Votre question initiale était que la requête ne peut en direct détecter des modifications au document qui a commencé par un appel jQuery.

réglage directement innerHTML ne génèreraient pas au feu. Changing cette ligne à $("#"+divid).html(xmlHttp_one.responseText) aurait résolu votre problème.

Je suis heureux d'apprendre que vous avez trouvé une solution! Sachez toutefois, que la requête en direct doit numériser le document à chaque fois qu'il est modifié - ce qui est pratique, mais est livré avec un grand succès de la performance. Il serait préférable de mettre l'appel à tablesorter() dans votre fonction jQuery.ajax(success:).

Answer 4

J'ai eu le même problème et a trouvé cette méthode.

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

Il est pas très joli, mais ça marche!

Answer 5

trouvé une solution en utilisant la fonction de jQuery. beaucoup plus facile, et fonctionne parfaitement.

Answer 6

Comme mentionné en utilisant l'appel AJAX jquery est la meilleure façon d'aller: P mais je trouve le poste à être un peu vague pour les débutants est donc ici le code que j'ai utilisé dans mon projet:

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

Utilisez la fonction ajaxStop et le code sera exécuté après l'appel ajax est terminé.

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

Answer 8

Je suis tout à fait nouveau dans la programmation java / ajax, mais ont exactement le même problème - quand je mets à jour le contenu d'un div (en utilisant ajax) avec ma table, tablesorter ne fonctionne pas. Si je charge la table directement à la première page (pas dans un div), tablesorter fonctionne parfaitement.

Alors, je serais reconnaissant si vous pouvez expliquer plus en détail exactement comment vous modifié votre code pour le résoudre.

Merci, Bojan

Answer 9

La réponse est non pertinente à la question posée, mais il peut aider quelqu'un.

En cas de contenu de la table de chargement via AJAX appeler la fonction tablesorter () doit être appelée après l'exécution réussie d'appel AJAX. Code qui explique la même ->

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

Le contenu du fichier 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>