Datepicker в цикле
У меня есть эта проблема. Я пытаюсь создать страницу формы, где она будет отображать список данных, используя цикл while, и у каждого из них есть опция поля ввода, чтобы выбрать дату, которая будет отправлена позже. На данный момент у меня отображается около 4 полей, но средство выбора даты работает только для первого. Остальные просто пустое текстовое поле.
Это мой код:
$query = "SELECT * FROM application WHERE Shortlist_status = 1 ORDER BY Candidate_id ASC";
$result = mysqli_query($link, $query) or die(mysqli_error($link));
<html>
<head>
<link href="stylesheet/style.css" rel="stylesheet"/>
<script src="script/jquery-1.10.2.min.js"></script>
<script src="script/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="stylesheet/jquery-ui-1.10.3.custom.min.css"><script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script></head>
<title>
Arrange interview
</title>
<body>
while ($row = mysqli_fetch_array($result)) {
(Some other input data)
<input type="text" id="datepicker" name="date"/>
}
Решение
Используйте класс datepicker вместо уникального идентификатора:
$query = "SELECT * FROM application WHERE Shortlist_status = 1 ORDER BY Candidate_id ASC";
$result = mysqli_query($link, $query) or die(mysqli_error($link));
<html>
<head>
<link href="stylesheet/style.css" rel="stylesheet"/>
<script src="script/jquery-1.10.2.min.js"></script>
<script src="script/jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="stylesheet/jquery-ui-1.10.3.custom.min.css"><script>
$(function() {
$( ".datepicker" ).datepicker(); // Change this line
});
</script></head>
<title>
Arrange interview
</title>
<body>
while ($row = mysqli_fetch_array($result)) {
(Some other input data)
<input type="text" class="datepicker" name="date"/> // Change this line
}
Объяснение:
Атрибут id должен иметь уникальное значение. Вы не можете определить 4 DatePicker с тем же идентификатором datepicker, Вместо этого вы должны использовать атрибут class, Ваш селектор JQuery становится потом $('.datepicker'),
Другие решения
Других решений пока нет …
detector