Аккордеонный стол + Выбор диапазона дат + AJAX

Question

Аккордеонный стол + Выбор диапазона дат + AJAX

Я пытаюсь изменить внутреннюю часть DIV при изменении даты в средстве выбора диапазона дат. я использую Выбор диапазона дат, а также Аккордеонный Стол чтобы помочь с этой страницей.

DIV содержит таблицу аккордеонов, которая изменяется, чтобы показать другой диапазон дат, когда для выбора другого диапазона дат используется средство выбора диапазона дат. Когда стол регенерирует, он больше не будет открываться и закрываться, как секция аккордеона.

Это HTML / PHP на моей странице, который генерирует таблицу и выбор диапазона дат:

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

Внизу страницы у меня есть вся информация для выбора диапазона дат вместе с вызовом AJAX для вызова функции 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);
}
});

Мне нужна помощь, чтобы выяснить, почему моя таблица больше не будет открываться / закрываться после регенерации данных. Если вы осмотрите страницу и посмотрите на ее содержимое, вы увидите, что таблица заполнена всеми данными, которые вы просто не можете увидеть!

1

accordion ajax daterangepicker jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Спасибо тем, кто помог!

Моя проблема заключалась в том, что событие 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);
}
});
});

1