Question

我的页面加载并显示加载微调器图标。在我的数据表中填充数据后，下拉选择中的后续选择[更改]不会触发微调器。我甚至将jQuery放在抓取新数据的函数中，以加载到数据表中。粘贴整个文件的代码太多，但是微调器是样式化的，然后jQuery在Ajax调用之前和成功之后显示并隐藏它：

<style>
#div_loading_image { 
        display:none; 
        position:absolute; 
        background: rgba(255, 255, 255, .5);
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        top: 10%;
        left: 60%;
    }
</style>

然后在标签内：

<div id="div_loading_image"><img id="loading_image" src="images/ajax-loader.gif" /></div>

接下来，在内部文档就绪，我获取数据，设置数据表，添加下拉更改功能：

jQuery(document).ready(function (){
get_data(); //doing this here allows page refresh to populate page with current LP and FY selection.

var table = jQuery('#am_status').DataTable({
   scrollY:true,
   scrollX:true,
   scrollCollapse: true,
   paging:false,        
   fixedHeader: true,
   autoWidth: true,
   //dom: 'Bfrtip', //has to be here, it puts the buttons in the dom.
   dom: 'Bfrtip', 
   //buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
   buttons: ['copy', 'csv', 'excel', 'print']
});

jQuery('#fy_select').on('change', function() {
    jQuery('#div_loading_image').show();
    get_data();
})

然后获取数据：

 function get_data() { 

    jQuery('#div_loading_image').show();    
    var fy = jQuery('#fy_select').val();

jQuery.ajax({
            url: "https://fabrik.smartstartinc.net/ncpcphp/<?php echo THIS_DIR; ?>/am_status_get_info.php",
            //contentType: "application/json",
            data: {fy: fy},
            dataType: "json",
            type: 'post',
            success: function(data, XMLHttpRequest) {
                console.log(data);
                table.clear(); //otherwise the table will append to the previous Retrieve.
                var counter = 0; //to tag the dynamic fields with their own unique identifying class name.
                var index = 0;
                //console.log("data.length/before .each: " + data.length);

然后查看返回的数据：

jQuery.each(data, function(index) {

处理数据并将其推入数据表：

table.row.add([
                        info_01, info_02, info_03, info_04, info_05, info_06, info_07, info_08, info_09, info_10, info_11, info_12, info_13, info_14, info_15, info_16, info_17
                        //am_status_info[0], am_status_info[0], am_status_info[2], am_status_info[3], am_status_info[4], am_status_info[5], am_status_info[6], am_status_info[7], am_status_info[8], am_status_info[9], am_status_info[10], am_status_info[11], am_status_info[12], am_status_info[13], am_status_info[14], am_status_info[15], am_status_info[16]
                    ]).draw();

然后完成get_data（）函数：

}); //.each
                //} //for

                jQuery('#div_loading_image').hide();
                console.log("data.length/after .each: " + data.length);

                //now after page is loaded, scroll through and check the the checkboxes.
                //note that above to add checking logic would make code readability much lower.
           },
           error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
           }
        }); //.ajax
    //}, 0); //setTimeout

        setTimeout(align_table, 500); //otherwise, DataTable headers do not align with table data population.
        return false;
}

}）;

我希望省略一些代码不会妨碍故障排除。任何想法为什么div节目在后续选择下拉后都不会触发？

Answer 1

尝试类似：

$(document).on('change', '#fy_select', function () {

});

事件jQuery('#fy_select').on('change', function() {只是在事件创建时基于现有DOM触发..

load spinner仅在第一次下拉选择后才起作用

1 个答案: