Load Spinner funktioniert erst nach dem ersten Drop-down Wählen Sie

Question

Meine Seite wird geladen und zeigt die mit dem Symbol zum Laden von Spinner an. Sobald die Daten in meiner Datentabelle aufgefüllt sind, löst die nachfolgende Auswahl [Änderungen] in der Dropdown-Auswahl den Spinner nicht aus. Ich habe sogar die jQuery in die Funktion eingefügt, die neue Daten in die Datentabelle lädt. Zu viel Code, um die gesamte Datei einzufügen, aber der Spinner gestylt, dann zeigt jQuery und versteckt es vor Aufruf Ajax und nach Erfolg:

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

dann innerhalb des Tags:

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

Als nächstes innen dOKUMENT bEREIT, ich die Daten bekommen, die Datentabelle, fügen Sie die Drop-Down-Änderungsfunktion einrichten:

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(); 
}) 

Dann erhalten die Daten:

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); 

gehen dann durch die zurückgegebenen Daten:

jQuery.each(data, function(index) { 

Prozess der Daten und in die Datentabelle drücken:

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(); 

dann die get_data() Funktion beenden out:

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

});

Ich hoffe, dass das Auslassen eines Teils des Codes die Fehlersuche nicht behindert. Irgendwelche Ideen, warum eine Div-Show nach der nachfolgenden Auswahl eines Drop-Downs nicht ausgelöst würde?

Answer 1

versuchen so etwas wie:

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

}); 

Die Veranstaltung jQuery('#fy_select').on('change', function() { nur auf Ereigniserstellungszeit auf bestehenden DOM basiert auslösen ..