Topic: Clone row with datepicker component
- When the cloned row is added to the table and I click on the Datepicker element to set a date, it changes the date on the original row, not on the cloned one. I also noticed that right after I click on the datepicker of the cloned row, the focus goes immediately to the datepicker of the original row. I looked into jquery's clone function to solve this but with no luck.
- Also, after cloning a row, the rows that were already in the table (in the example I provide: first and second row) they don't set the date in their datepicker element anymore (they do before I add a cloned row)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Start your project here-->
<!-- Editable table -->
<div class="card">
<h3 class="card-header text-center font-weight-bold text-uppercase py-4">Editable table</h3>
<div class="card-body">
<div id="table">
<span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></a></span>
<table class="table table-bordered table-striped text-center">
<tr>
<th class="text-center">Person Name</th>
<th class="text-center">Date</th>
</tr>
<tr>
<td>Aurelia Vega</td>
<td>
<input placeholder="Selected date" type="text" class="datepicker">
</td>
</tr>
<tr>
<td>Guadalupe House</td>
<td>
<input placeholder="Selected date" type="text" class="datepicker">
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td>Elisa Gallagher</td>
<td>
<input placeholder="Selected date" type="text" class="datepicker">
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- Editable table -->
<!-- /Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
$('.datepicker').pickadate();
var $TABLE = $('#table');
$('.table-add').click(function () {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
</script>
</body>
</html>
Well it is impossible to work.
Select has to be initialized with .materialSelect() method, as well as DatePicker and other components with external JS functionality.
I've made snippet with subbfixed problem, which should lighten the situation.
https://mdbootstrap.com/snippets/jquery/mandra/150194
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.9
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: Yes