http://coldfusion.com logo
Join Slack
Powered by
CF2018 on Win2016 I am trying to install and confi...
# cfml-beginners
e
CF2018 on Win2016 I am trying to install and configure DataTables. I downloaded and unzipped it in to 
\\cf01\d$\DataTables
folder. Trying it using code below, but it does not work. What am I missing? 
<HTML>
<HEAD>
<TITLE>Data Tables</TITLE>
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">
<script type="text/javascript" charset="utf8" src="DataTables/datatables.min.js"></script>
</HEAD>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
d
I'm guessing you're not referencing that js and css file correctly. But it could be anything. What's the error you're getting?
e
I do not get any errors, it simply does not work
d
Are you using IIS? If so maybe you're missing the virtual directory for your website.
In your code you are not calling the DataTable() which initializes the plug-in.
e
Column 1Column 2Row 1 Data 1Row 1 Data 2Row 2 Data 1Row 2 Data 2
that is what I am getting
d
message has been deleted
e
hmmm, where do I enter it?
could you send me the url of that page?
d
In a script tag before the end body tag
e
d
Yes that page has that instruction too
e
I chose local install
d
I got that screenshot from the home page
Sure local install or not you still need to initialize it
e
where do i enter it?
d
Read my comment 👆
Did you get it working ?
e
no, what I am asking is where do i enter this function
in <script ...> tag?
d
yes, thats exactly what I commented above.
e
This still does not work
<HTML>
<HEAD>
<TITLE>Data Tables</TITLE>
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">
<script type="text/javascript" charset="utf8" src="DataTables/datatables.min.js">
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</HEAD>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
d
well whats the ID of your table?
and which table is DataTables trying to initialize?
e
table_id is the id fo the table
d
Ok so tell DataTables to initialize that table instead.
e
I enjoy the js lesson, honestly, but I have no idea about js.
$(document).ready( function () { $('table_id').DataTable(); } );
is this it?
total guess
d
yes, but you must use the 
#
so it should be 
$('#table_id')...
e
this still does not work
<HEAD>
<TITLE>Data Tables</TITLE>
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">
<script type="text/javascript" charset="utf8" src="DataTables/datatables.min.js">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
</HEAD>
d
ok, next thing is to use the browser debugger to debug the page and find out why. Do you know about the browser's debugging tool?
Which browser are you using?
e
I hit F12 in my Brave
I see the code
d
ok now look in the console tab or in its status bar and looks for errors.
e
here are some last messages
Mar-24 154516.626 [API-Q] (T06T9JEE9) noversion-1648161916.625 Flannel users/info called with reason: flannel-call:users/info Mar-24 154516.626 [API-Q] (T06T9JEE9) noversion-1648161916.625 Flannel users/info is ENQUEUED Mar-24 154516.630 [API-Q] (T06T9JEE9) noversion-1648161916.625 Flannel users/info is ACTIVE Mar-24 154516.663 [API-Q] (T06T9JEE9) noversion-1648161916.625 Flannel users/info is RESOLVED Mar-24 154517.644 [API-Q] (T06T9JEE9) noversion-1648161917.644 Flannel users/info called with reason: flannel-call:users/info Mar-24 154517.644 [API-Q] (T06T9JEE9) noversion-1648161917.644 Flannel users/info is ENQUEUED Mar-24 154517.645 [API-Q] (T06T9JEE9) noversion-1648161917.644 Flannel users/info is ACTIVE Mar-24 154517.669 [API-Q] (T06T9JEE9) noversion-1648161917.644 Flannel users/info is RESOLVED
I do not see any errors
sorry, was in the wrong tab
here is the error: Failed to load resource: the server responded with a status of 404 (Not Found)
d
I told youy
that js and css file is not being referenced properly.
e
you mean the path is wrong?
d
yes
are you using IIS?
e
yes
d
do you know how to create a virtual directory in IIS?
e
I entered path as: href="\\cf01kt\d$\DataTables\datatables.min.css"
but it did not work
d
ofcourse that will not work
e
Not allowed to load local resource: file://cf01kt/d$/DataTables/datatables.min.js
d
Your code has this:
Copy code
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css">
e
yes
d
that means your webpage is looking for a DataTables folder at the ROOT of your website(most likely)
e
ok
d
so create a virtual directory in IIS called "DataTables" that points to //cf01kt/d$/...
e
Looking into it
have directory created with the name DataTables pointing to D:\DataTables
👍🏾 1
d
oh wow
ok in your html references point those files to the root by using the leading forward slash:
Copy code
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.min.css">
e
datatables.min.js:33 Uncaught ReferenceError: jQuery is not defined at datatables.min.js33301 at datatables.min.js33326
👏🏾 1
I really appreciate your help. I will get into it some more tomorrow. Thank you
d
ok, go back to the installation page and read the Requirements section. Almost there @epipko
m
@epipko, in your last code dump, I noticed 
<script type="text/javascript" charset="utf8" src="DataTables/datatables.min.js">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
I don't think you're allowed to use JS between 
<script></script>
when using a src attribute; it's one or the other. You'll need a separate script tag for your initialization. I'd recommend taking a JS tutorial.
👆 1
Open in Slack
PreviousNext
Powered by