Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2015
    residenza
    Roma
    Messaggi
    3

    Aprire due form modali una con passaggio di parametri e l'alta no.

    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'));
            }

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,129
    Ciao e benvenuto, premesso che non conosco quello che stai usando Bulma css Thymeleaf potrebbe essere perché nel button “showModal2” hai dei parametri che la funzione toggleClass non trova nel “showModal1” e va in errore. Verifica nel console del browser
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2015
    residenza
    Roma
    Messaggi
    3
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Ciao e benvenuto, premesso che non conosco quello che stai usando Bulma css Thymeleaf potrebbe essere perché nel button “showModal2” hai dei parametri che la funzione toggleClass non trova nel “showModal1” e va in errore. Verifica nel console del browser
    Grazie della risposta lo script js che ho postato funziona quando avevo inserito solo il button 'showModal2' apriva una modal form con i dati della riga selezionata poi ho voluto aggiungere altro pulsante per aprire la modal form vuota per inserimento, ma mi è risultato difficile inserire codice js che aprisse form giusta ho fatto divese prove ma succede sempre qualcosa di errato o non si apre niente o sempre la stessa form per i due pulsanti o solo il primo elemento della tabella, mi sono incaponito di usare questo framework Bulma css che non ha sua libreria js ma solo css come magari Bootstrap...

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,129
    Vedi tu come detto non conosco Bulma e non so come funziona, forse fai prima a separare le funzioni
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2015
    residenza
    Roma
    Messaggi
    3
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Vedi tu come detto non conosco Bulma e non so come funziona, forse fai prima a separare le funzioni
    Grazie dell'aiuto provo a fare come dici

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.