schemo.jpg
Salve a tutti sto studiando java e voglio usare Bulma css come framework insieme a Thymeleaf ma conoscendo poco javascipt non riesco a ottenere quello che desidero, ossia aprire due form modali differenti una per inserimento e l'altra come update con selezione da tabella, ma riesco a far funzionare una o l'altra in modo corretto. (In allegato la pagina web)
Questo codice:
codice HTML:
button type="button" class="toggle-modal button is-small is-info is-rounded"
id="showModal2"
th:attr="data-id_cliente=${clienti.id_cliente}, data-nome=${clienti.nome},
data-cognome=${clienti.cognome},data-partita_iva=${clienti.partita_iva},
data-indirizzo=${clienti.indirizzo}, data-telefono=${clienti.telefono}">
Edit
</button>
<button type ="button" class="toggle-modal button is-primary is-rounded is-small" id="showModal1">
Nuovo Cliente
</button>
<div class="modal fade" role="dialog" id="myModal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Maschera Clienti: Update</p>
<button class="delete toggle-modal"></button>
</header>
<section class="modal-card-body">
<div th:insert="fragment :: form1"></div>
</section>
</div>
</div>
<div class="modal fade" role="dialog" id="myModal2">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Maschera Clienti: Insert</p>
<button class="delete toggle-modal"></button>
</header>
<section class="modal-card-body">
<div th:insert="fragment :: form2"></div>
</section>
</div>
</div>
Questo è il codice javascript che mi funziona per la selezione nella tabella non so come aggiungere altro per usare altra form:
codice:
var modal = document.getElementById('myModal');
var elements = document.getElementsByClassName('toggle-modal');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', toggleClass);
}
function toggleClass() {
modal.classList.toggle('is-active');
$("#id_cliente").val($(this).data('id_cliente'));
$("#nome").val($(this).data('nome'));
$("#cognome").val($(this).data('cognome'));
$("#partita_iva").val($(this).data('partita_iva'));
$("#indirizzo").val($(this).data('indirizzo'));
$("#paese").val($(this).data('paese'));
$("#telefono").val($(this).data('telefono'));
}