jquery tablesorter + ajax div içerik güncelleme sorunu

Question

Tablolamacı ve ajax div içerik güncellemesiyle ilgili sorun yaşıyorum. Ajax yeniden yüklendikten sonra, tüm tableorter işlevleri kaybolur. Canlı sorgulamayı denedim, ancak tablonun ilk listesinin ötesinde çalışmak işe yaramıyor.

<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

sonucu yükledikten sonra, yeniden sıralama için bir kez daha $("#table").tablesorter() yapmanız gerekir. Ayrıca, ajax kodunuzu el ile yazmak yerine, $.get veya $.post nquery'yi kullanarak

Answer 2

jQuery .ajax işlevini kullanarak bir çözüm bulun. çok daha kolay ve mükemmel çalışıyor.

Answer 3

Özgün sorun, Canlı Sorgu'nun yalnızca jQuery çağrısı ile başlayan belgede yapılan değişiklikleri algılayabilmesiydi.

Doğrudan innerHTML ayarı, ateşlenmesine neden olmaz. Bu satırı $("#"+divid).html(xmlHttp_one.responseText) olarak değiştirmek sorununuzu çözmüş olurdu.

Bir çözüm bulduğunuzu duyduğuma sevindim! Bununla birlikte, Live Query'nin her değiştirildiği zaman belgeyi taraması gerektiğine dikkat edin - ki bu uygun ancak büyük bir performans isabetiyle geliyor. Aramanızı, jQuery.ajax(success:) işlevinize tablesorter() numarasına koymak daha iyi olur.

Answer 4

Java/ajax programlamada oldukça yeniyim, ancak tam olarak aynı sorun var - bir div içeriğini (tabloyu kullanarak ajax kullanarak) güncellediğimde, tablolamacı çalışmıyor. Tabloyu doğrudan ilk sayfaya (div'a değil) yüklersem, tablolamacı mükemmel çalışır.

Bu yüzden, daha fazla ayrıntıda açıklamak için kodunuzu tam olarak nasıl değiştirdiğinizi açıklayabilirseniz çok iyi olurdum. Ben kullandım

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

: Yerine tekrar) (.tablesorter çağıran

sayesinde Bojan

Answer 5

, siz) (.tablesorter çağırma yükü hiçbiri olmadan yerine bir güncelleme tetikleyebilir Bu kendi projemde başarıyla. Trigger() çağrısını kendi başınıza gerçekleştirebilirsiniz: başarı işleyicisi.

HTH

Answer 6

olarak gereken en iyi yolu jQuery AJAX çağrısı kullanılarak bahsedilen: P ama işte benim projede kullanılan kod başlayanlar için biraz belirsiz olduğu yazı bulundu:

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

Aynı problem vardı ve bu yöntemi buldum.

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

Çok güzel değil ama işe yarıyor!

Answer 8

ajaxStop işlevini kullanın ve ajax çağrısı tamamlandıktan sonra kod çalışır.

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

Answer 9

Yanıt, sorulan soruyla ilgisizdir, ancak birilerine yardımcı olabilir.

AJAX aracılığıyla tablo içeriği yükleme durumunda, AJAX çağrısının başarılı bir şekilde yürütülmesinden sonra işlev tabloları() çağrılmalıdır.Aynı açıklıyor Kodu - nutrition.xml dosyanın>

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

içeriği:

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