Base solution for your next web application
Open Closed

Bundles, DataTables, Modals, and the Login page #11298


User avatar
0
marble68 created

v11.3 Jquery MVC


As part of a user registration, I am trying to walk the user through a wizard (using Metronic's stepper).

Part of this is I need to bring up a modal and to use DataTables.

I've gone through bundles - made sure Jquery is loading in account-layout - and DataTables is included in common-scripts after that.

However, when I load the login page, in the console $.fn.dataTable is undefined.

If I login, $.fn.dataTable exists.

I had a similar issue with stepper, but added it to my bundle for this specific page with success. I've verified DataTables is arriving in common scripts, and I know from the Layout.cshtml file for the Account view that jquery is loaded before.

Is there something I'm missing, or that I have to do to 'initialize' datatables into the document so my modal will leverage it? Traditionally, I've just made sure jquery & datatables were downloaded to use it.

Thanks


1 Answer(s)
  • User Avatar
    0
    marble68 created

    I finally figured it out -

    There were more than just datatables that I needed to include.

    FWIW - if it helps anyone - here's the full bundle:

        {
          "output": "view-resources/Areas/App/Views/_Bundles/account-datatables.min.js",
          "input": [
            "wwwroot/Common/Scripts/Datatables/datatables.ajax.js",
            "wwwroot/Common/Scripts/Datatables/datatables.defaults.js",
            "wwwroot/Common/Scripts/Datatables/datatables.record-actions.js",
            "node_modules/datatables.net/js/jquery.dataTables.js",
            "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js",
            "node_modules/datatables.net-select/js/dataTables.select.js",
            "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
            "node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.js"
    
          ]