아코디언 테이블 + 날짜 범위 선택기 + AJAX

Question

날짜 범위 선택기의 날짜가 변경되면 DIV 내부를 변경하려고합니다. 이 페이지를 돕기 위해 Date Range Picker 및 Accordion Table을 사용하고 있습니다.

DIV에는 날짜 범위 선택 도구를 사용하여 다른 날짜 범위를 선택할 때 데이터의 다른 날짜 범위를 표시하도록 변경되는 아코디언 테이블이 포함되어 있습니다. 테이블이 재생성되면 더 이상 열지 않고 아코디언 섹션처럼 닫힙니다. 내가 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> 

:

이 테이블 및 날짜 범위 선택기를 생성 내 페이지의 HTML/PHP입니다 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 이벤트가 원래 테이블에 묶여 있다는 것이 었습니다. 그래서 내가해야만하는 일은 테이블을 열어 놓은 자바 스크립트와 아약스 성공 선언문의 끝 부분을 추가하는 것입니다.

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