Hosted Datatable not showing datatable-elements?

Rapid1898

Hello - it seems that finally i achieved to show some datatables-output on my homepage:
https://rapidtech1898.com/serverLevermann

But unfortunately al the datatables-specifica (like seraching, page-handling, etc) are gone.

When i test this on my localhost everything works fine:

Here is my full code for that:
https://github.com/Rapid1898-code/Homepage-TableExample

colin

That happens when a page error occurs, as it stops the rest of the JavaScript from running. If you look in the browser's console, you 'll see a couple of errors - try fixing those first and seeing if that improves the situation.

Colin

Rapid1898

Thanks for your fast response - indeed there are some errors in the console:

With the first 2 i have no idea what to do / what this means.
But i think the 3rd indicates that he is not able to read the css and js file - and so it is possible that this is the reason why it is not working.

But the files are stored in the node.js public folder -
The mentioed files are both in this folders
bootstrap.min.css
bootstrap.bundle.min.js

Locally this is in:
---folder
---public
---css
---js

And on the hosted server this is in:
/home/user/
---public
---css
---js

It is not clear why he can´t find the files on the hosted solution?
And also not what this link means "https://www.rapidtech1898.com/css/bootstrap.min.css.map:" in the error message?

tangerine

jQuery's js file must be loaded before any of the DataTables files.

Rapid1898

Hello - i changed this to the following order in the scores.ejs file:

CSS:
<link rel="stylesheet" type="text/css"href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.css">
<link rel="stylesheet" href="../css/basic.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

JS:

As you can see with this link - it doesn´t help:
https://rapidtech1898.com/serverLevermann

But i see in the console that now 2 erros are gone away - but probably the 2 remaining are still cause the issue:

Locally it is still working - the only change what i see there is now - the show entries element in the upper left corner is not rendering correct after this changes:

Do i have to change something else loading the bootstrap-files?
Or do i change the above files in the wrong order?

kthorngren

You don't have any JS code to initialize Datatables. Guessing its supposed to be in this file:

<script type="text/javascript" src="../js/main.js"></script>

Clicking on the file opens a blank page.

You are also trying to load Datatables twice:

<script type="text/javascript" src="../js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>

That will likely cause issues. You only want to load it once.

Looks like you want to use Bootstrap 4 styling but you aren't loading the proper Datatables CSS and JS files for this. Take a look at this example. Look at the JS file being loaded and click the CSS tab to see the CSS files being loaded. The best option is to use the Download Builder to get the proper files.

Kevin

Rapid1898

thanks @kthorngren i will check this out -

only for clarification regarding your first point:
You don't have any JS code to initialize Datatables. Guessing its supposed to be in this file

What do you mean with that?
The js-files (so also the mentioned main.js) are all in the public-folder in seperate css/js-folders:

And the main.js has this content:

$(function() {
    $(document).ready(function() {
      $('#example').DataTable( {
        autoWidth: false,
        columnDefs: [
          { width: '10px', targets: 0 },
          { width: '100px', targets: 1 },
          { width: '10px', targets: 2 },
          { width: '10px', targets: 3 },
          { width: '1px', targets: 4 },
          { width: '100px', targets: 5 },
          { width: '200px', targets: 6 },
          { width: '100px', targets: 7 },
          { width: '1%', targets: 8 },
          { width: '10px', targets: 9 },
          { width: '1%', targets: 10 },
          { width: '10px', targets: 11 }
        ]
      } );
    });
});

And i am linking the js-file in the bottom from the ejs-file.

Is there something wrong with this?
Do i have here a general misunderstanding or should this work that way?

kthorngren

Using the browser's Network Inspector you can see the content of the main.js file:

Looking at the others you can see there is content:

Not sure why it is empty. You will need to look at your server to find out why or copy the original file again.

Kevin

Rapid1898

Hello Kevin,

thanks again for your response / help -

the main.js file is definitely not empty on the server:

i also tried to comprehend what is in the chrome network inspector for the problematic link https://www.rapidtech1898.com/serverLevermann- but on my browser this looks a little bit different than on your screenshots:

I can´t see the js-files at all - or the content of them...

Beside that i changed regarding the scores.ejs-file everything you suggested - and now looks like this:
(so the locally stored css/js - files wouldn´t be need anymore - cause they are linked per the full links below)

<link rel="stylesheet" href="../css/basic.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">     
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"> 

<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>   
<script type="text/javascript" src="../js/main.js"></script>

With that it works still fine with the localhost - but not on the server...

I also tried to change the path from

<link rel="stylesheet" href="../css/basic.css">
<script type="text/javascript" src="../js/main.js"></script>

to

<link rel="stylesheet" href="../public/css/basic.css">
<script type="text/javascript" src="../public/js/main.js"></script>

but with that it neither works on the localhost nor on the server - so i changed it back

Rapid1898

Update so nobody is wondering - the hosted link is currently not working:
https://www.rapidtech1898.com/serverLevermann
(there are some investigations ongoing from the host provider...)

The error-message in cPanel is unclear for the support:

Nevertheless i update the version on github which is running (still) fine on the localhost:
https://github.com/Rapid1898-code/Homepage-TableExample

Rapid1898

So the page is up again -
https://www.rapidtech1898.com/serverLevermann
but unfortunately with the same problems...

Now i saw what you meant - the main.js file is indeed empty when i inspect it in chrome:

But the file is not empty when i look at the server (with eg. cPanel):

The file /home/rapidtec/serverLevermann/public/js/main.js
shows this:

How this can be...?

Rapid1898

Finally - with great help from the A2Hosting - it seems that i found the problem which i mentioned above -
I had a main.js-file in my public folder from my node.js-app - but also i had an (empty) main.js-file in my static homepage folder under "public_html" - and when the app loads it first takes the (empty) main.js file...

So i changed the name of the main.js file in my node.js-app to something else - updated the linking in the ejs-file and voila - now it works as expected...

Now the page works as expected:
https://www.rapidtech1898.com/serverLevermann

Thanks for your support!