My form has a datePratique field that hosts datetimepicker
I also have dynamic selections
-theme1
content1
Content1 values ??depend on theme1 value
For that I use $formModifier in symfony5 which uses a promise (fetch).
My problem is when I modify the Dom, I lose the functionality of datetimepicker and therefore when submitting my form, I no longer have the value of the datePractice field.
I would like to know how to reload datetimepicker after modification of the dom to recover my value or to be able to modify it if necessary
Here are some snippets of my code. I remain at your disposal for any further information.
TWIG
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
{{form_widget(form.datePractice) }}
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
js
// 1. datetimePicker
$(function () {
$('#datetimepicker1').datetimepicker({
locale:'fr',
format : 'DD-MM-YYYY LT',
icons: {
time: 'fa fa-clock',
date: 'fa fa-calendar',
up: 'fa fa-arrow-up',
down: 'fa fa-arrow-down'
},
defaultDate : new Date (),
widgetPositioning : {
horizontal: 'right',
}
});
});
HOW AND WHEN TO RELOAD DATETIMEPICKER
window.onload = () => {
// FORM WITH DYNAMIC SELECT
theme1.addEventListener('change', function() {
let form = this.closest('form');
let data = this.name + '='+ this.value;
fetch(form.action, {
method: form.getAttribute('method'),
body: data,
headers:{
"Content-Type": "application/x-www-form-urlencoded;charset:utf-8"
}
})
.then(response => response.text())
.then(html => {
// CHANGES THE HTML DOCUMENT
let content = document.createElement('html');
content.innerHTML = html;
// REPLACES THE OLD DIV WITH THE NEW
let newContenu = content.querySelector('#programmation_contenu1');
document.querySelector('#programmation_contenu1').replaceWith(newContenu);
})
.catch(error => {
console.log(error);
})
})
}
Thanks for your help
