<td> content displays as plain text, when I use data-toggle="table" - html

I want to use bootstrap data-toggle="table", but when I enable it, it starts to render all content in <td> as plain text (ignoring tags).
My code looks like this
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap : CRUD Table</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="table-wrapper">
<table id="table" class="table table-striped table-hover table-responsive"
data-toggle="table"
data-filter-control="true"
data-click-to-select="true">
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
</tr>
</tbody>
</table>
<!-- partial -->
<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 src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script src="./script.js"></script>
</body>
</html>
Everything works as usual, when I remove data-toggle="table"

Here you go. Just added "data-escape="false"" in table definition.
https://codepen.io/shubham-sharma-the-looper/pen/KKaMWGL
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Bootstrap : CRUD Table</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<div class="table-wrapper">
<table id="table" class="table table-striped table-hover table-responsive"
data-toggle="table"
data-filter-control="true"
data-click-to-select="true" data-escape="false">
<thead>
<tr>
<th>Name1</th>
<th>Name2</th>
</tr>
</thead>
<tbody>
<tr>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
<td data-toggle="modal">
<p>My Text Here</p>
</td>
</tr>
</tbody>
</table>
<!-- partial -->
<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 src="./script.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script><script src="./script.js"></script>
</body>
</html>

I see html when I run your code not a plain text.

Related

bootstrap navbar-toggler not working in smaller resolution

I have a top nav bar on homepage(_Layout.cshtml) that has a toggler button, after removing some style sheets my button became visible but it is not working!!..
Here are my scripts and links
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
#RenderSection("preheader", required: false)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
#*<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">*#
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" /> F
#RenderSection("header", required: false)
</head>
<body>
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script><!--removing it stops testnav toggle-->
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
</body>
However when I add same navbar in content-page that content-page button works!!
I have tried adding all scripts on top of original jquery and bootstrap scripts to that page it still works!!
TestNavBar.cshtml (content-page)
#section header{
<style type="text/css">
</style>
<!--Copied from home page (Layout)-->
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/datatables/DataTables-1.10.25/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<link href="~/lib/datatables/datatables-checkboxes/css/dataTables.checkboxes.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="~/lib/datatables/Buttons-1.7.1/css/buttons.bootstrap5.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link href="~/lib/leaflet-1-7-1/leaflet.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet" integrity="sha384-ekOryaXPbeCpWQNxMwSWVvQ0+1VrStoPJq54shlYhR8HzQgig1v5fas6YgOqLoKz" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" />
<!--Original Scripts-->
<link href="~/safety/css/leaflet.loading/Control.Loading.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="~/safety/css/jquery-json-viewer/jquery.json-viewer.css" rel="stylesheet" />
<link href="~/safety/css/ChartJS/Chart.min.css" rel="stylesheet" />}
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$.backstretch("/images/netrisk-background.jpg");
});
</script>
<!--Copied from home page (Layout)-->
<script src="~/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/app/jquery.backstretch.min.js"></script>
<script src="~/lib/datatables/DataTables-1.10.25/js/jquery.dataTables.min.js"></script>
#*
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
*#
<script src="~/lib/datatables/DataTables-1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script src="~/lib/datatables/datatables-checkboxes/js/dataTables.checkboxes.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/dataTables.buttons.min.js"></script>
<script src="~/lib/datatables/Buttons-1.7.1/js/buttons.bootstrap5.min.js"></script>
<script src="~/lib/datatables/Select-1.3.3/js/dataTables.select.min.js"></script>
<script src="~/lib/leaflet-1-7-1/leaflet.js"></script>
<script src="~/js/app/leaflet-tilelayer-here.js"></script>
<script src="~/lib/leaflet-area-select/dist/Map.SelectArea.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.min.js"></script>
<script src="~/js/app/site.js" asp-append-version="true"></script>
<!--Original scripts-->
<script src="~/safety/js/App/SafetyGlobalSetting.js"></script>
<script src="~/safety/lib/jquery-datatables-js.min.js"></script>
<script src="~/safety/js/plugin/jquery-json-viewer/jquery.json-viewer.js"></script>
<script src="~/safety/js/plugin/CounterUp/jquery.counterup.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="~/safety/js/App/PointSelection.js"></script>
<script src="~/safety/js/plugin/leaflet.tilelayer.HERE/leaflet-tilelayer-here.min.js"></script>
<script src="~/safety/js/plugin/leaflet.loading/Control.Loading.min.js"></script>
<script src="~/safety/js/plugin/leaflet.geometry/leaflet.geometryutil.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="~/safety/js/ChartJS/Chart.bundle.min.js" type="text/javascript"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/dist/leaflet.markercluster.js"></script>
<script src="~/safety/js/plugin/Leaflet.markercluster-1.4.1/freezable/leaflet.markercluster.freezable.js"></script>
<script src="~/mdbootstrap-pro/js/mdb.min.js" type="text/javascript" ></script>
}

Bootstrap select dropdown crashes

i have a project which uses the below depedencies:
<head>
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" >
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/datatables.min.css"/>
<script type="text/javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="parsley/dist/parsley.min.js"></script>
<link rel="stylesheet" type="text/css" href="parsley/parsley.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/bootstrap-datepicker1.js"></script>
<link rel="stylesheet" type="text/css" href="css/datepicker.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
In that project, i want to add multiple depedent dropdown lists like that:
<div class="col">
<select name="category_item" class="form-control input-lg" id="category_item" data-live-search="true" title="select category"></select>
</div>
<div class="col">
<select name="sub_category_item" id="sub_category_item" class="form-control input-lg" data-live-search="true" title="select subcategory"></select>
</div>
</div>
I've always developed this idea, using the below depedencies:
<head>
<title>Website</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The problem appears, when i add my depedencies in project's depedencies, resulting not-functional dropdown lists. How can i combine depedencies, in order to have project's style and normal operation of my dropdown lists?

Tooltips inside Accordion

I am experimenting with Accordions and Tooltips. My goal is to have an accordion where I can have a table of information with a question mark on the right which will act as a Tooltip when I hover over it.
I have come up with a design and followed Bootstrap 4 documentation as well however I have been unsuccessful at making a functional tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips Testing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- DOCUMENT/CODE LINKS -->
<link rel="stylesheet" type="text/css" href="Tooltips.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="font-weight: 400;">1(01)</th>
<td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<!-- JAVASCRIPT SCRIPTS -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
CSS:
.accordion {
margin: 3vw;
border: #383838;
}
.card-header.collapsed {
background: #343a40;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}
.card-header:not(.collapsed) {
background:#343a40;
border-bottom: transparent;
}
Any help to get the tooltip working is sincerely appreciated.
Try removing this line from your script references:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Once you remove it, it should work as you want it to.

Why is my bootstrap not working?

Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!
You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>
All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>

LeafletJS Version Update

I have the following HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>       
</body>
</html>
This HTML works fine, however when I change leaflet to a new version,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<!--<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />-->
<link rel="stylesheet" href="style/MarkerCluster.css" />
<link rel="stylesheet" href="style/MarkerCluster.Default.css" />
<script src='https://unpkg.com/leaflet#1.0.1/dist/leaflet.js'></script>
<link href='https://unpkg.com/leaflet#1.0.1/dist/leaflet.css' rel='stylesheet' />
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
<script src="script/leaflet.makimarkers.js"></script>
<script src="leaflet-providers/leaflet-providers.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jQuery/jquery-1.11.1-min.js"></script>
<script src="script/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map" style="width: 1895px; height: 940px;"></div>
<script src="script.js"></script>       
</body>
</html>
I got the error;
TypeError: t is undefined
Could any leafletjs expert help me to figure out what is going on, please?