format table after javascript event

mmontoya

The user needs to select some data before I load the grid. After they select the criteria I load the grid into a div. But it doesn't seem to format a grid that is added after the screen is drawn.

Here is what I have tried so far:

                $("#drawGrid").click(function(e){
                    $("#activityGrid").load("addActivities_grid.php?so=" + $("#staffOption").val() +"&ao="+$("#activityOption").val()+"&team="+$("#teamSelect").val()   );
                    
                    udsStyleGrid(); 
                    var table = $('#table').DataTable( {
                        "scrollY": "400px",
                        "scrollX": true,
                        "scrollCollapse": true,
                        "paging": false
                    } );
                    new $.fn.dataTable.FixedColumns( table, {
                        leftColumns: 1
                    } );
                    
                });

mmontoya

ah, never mind. I needed to use the complete argument of .load()

                        $("#activityGrid").load("addActivities_grid.php?ad=" + $("#activityDate").val() +"&so=" + $("#staffOption").val() +"&ao="+$("#activityOption").val()+"&team="+$("#teamSelect").val(), function() {
                            udsStyleGrid(); 
                            var table = $('#table').DataTable( {
                                "scrollY": "400px",
                                "scrollX": true,
                                "scrollCollapse": true,
                                "paging": false
                            } );
                            new $.fn.dataTable.FixedColumns( table, {
                                leftColumns: 1
                            } );
                        });