Тип ввода HTML = «date» сохраняет кэширование / распространение значений

#html #cachin& #input

#HTML #кэширование #ввод

Вопрос:

Проблема

По сути, если я добавляю элементы в список, я выполняю ajax-запрос, чтобы добавить их в массив в серверной части и обновить страницу.

И каждый элемент имеет две записи даты, одну для полученной и одну для отправленной. Если я заполню одну из дат, она изменит ее в серверной части с помощью другого ajax-запроса, а затем введет значение этого элемента.

Проблема в том, что из-за кэширования или чего-то еще часто случается, что при изменении одного значения даты ввода оно «дублируется» на другое. Я думаю, что это проблема с кэшированием, поскольку, если я проверяю элемент, тот, который был фактически изменен, имеет значение = «xxxx-xx-xx», тогда как тот, который был поврежден в кэше, имеет значение = «».

Попытка разрешения

Я уже пробовал $("input").attr("autocomplete", "off"); // Disable input cachin&

Код / Изображения

Вот изображение рассматриваемой проблемы https://im&ur.com/PNNlRCK

Когда я проверяю элемент, который я хотел изменить,

 <input type="date" name="2020-08-12" id="sent" class="inp b&-dark border-0 text-center text-white" value="2020-08-12" autocomplete="off"&&t;
  

Когда я проверяю элемент того, который ломается в кэше,

 <input type="date" name="" id="rcvd" class="inp b&-dark border-0 text-center text-white" value="" autocomplete="off"&&t;
  

Тем не менее, оба визуально отображают одну и ту же дату. Как вы можете себе представить, это действительно может сбить пользователей с толку и заставить их попытаться решить проблему самостоятельно, потенциально нарушая больше.

Ответ №1:

Возможно, вы использовали селектор дубликатов при выборе входных данных для изменения значения. Я предлагаю, чтобы каждая запись была однозначно идентифицирована идентификатором (например, UUID), и каждый ввод в каждой записи должен иметь имя.

И затем в HTML вы используете data-id атрибут для выбора записи и name атрибут для выбора желаемого ввода. Наконец, вы можете выполнить изменение входного значения.

 $('.entry[data-id="7558c4eb-8c2c-499b-b5cc-ea4ca475b399"] input[name=sentDate]').val("2020-08-08");
  

Примечание: использовать sent и rcvd id для 2 входных данных в каждой записи нехорошо. Атрибут Id должен быть уникальным для всей html-страницы.

Вот мой демонстрационный код