Buttons appear on localhost but not after deploying

GrayLeaf1

Hi,
Datatables is amazing easy to use aplication. I just had an issue when I run datatables in preview locally my buttons appear and work as designed:

After deploying the solution to production the buttons don't appear:

There are no build or browser errors. I've cleared my cache and tried Chrome and IE with the same results.

Can you provide some input what the issue might be?

My code:

var table = $('#my_table').DataTable({

dom: 'Bfrtip',
    ajax: '/api/my_table',
    select: true,
    pageLength: 100,
    lengthMenu: [[10, 50, 100, 500, -1], [10, 50, 100, 500, "All"]],
    lengthChange: false,
columns: [
        {"data": "appid"},
        {"data": "appstatus"},
        {"data": "received"},
        {"data": "determined"},
        {"data": "fname"},
        {"data": "lname"},
        {"data": "stanum"}
    ],
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit', editor: editor },
        { extend: 'remove', editor: editor },
        { extend: 'excel', editor: editor },
        { extend: 'colvis', editor: editor },
        { extend: 'pageLength', editor: editor },
    ],

    //start column search menu
    initComplete: function () {

        //start move column search to top
        var r = $('#Amateurs tfoot tr');
        r.find('th').each(function () {
            $(this).css('padding', 8);
        });
        $('#Amateurs thead').append(r);
        $('#search_0').css('text-align', 'center');
        //end move column search to top

        //start column drop-down menu filters
        this.api().columns().every(function () {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo($(column.footer()).empty())
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

            column.data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
            });
        });
        //end column drop-down menu filters
    },
    //end column search menu

});

// Apply the text search - start
table.columns().every(function () {
    var that = this;

    $('input', this.footer()).on('keyup change', function () {
        if (that.search() !== this.value) {
            that
                .search(this.value)
                .draw();
        }
    });
});
// Apply the text search - end

Thanks,
John

GrayLeaf1

Could this be the problem?

colin

Hi @GrayLeaf1 ,

It's odd that no buttons appear. Is it just the Editor buttons, or all of them? The error you showed is just the favicon, so that wouldn't cause this.

Are you able to link to the page so we can take a look?

Cheers,

Colin

GrayLeaf1

Hi @Colin,
I would need to white list your IP through the firewall and create an O365 user account so you can authenticate to Azure. That could take some time to get the permissions I would need.

I now suspect that the issue is not related to DataTables but is a publishing problem in Azure. To test this I made a small change to the a column header in the HTML file and it did not appear in the published site either. I think I might need to delete all of the files in my existing Web App or create an entirely new Web App in Azure

Here are some references to the publishing issue in case anyone has a similar problem.

https://stackoverflow.com/questions/15646447/visual-studio-not-updating-html-javascript-to-server-browser

https://developercommunity.visualstudio.com/content/problem/328795/web-deploy-not-including-some-js-files-generated-b.html

https://social.msdn.microsoft.com/Forums/azure/en-US/0c5e85b6-806f-43a9-af6b-3a2a6f6634e6/how-to-delete-all-the-files-on-the-site?forum=windowsazurewebsitespreview

https://docs.microsoft.com/en-us/aspnet/core/test/troubleshoot-azure-iis?view=aspnetcore-3.0

Thanks,
John

GrayLeaf1

Resolved
In case anyone else has a similar problem I had to create a new Azure Web App and it worked. I did encounter one other issue related to the Web.Config file which needed to be updated. I was receiving a 403 error after publishing and had to modify the Web.config file as follows (lines added have my comments):

<configuration>
  <configSections>
    <sectionGroup name="applicationSettings" type="System.Configuration.ApplicationSettingsGroup, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" >
      <section name="EditorGenerator.Properties.Settings" type="System.Configuration.ClientSettingsSection, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    </sectionGroup>
  </configSections>
  <appSettings></appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
    <customErrors mode="Off" /> <!--added to enable verbose browser error messages-->
  </system.web>
  <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>
    <defaultDocument>
      <files>
        <clear />
        <add value="Web/index.html" />
      </files>
    </defaultDocument>
    <directoryBrowse enabled="true" showFlags="Date,Time,Extension,Size" /><!--added to allow IIS directory browsing to prevent the 403 error message when publishing-->
    <httpErrors errorMode="Detailed"></httpErrors> <!--added to enable verbose browser error messages-->
  </system.webServer>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Thanks for reporting back.