Script Tag doesn't close
Question
I'm working on a Website which contains a Table plugin. The plugin get's imported by a <script> tag and executed with javascript. Besides I use Bootstrap so the bootstrap.min.js file is importet too. Here is how it looks:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
All this code is placed right before closeing the <body> tag. If I upload the file on my webspace and visit the page, no script get's executed. If I take a look at the source-code in Chrome, all I see is that the <script> tag doesn't close properly:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
<script charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
I already tried to place the scripts on diffrent places in the code, but everytime there's the same problem. I also tried this answer, but the comments don't even get displayed in the source-code.
Is there any proper way to solve this problem?
(UPDATE: Complete Code):
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" exclude-result-prefixes="xsl">
<xsl:template match="/">
<html>
<head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- Latest compiled and minified Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<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>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
</body>
</html>
3 answers
solution1
0 2017-04-21 13:37:05
// You are not closing scripts tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/></script>
<script charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js" type="text/javascript"/></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
solution2
0 2017-04-21 13:42:02
I dont see any issue here, but why dont you try a self closing script tag for loading jQuery.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
<script charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js" type="text/javascript"/>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
});
</script>
solution3
0 2017-04-21 13:42:02
You are using the wrong charset. It's utf-8 , not utf8 .
https://www.w3.org/International/questions/qa-html-encoding-declarations
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.