single page application - How to return html async along with ajax data response to populate datatable

Question

I'm working on single web application, I'm facing problem when returning async html into index.js ( main page ) along with ajax data response to populate datatable.

customer.js

constructor(params) {
    super(params);
    this.setTitle("Customers");
    this.getDataTable();
    console.log("viewing customers");
} 

getDataTable(){ 
    $(document).ready(function(){
        var table = $('#dataTable').DataTable({
                  "ajax": {
                      url: 'GetCustomer', 
                      type: 'GET',
                      dataSrc: ""
                  },
                  aoColumns: [
                      { mData: 'customerId' },
                      { mData: 'customerName'},
                      { mRender: function (data, type, row) {
                                    return '<button type="button" class="btn btn-success" id="edit_btn"><i class="fa fa-edit"></i></button> '+
                                    '<button type="button" class="btn btn-danger" id="del_btn"><i class="fa fa-trash-alt"></i></button> ';
                                  }
                      },
                   
                  ], 
      
                  autofill: true,  
                  select: true,
                  responsive: true,
                  buttons: true,
                  length: 10,
      
              });
        
        $('#dataTable').on( 'click', '#edit_btn', function () {
            var data = table.row( $(this).parents('tr') ).data();
            alert('Acount id '+ data.customerId + '
 '+ data.customerName );
        } );
        
      
     }); 
}

async getHtml() {
    return (
        `
        <div class="mt-4">
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="/" data-link>Customers</a></li>
            <li class="breadcrumb-item active">List</li>
        </ol>
       
       </div>
   
         <div class="ml-auto mb-4">
               <a type="button" id="addBtn" class="btn btn-primary" data-rel="4">Add Customer</a>
         </div>
         
          <div class="card mb-4">
            <div class="card-header">
            <p id = "para"></p>  
            <i class="fas fa-table mr-1"></i>
                 List
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                  <th>Account Id</th>
                                  <th>Account Name</th>
                                  <th>Actions</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                  <th>Account Id</th>
                                  <th>Account Name</th>
                                  <th>Actions</th> 
                            </tr>
                        </tfoot>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}

Index.js

    const navigateTo = url => {
    history.pushState(null, null, url);
    router();
};

const router = async () => {
    const routes = [
       {path: "/NispCoreWork" , view : Dashboard},
       {path: "/customers", view  : Customers},
       {path: "/tables", view : Tables}
    ];
    
     // Test each route for potential match
    const potentialMatches = routes.map(route => {
        return {
            route: route,
            isMatch : location.pathname === route.path
           // result: location.pathname.match(pathToRegex(route.path))
        };
    });
    
    let match = potentialMatches.find(potentialMatch => potentialMatch.isMatch);

    if (!match) {
        match = {
            route: routes[0],
            isMatch : true
        };
    }
    const view = new match.route.view();
    
    document.querySelector("#app").innerHTML = await view.getHtml();
    


   // console.log(match.route.view());
};

window.addEventListener("popstate", router);

document.addEventListener("DOMContentLoaded", () => {
    document.body.addEventListener("click", e => {
        if (e.target.matches("[data-link]")) {
            e.preventDefault();
            navigateTo(e.target.href);
        }
    });

    router();
    
});

I try to inject those async html and ajax respons into document.querySelector("#app").innerHTML = await view.getHtml();

However, it only load the html but the ajax data response can't be load.

question from:https://stackoverflow.com/questions/65932225/how-to-return-html-async-along-with-ajax-data-response-to-populate-datatable

Answer 1

Waitting for answers