jQueryのtablesorter + Ajaxのdivのコンテンツ更新の問題

StackOverflow https://stackoverflow.com/questions/718307

  •  23-08-2019
  •  | 
  •  

質問

私はtablesorterとAjaxのdivのコンテンツ更新に問題を抱えています。アヤックスが再ロードされると、すべてのtablesorterの機能が失われます。私はlivequeryを試みたが、表の最初のリストを超えて動作するようには思えません。

<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);
}
役に立ちましたか？

解決

結果をロードした後、あなたはそれをソートし直すもう一度$("#table").tablesorter()を行う必要があります。また、jqueryのから$.getまたは$.postを使用してではなく、手であなたのAjaxコードを書くよりも、

他のヒント

の代わりに.tablesorter呼び出しの（）を再度、あなたは（.tablesorter呼び出しのオーバーヘッドのいずれかなしで、代わりに更新をトリガすることができます）：

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

私は自分のプロジェクトに成功し、これを使用しました。あなたは、あなたの中のトリガー（）呼び出しすることができます：。成功ハンドラを

HTH

あなたのオリジナルの問題はライブクエリのみjQueryのコールを開始した文書への変更を検出することができますということでした。

直接innerHTMLプロパティを設定することは、発射することはありません。 $("#"+divid).html(xmlHttp_one.responseText)にその行を変更すると、あなたの問題を解決していると思います。

私はあなたが解決策を見つけたことを聞いてうれしいです！便利ですが、大きなパフォーマンスヒットが付属しています - ライブ照会文書にそれが変更されるたびにスキャンしていること、しかし、注意してください。あなたのtablesorter()機能でjQuery.ajax(success:)の呼び出しを配置する方が良いでしょう。

私は同じ問題を抱えていたし、この方法を見つけます。

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

これは非常にきれいではないのですが、それは動作します！

jQueryのアヤックス機能を使用して、解決策を見つけました。はるかに簡単に、そして完璧に動作します。

jQueryのAJAX呼び出しを使用して説明したように行くための最善の方法である：Pが、私はので、ここで私は私のプロジェクトで使用されるコードだ初心者のために少し曖昧であることを、ポストを見つけます：

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

ajaxStop機能を使用して、AJAX呼び出しが完了した後でコードが実行されます。

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

私は、java / AJAXプログラミングにはかなり新しいですが、正確に同じ問題を抱えている - 私は私のテーブルで（AJAXを使用して）のdivの内容を更新するとき、tablesorterは機能しません。私は完璧に動作tablesorter（ないのdivに）非常に最初のページに直接テーブルをロードする場合。

あなたはそれを解決するために、あなたのコードを修正する方法を正確に、より詳細に説明することができた場合、

だから、私はGREATFULになります。

おかげで、ボヤン

答えは聞かれる質問とは無関係であるが、それは、誰かを助けるかもしれない。

AJAXを介して載置台の内容の場合にはAJAX呼び出しが正常に実行された後に呼び出されなければならない）（関数tablesorterを呼び出します。 同じ説明コード - > 

        $(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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top