代码之家 › 专栏 › 技术社区 › LucyTurtle

手风琴表+日期范围选择器+AJAX

daterangepicker accordion ajax jquery php

LucyTurtle · 技术社区 · 6 年前

当日期范围选择器中的日期更改时,我正在尝试更改DIV的内部。我正在使用 Date Range Picker 和 Accordion Table 以帮助处理此页。

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>

在页面底部,我有日期范围选择器的所有信息,以及调用table()函数的AJAX调用。下面是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 回复 | 直到 6 年前

LucyTurtle 6 年前

感谢那些帮助过我的人!

我的问题是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);
        }
    });
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前