Clone row with datepicker component

Topic: Clone row with datepicker component

Huichofer pro asked 6 years ago

Hi, I have noticed two particular behaviors when having a Datepicker element inside an editable table with the option to add a new row by cloning an existing one (like the example provided in MDB editable-table page)

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)

I want to know if I'm doing doing something wrong or is an issue with datepicker element (also happens with timepicker) This is a test page where you can see these behaviors:

<!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>

Add comment

Jakub Mandra staff premium answered 6 years ago

0 1 Best answer

Hello, I looked deeper into the problem and found out that the cloned inputs have same ID as their ancestor. That is the source of the problem. I'll report the issue to our JQuery team becouse it's an issue with DatePicker too. Thank you for posting. Regards, Jakub

Add comment

dmr pro answered 6 years ago