アコーディオンテーブル+日付範囲ピッカー+ AJAX

Question

日付範囲ピッカーの日付が変更されたときにDIVの内部を変更しようとしています。私はDate Range PickerとAccordion Tableを使ってこのページを助けています。

DIVには、日付範囲選択ツールを使用して別の日付範囲を選択したときに異なる日付範囲のデータに変更されるアコーディオン表が含まれています。テーブルが再生成されると、アコーディオンセクションのように開いたり閉じたりしなくなります。

これは、テーブルと日付範囲ピッカーを生成し、私のページのHTML/PHPである：私はAJAX呼び出しと一緒に日付範囲ピッカーのためのすべての情報を持っているページの下部に

<!-- Date selector --> 
<div id="reportrange"> 
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
    <span></span> 
</div> 

<!-- Our table --> 
<div id="replace"> 
    <?php 
     $yesterday = date("m/d/Y", strtotime('-31 hours')); 
     table($yesterday, $yesterday); 
    ?> 
</div> 

table（）関数を呼び出す。ここではAJAX呼び出しがある：

// AJAX call to our php function which creates the table 
$.ajax({ 
    url: 'php/jstranslator.php', 
    type: 'post', 
    data: {'action': 'table', 'start': begin, 'stop': stop}, 
    success:function(result){ 
     document.getElementById("replace").innerHTML = result; 
    }, 
    error: function(xhr, desc, err) { 
     console.log(xhr); 
     console.log("Details: " + desc + "\nError:" + err); 
    } 
}); 

私は、データが再生されたら近い/なぜ私のテーブルには、もはやオープンします考え出すん助けが必要。あなたがページを調べて内容を見ると、あなたはそれを見ることができないすべてのデータでテーブルがいっぱいであることがわかります！

Answer 1

助けてくれたおかげで！

私の問題は、jsイベントが元のテーブルに結びついていたことでした。だから、私がしなければならなかったのは、テーブルをオープンにしたjavascriptを追加し、ajaxの成功宣言の終わり近くに追加することでした。

/* When the date range is changed, update the table 
*/ 
$('#reportrange').on('apply.daterangepicker', function(ev, picker) { 
    var begin = picker.startDate.format('MM/DD/YYYY'); 
    var stop = picker.endDate.format('MM/DD/YYYY'); 

    // AJAX call to our php function which creates the table 
    $.ajax({ 
     url: 'php/jstranslator.php', 
     type: 'post', 
     data: {'action': 'table', 'start': begin, 'stop': stop}, 
     success:function(result){ 
      document.getElementById("replace").innerHTML = result; 
      $(function(){ 
       $(".fold-table tr.view").on("click", function(){ 
        $(this).toggleClass("open").next(".fold").toggleClass("open"); 
       }); 
      }); 
     }, 
     error: function(xhr, desc, err) { 
      console.log(xhr); 
      console.log("Details: " + desc + "\nError:" + err); 
     } 
    }); 
});