EDIT1:
Так что мне удалось решить эту проблему.Но я не уверен как.Я использовал две одинаковые формы с разными идентификаторами по разным причинам (формы «Добавить» и «Изменить»).В этих формах у меня были входные данные с идентификаторами.Но для обеих форм я использовал один и тот же идентификатор для входов в них.Поэтому я меняю эти идентификаторы на классы (как и должно быть).Я думаю, что это было причиной ошибки.
Второе, что я изменил, - это удаление первой формы через мгновение. Я нажимал на вторую форму (Редактировать форму / кнопку), потому что это создавало проблемы,Я не думаю, что это как-то связано с моей первоначальной проблемой.Просто пишу все, что я делал в любом случае.
У меня проблема с jQuery Datepicker и Timepicker.Я попытаюсь описать мою ситуацию.
Я динамически создал html для своих локальных значений хранения (представьте квадраты с собственными данными в нем.)
Моя проблема ... Если я просто загружу эти квадратыи я хочу что-то изменить, нажав на кнопку «Изменить». Она создаст форму с предварительно записанными значениями, нажав на один из этих входов, появится календарь.И затем после нажатия на какую-то дату, предварительно записанное значение меняется со значением даты, на которую я нажал.То же самое для Timepicker.Но!Существует проблема.
Если я хочу создать новые квадраты с новыми данными (путем динамического создания формы с входными данными, то данные сохраняются в локальном хранилище), а затем (без обновления страницы) нажать кнопку редактирования, чтобы вернуть ту же старую форму(как описано выше) и нажав на некоторые из входов, календарь появляется, но после нажатия на некоторую дату, значение ввода не меняется.То же самое с Timepicker, не перезаписывает предвиденное значение.
Но если я обновлю страницу и захочу что-то отредактировать (без создания новых квадратов / данных), Datepicker изменит значение без проблем.
Можете ли вы помочь мне, пожалуйста?Я постараюсь ответить на любой вопрос, если это необходимо.
Вот функция, которая показывает все, сохраненные в локальном хранилище.
function fetchBookmarks() {
var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
bookmarks.sort(function compare(a, b) {
var dateA = new Date(a.date);
var dateB = new Date(b.date);
return dateB - dateA;
});
var results = document.getElementById("results");
results.innerHTML = "";
for (var i = 0; i < bookmarks.length; i++) {
var date = bookmarks[i].date;
var distance = bookmarks[i].distance;
var time = bookmarks[i].time;
results.innerHTML += '<div class="bookmarks shadow p-3 m-2 bg-light rounded">' +
'<div class="row">' +
'<div class="col">' +
'<h3>Date: </h3>' +
'<h3>Distance: </h3>' +
'<h3>Time: </h3>' +
'</h3><input onclick="editBookmarks(\'' + time + '\')" class="btn btn-outline-primary mr-1 btn-lg" id="edit" type="button" value="Edit"><input onclick="deleteBookmarks(\'' + time + '\')" class="btn btn-outline-danger btn-lg" id="deleteBookmarks" type="button" value="Delete">' +
'</div>' +
'<div class="col">' +
'<h3 class="font-weight-bold">' + date + '</h3>' +
'<h3 class="font-weight-bold">' + distance + '</h3>' +
'<h3 class="font-weight-bold">' + time + '</h3>'
'</div>' +
'</div>' +
'</div>';
};
};
А вот функция после нажатия на кнопку редактирования ...
function editBookmarks(time) {
var bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
for (var i = 0; i < bookmarks.length; i++) {
if (bookmarks[i].time == time) {
$(".bookmarks").hide();
results.innerHTML += '<form class="bookmarks shadow p-3 m-2 bg-light rounded" id="editForm">' +
'<h4>Date: </h4><input class="form-control form-control-lg" id="date" placeholder="Select" value="' + bookmarks[i].date + '" type=""><br>' +
'<h4>Distance: </h4><input class="form-control form-control-lg" id="distance" placeholder="In miles" value="' + bookmarks[i].distance + '" type="text"><br>' +
'<h4>Time: </h4><input class="form-control form-control-lg" id="time" placeholder="Select" value="' + bookmarks[i].time + '" type=""><br>' +
'<input class="btn btn-success btn-lg" type="submit" value="Submit">' +
'</form>';
/* $('#date').datepicker()
$('#time').timepicker({
timeFormat: "H:mm",
hourMin: 0,
hourMax: 4
}); */
bookmarks.splice(i, 1);
};
};
$("#editForm").on("submit", function (e) {
var date = $("#date").val();
var distance = $("#distance").val();
var time = $("#time").val();
if (!distance.length || !date.length || !time.length) {
alert("Something missing!")
} else {
var bookmark = {
date: date,
distance: distance,
time: time
};
bookmarks.push(bookmark);
localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
fetchBookmarks();
$("#editForm").hide();
};
e.preventDefault();
});
$("#search").hide();
};
А здесьэто Datepicker с Timepicker
$('body').on('focus', "#date", function () {
$(this).datepicker();
});
$('body').on('focus', "#time", function () {
$(this).timepicker({
timeFormat: "H:mm",
hourMin: 0,
hourMax: 4
});
});
Я знаю, что это довольно много, чтобы спросить, и у меня проблема с артикуляцией.Я просто потерян в этом.
Я благодарен за любую помощь.
Вот ссылка на файл GitHub, я думаю, что это лучше, чем размещать код здесь.Вся моя проблема в нижней части файла, если вам интересно.
https://github.com/ovy1448/MyRun/blob/master/js/main.js
Еще раз спасибо.