2009-04-05 14 views
5

Tengo problemas con mi actualización del contenido de tablesorter y ajax div. Una vez que se recargó el ajax, se pierden todas las funciones de tablesorter. He intentado con livequery, pero parece que no funciona más allá del primer listado de la tabla.jquery tablesorter + ajax problema de actualización de contenido div

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

Respuesta

7

Después de cargar el resultado, que tiene que hacer $("#table").tablesorter() una vez más para volver a ordenar la misma. Además, en lugar de escribir su código ajax a mano, use $.get o $.post desde jquery

+0

Gracias compañero. Me di cuenta de eso, y ahora uso jquery .ajax. funciona perfectamente – Nalla

+0

No se preocupe :) Puede votar y marcar la respuesta como aceptada si quiere –

+1

llamando al método trigger() debería funcionar, según mi respuesta. Sospecho que puede tener menos gastos generales que llamar a .tablesorter(). –

1

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

2

Su problema original fue que Live Query solo puede detectar cambios en el documento que comenzó con una llamada jQuery.

La configuración directa 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 encontraste una solución! Tenga en cuenta, sin embargo, que Live Query tiene que escanear el documento cada vez que se modifica, lo cual es conveniente, pero viene con un gran golpe de rendimiento. Sería mejor llamar a tablesorter() en su función jQuery.ajax(success:).

+0

Muchas gracias por la idea de Sidney. He actualizado mi código ahora, con la llamada de tablesorter dentro del éxito: y su ejecución mucho mejor, y eliminé el parpadeo causado por livequery. gracias de nuevo. – Nalla

0

Soy bastante nuevo en la programación de java/ajax, pero tengo exactamente el mismo problema: cuando actualizo el contenido de un div (usando ajax) con mi tabla, el tablesorter no funciona. Si cargo la tabla directamente en la primera página (no en un div), el tablesorter funciona perfectamente.

Por lo tanto, me gustaría mucho si puede explicar con más detalles cómo exactamente modificó su código para resolverlo.

Gracias, Bojan

24

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

que he usado esto con éxito en mi propio proyecto. Puede hacer que la llamada a trigger() en su: controlador de éxito.

HTH

+2

Gracias. Eso es realmente útil! Si escribe un analizador personalizado, asegúrese de que devuelve el tipo correcto (numérico o de texto), de lo contrario, esto no funcionará para esa columna. –

+2

Dios mío, acabas de salvarme la vida. Gracias, gracias, gracias. – dsummersl

+0

En mi proyecto después de actualizar el cuerpo de la tabla, una vez que hice clic en el clasificador de cualquier columna, reemplazó el cuerpo con el último contenido. Pero usar esta solución (disparador ("actualización")) funcionó como un amuleto. Gracias – Ehsan

1

Como se ha mencionado el uso de la llamada jQuery Ajax es el mejor camino a seguir: P pero me pareció que 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(); 
     } 
    }); 
}); 
2

Tuve 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 bonito pero funciona!

1

Utilice la función ajaxStop y el código se ejecutará después de que se complete la llamada ajax.

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

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

En caso de cargar el contenido de la tabla a través de la llamada AJAX, debe llamarse a la función tablesorter() después de la ejecución exitosa de la llamada AJAX. 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> 
Cuestiones relacionadas