jquery ajax tablesorter + div problema de actualización de contenido

Question

Tengo problemas con mi actualización de contenido tablesorter y Ajax div. Una vez que se vuelve a cargar el Ajax todas las funcionalidades tablesorter se pierden. He intentado livequery pero no parece trabajar más allá de la primera lista de la tabla.

<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

Después de cargar el resultado, lo que necesita hacer $("#table").tablesorter() una vez más para volver a ordenar la misma. También, en lugar de escribir el código de Ajax a mano, use $.get o $.post de jQuery

Answer 2

En lugar de llamar .tablesorter () de nuevo, puede desencadenar una actualización en su lugar, sin ningún tipo de sobrecarga de llamar .tablesorter ():

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

He utilizado este éxito en mi propio proyecto. Puede realizar la llamada trigger () en su:. Manejador éxito

HTH

Answer 3

Su tema original era que vivo consulta sólo puede detectar cambios en el documento que se inició con una llamada jQuery.

Directamente establecer innerHTML no hará que se dispare. Cambiar esa línea a $("#"+divid).html(xmlHttp_one.responseText) habría resuelto su problema.

Me alegra saber que ha encontrado una solución! Tenga en cuenta, sin embargo, que vivo de consulta tiene que escanear el documento cada vez que se modifica - que es conveniente, pero viene con un gran impacto en el rendimiento. Sería mejor para poner la llamada a tablesorter() en su función jQuery.ajax(success:).

Answer 4

Yo tenía el mismo problema y encontré este método.

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

No es muy bonita, pero funciona!

Answer 5

encontrado una solución mediante el uso de la función jQuery .ajax. mucho más fácil, y funciona perfectamente.

Answer 6

Como se mencionó el uso de la llamada jQuery Ajax es el mejor camino a seguir: P, pero me encontré con el puesto para ser un poco vago para los novatos así que aquí está el código que he usado en mi proyecto:

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

Utilice la función ajaxStop y el código se ejecuta después de la llamada AJAX es completa.

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

Answer 8

Soy bastante nuevo en la programación Java / Ajax, pero tienen exactamente el mismo problema - cuando actualice el contenido de un div (usando AJAX) con mi mesa, tablesorter no funciona. Si se me carga la tabla directamente a la primera página (no en un div), tablesorter funciona perfectamente.

Por lo tanto, estaría agradecido si se puede explicar con más detalles de cómo exactamente ha modificado el código para resolverlo.

Gracias, Bojan

Answer 9

La respuesta es irrelevante a la pregunta formulada, pero podría ayudar a alguien.

En el caso de contenidos de la tabla de carga a través de Ajax llamar a la función tablesorter () debe ser llamado después de la ejecución exitosa de llamada AJAX. El código que explica el mismo ->

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

El contenido del archivo 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>