Refused to apply style from [Link] because its MIME type ('text/html') is not a supported stylesheet
Refused to apply style from [Link] because its MIME type ('text/html') is not a supported stylesheet
ScottSchmidt
Posts: 38Questions: 5Answers: 0
Error Message:
This error message is found in my console only: "Refused to apply style from [websiteLink] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."
Code:
Ironically, this same code on Codepen works with no error.
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=19472395a2969da78c8a4c707e72123a">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" src="/media/js/site.js?_=7a5408ceb64d5d41e4b1bfb3712796ab"></script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fdata_sources%2Fdom.html" async></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" class="init"></script>
<script type="text/javascript">
$(document).ready( function () {
console.log("Jquery ready");
$('#example').dataTable( {
});
});
</script>
</head>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<a class="column_sort" id="id" href="?order=id&sort=<?php echo $sort; ?>">
ID</a>
</th>
<th><a class="column_sort" id="first_name" href="?order=first_name&sort=<?php echo $sort; ?>">First Name
</a>
</th>
<th><a class="column_sort" id="last_name" href="?order=last_name&sort=<?php echo $sort; ?>">Last Name
</a>
</th>
<th><a class="column_sort" id="position" href="?order=position&sort=<?php echo $sort; ?>">Position
</a>
</th>
<th class="hidden-xs"><a class="column_sort" id="date" href="?order=date&sort=<?php echo $sort; ?>">Date
</a>
</th>
<th class="hidden-xs">
<a class="column_sort" id="updated" href="?order=updated&sort=<?php echo $sort; ?>">
Updated</a>
</th>
<th>Action</th>
</thead>
</tr>
Possibly solutions: I tried many but here were some:
Add datatype:json (but I am not using Ajax, but I tried using it anyway under Jquery with no effect)
Add <IfModule mod_headers.c>
Header always set X-Content-Type-Options nosniff
</IfModule> (not exactly sure where to put this but tried many places and did not seem to work)
Changed application/javascript from text/javascript (but did nothing)
I am unable to post comments yet, so I was told to make a new topic based upon my problem The ironic part is that this same code works on CodePen.
Full Code (someone requested it):
<?php include('connect.php');?>
<?php
ob_start();
$date="";
$updated="";
$sort = isset($_GET['sort']) ? $_GET['sort'] : 'ASC';
$sort = ($sort == 'ASC') ? 'DESC': 'ASC';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DataTables example</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=19472395a2969da78c8a4c707e72123a">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<style type="text/css" class="init"> </style>
<script type="text/javascript" src="/media/js/site.js?_=7a5408ceb64d5d41e4b1bfb3712796ab"></script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fdata_sources%2Fdom.html" async></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" class="init"></script>
<script type="text/javascript">
console.log("js ready");
$(document).ready( function () {
console.log("Jquery ready");
$('#example').dataTable( {
} );
});
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<a href="?order=id&sort=<?php echo $sort; ?>">
ID</a>
</th>
<th><a class="column_sort" id="first_name" href="?order=first_name&sort=<?php echo $sort; ?>">First Name
</a>
</th>
<th><a class="column_sort" id="last_name" href="?order=last_name&sort=<?php echo $sort; ?>">Last Name
</a>
</th>
<th><a class="column_sort" id="position" href="?order=position&sort=<?php echo $sort; ?>">Position
</a>
</th>
<th class="hidden-xs"><a class="column_sort" id="date" href="?order=date&sort=<?php echo $sort; ?>">Date
</a>
</th>
<th class="hidden-xs">
<a class="column_sort" id="updated" href="?order=updated&sort=<?php echo $sort; ?>">
Updated</a>
</th>
<th>Action</th>
</thead>
</tr>
<tr><tfoot>
<th href="?order=id&sort=<?php echo $sort; ?>">ID </th>
<th><a class="column_sort" id="first_name" href="?order=first_name&sort=<?php echo $sort; ?>">First Name
</a>
</th>
<th><a class="column_sort" id="last_name" href="?order=last_name&sort=<?php echo $sort; ?>">Last Name
</a>
</th>
<th><a class="column_sort" id="position" href="?order=position&sort=<?php echo $sort; ?>">Position
</a>
</th>
<th class="hidden-xs"><a class="column_sort" id="date" href="?order=date&sort=<?php echo $sort; ?>">Date</a>
</th>
<th class="hidden-xs"><a class="column_sort" id="updated" href="?order=updated&sort=<?php echo $sort; ?>">Updated
</a>
</th>
<th>Action</th>
</tfoot></tr>
<tbody>
<?php
$sort="asc";
$sort = isset($_GET['sort']) ? $_GET['sort'] : 'ASC';
$sort = ($sort == 'ASC') ? 'DESC': 'ASC';
$order = array("first_name","last_name","date", "position", "updated");
$key = array_search($sort ,$order);
$orderby = $order[$key];
$records = mysqli_query($con, "SELECT * FROM employees ORDER BY $orderby $sort");
// $order = array("name","price","qty");
// $key = array_search($_GET['sort'],$order));
// $orderby = $order[$key];
// $query = "SELECT * FROM `table` ORDER BY $orderby";
while ($row = mysqli_fetch_array($records)) { ?>
<tr>
<td><?php echo $row['id']; ?> </td>
<td><?php echo $row['first_name']; ?> </td>
<td><?php echo $row['last_name']; ?> </td>
<td><?php echo $row['position']; ?> </td>
<td class="hidden-xs"><?php echo $row['date']; ?> </td>
<td class="hidden-xs"><?php echo $row['updated']; ?> </td>
<td>
<a href="edit.php?edit=<?php echo $row['id']; ?>" type="button" name="edit" class="btn-success"><span class="glyphicon glyphicon-pencil"> </a>
<button type="button" ><a href="index.php?del=<?php echo $row['id']; ?>" name="del" class="btn-danger" onclick="return confirm('Are you sure you want to delete this item?');"><span class="glyphicon glyphicon-trash"></span> </a> </button>
</td>
</tr>
<?php
}
?>
</body>
</html>
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
No one was able to solve the issue on stackoverflow, so I came here. Thanks!
Does it say what stylesheet of the ones you are loading is causing the issue?
Can you link to a test case showing the issue so we can help to debug it please.
Allan
UPDATE: I was able to fix all but one error now. I am still working on the last one..
I mostly fixed the issue. Just have this warning: DataTables warning: table id=example - Ajax error. For more information about this error, please see http://datatables.net/tn/7. Currently, reading a few articles on this error. But most of the plug-in now shows up.
Here is the link: https://databasetable-net.000webhostapp.com/
It did not appear in the last comment for whatever reason.
You are getting a 404 error from your server for this URL:
https://databasetable-net.000webhostapp.com/data.json?_=1521205769785
Is that a valid URL?
Kevin
No it is not I actually realized this issue before reading your post. Without the $('#example').dataTable( { line in the Jquery I get a different error that told me to add it from https://stackoverflow.com/questions/28857511/jquery-datatables-ajax-error-http-datatables-net-tn-7
Without the ajax code i get this error: jquery.dataTables.min.js:23 Uncaught TypeError: Cannot read property 'length' of undefined and the whole database.net template does not work.
I just tried this code from https://stackoverflow.com/questions/28857511/jquery-datatables-ajax-error-http-datatables-net-tn-7, it actually worked (halfway).
Now I get this error: jquery.dataTables.min.js:27 Uncaught TypeError: Cannot set property 'nTf' of undefined
$(document).ready(function() { $('#example').dataTable( { "processing": true, "serverSide": true, "ajax": { "url": "index.php", "type": "POST" }, "columns": [ { "data": "id" }, { "data": "first_name" }, { "data": "last_name" }, { "data": "position" }, { "data": "date" }, { "data": "updated" } ] } ); } );Likely the problem is you have 7 columns in your table but are defining only 6. Maybe this example will help:
https://editor.datatables.net/examples/api/checkbox.html
Since you aren't using Editor you just need to use the Datatables specific config.
Kevin
Right, I do have 7 columns (I completely forgot about the "Action" column) which does not really contain data but just has a delete/edit button. I will definitely give this a try and post back.
My new code works well and each column now has a sort icon. However, for some reason, the pagination on bottom completely vanished. I also now get a different error, DataTables warning: table id=example - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
$(document).ready(function() { $('#example').dataTable( { dom: "Bfrtip", "processing": true, "serverSide": true, "ajax": { "url": "index.php", "type": "POST" }, "columns": [ { "data": "id" }, { "data": "first_name" }, { "data": "last_name" }, { "data": "position" }, { "data": "date" }, { "data": "updated" }, { "data": "action" } ] } ); } );Is
index.phpyour server side processing script?Kevin
Yes, I believe so. I put everything in the index.php file for sake of simplicity as of right now. Are you allowed to do that? Almost everything is working, except the pagination and the arrow does not switch on click. https://databasetable-net.000webhostapp.com/
I have fixed many errors (thanks mostly to your help). I am going to post a new topic with my more current issue and errors as my original post is way different than what my current code looks like. Thanks!
Here is my new code/link:
https://datatables.net/forums/discussion/48467/datatables-warning-table-id-example-invalid-json-response-for-more-information-about-this-error/p1?new=1