2009-04-05 16 views
5

मुझे अपने टेबललेटर और AJAX div सामग्री अद्यतन में समस्या हो रही है। एक बार AJAX फिर से लोड हो जाने के बाद सभी tableorter कार्यक्षमताओं खो जाते हैं। मैंने लाइवक्वरी की कोशिश की है लेकिन यह तालिका की पहली सूची से परे काम नहीं कर रहा है।jquery tableorter + AJAX 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); 
} 

उत्तर

7

परिणाम लोड करने के बाद, आप $("#table").tablesorter() एक बार और अधिक करने के लिए फिर से तरह करने के लिए इसे की जरूरत है। इसके अलावा, हाथ से अपना AJAX कोड लिखने के बजाय, $.get या $.post का उपयोग jquery

+0

धन्यवाद दोस्त। मैंने अभी यह पता लगाया है, और jquery .ajax का उपयोग कर अब। यह पूरी तरह से काम करता है। – Nalla

+0

कोई चिंता नहीं है :) अगर आप –

+1

को ट्रिगर() विधि को कॉल करना चाहते हैं, तो आप उत्तर के रूप में उत्तर को अपवर्तित और चिह्नित कर सकते हैं। मुझे संदेह है कि यह कॉल करने से कम ओवरहेड हो सकता है .tablesorter()। –

1

jQuery .ajax फ़ंक्शन का उपयोग कर समाधान मिला। बहुत आसान है, और पूरी तरह से काम करता है।

2

आपका मूल मुद्दा यह था कि लाइव क्वेरी केवल उस दस्तावेज़ में परिवर्तनों का पता लगा सकती है जो jQuery कॉल के साथ शुरू हुई थी।

प्रत्यक्ष रूप से आंतरिक HTML सेटिंग को आग लगने का कारण नहीं होगा। $("#"+divid).html(xmlHttp_one.responseText) पर उस लाइन को बदलने से आपकी समस्या हल हो जाएगी।

मुझे यह सुनकर खुशी हुई कि आपको समाधान मिला है! हालांकि, जागरूक रहें कि लाइव क्वेरी को प्रत्येक बार संशोधित होने पर दस्तावेज़ को स्कैन करना पड़ता है - जो सुविधाजनक है लेकिन एक बड़े प्रदर्शन हिट के साथ आता है। अपने jQuery.ajax(success:) फ़ंक्शन में कॉल को tablesorter() पर कॉल करना बेहतर होगा।

+0

सिडनी के विचार के लिए बहुत बहुत धन्यवाद। मैंने सफलता के अंदर टेबललेटर के लिए कॉल के साथ अब अपना कोड अपडेट किया है: और इसके बेहतर निष्पादन, और लाइवक्वरी के कारण झटके को समाप्त कर दिया। फिर से धन्यवाद। – Nalla

0

मैं जावा/AJAX प्रोग्रामिंग में काफी नया हूं, लेकिन वास्तव में वही समस्या है - जब मैं अपनी तालिका के साथ एक div (AJAX का उपयोग करके) की सामग्री को अद्यतन करता हूं, तो टेलीफ़ोर्टर काम नहीं करता है। अगर मैं सीधे पहले पृष्ठ पर तालिका लोड करता हूं (एक div में नहीं), टेबललेटर पूरी तरह से काम करता है।

तो, यदि आप अधिक जानकारी में समझा सकते हैं कि आप इसे हल करने के लिए अपने कोड को वास्तव में कैसे संशोधित करते हैं तो मैं बहुत अच्छा होगा।

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

मैं का उपयोग किया है:

धन्यवाद, बोजन

24
इसके बजाय .tablesorter बुला() फिर से

, आप .tablesorter बुला() की भूमि के ऊपर के किसी भी बिना बजाय इससे अपडेट प्रारंभ कर सकते हैं, यह सफलतापूर्वक मेरी परियोजना में है। आप ट्रिगर() को कॉल कर सकते हैं: सफलता हैंडलर।

HTH

+2

धन्यवाद। वास्तव में मददगार है! यदि कस्टम पार्सर लिखना है, तो सुनिश्चित करें कि यह सही प्रकार (संख्यात्मक या पाठ) देता है अन्यथा यह उस कॉलम के लिए काम नहीं करेगा। –

+2

ओएमजी, आपने अभी अपना जीवन बचाया है। धन्यवाद धन्यवाद धन्यवाद। – dsummersl

+0

टेबल प्रोजेक्ट को अपडेट करने के बाद मेरी प्रोजेक्ट में, एक बार जब मैंने किसी कॉलम के सॉर्टर पर क्लिक किया, तो उसने शरीर को अंतिम सामग्री से बदल दिया। लेकिन इस समाधान का उपयोग (ट्रिगर ("अपडेट")) एक आकर्षण की तरह काम किया। धन्यवाद – Ehsan

1

के रूप में jQuery AJAX कॉल का सबसे अच्छा तरीका इस्तेमाल कर रहा है जाने के लिए उल्लेख किया है: पी लेकिन मैं पद पाया इसलिए यहाँ कोड है कि मैं अपने परियोजना में इस्तेमाल है नवागंतुकों के लिए थोड़ा अस्पष्ट होने के लिए:

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

मुझे एक ही समस्या थी और इस विधि को मिला।

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

यह बहुत सुंदर नहीं है लेकिन यह काम करता है!

1

AJAXStop फ़ंक्शन का उपयोग करें और AJAX कॉल पूर्ण होने के बाद कोड चलाएगा।

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

उत्तर प्रश्न के लिए अप्रासंगिक है लेकिन यह किसी की मदद कर सकता है।

AJAX कॉल के माध्यम से लोडिंग तालिका सामग्री के मामले में फ़ंक्शन टेबललेटर() को AJAX कॉल के सफल निष्पादन के बाद बुलाया जाना चाहिए। कोड है कि एक ही बताते हैं ->

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

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> 
संबंधित मुद्दे