Problemi submit form in dialog
- Questo topic ha 5 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 9 anni, 2 mesi fa da jqueryitalia.
- AutorePost
- 24 Febbraio 2015 alle 10:17 #6646lusserPartecipante
Ciao a tutti è da poco che uso jquery ho un problema con una dialog jquery ui 1.7.2.
ho creato la seguente funzione per la dialog:
$(function() { $('#dialogNote').dialog({ resizable: false, dialogClass: 'no-close', height: 300, width: 500, modal: true, autoOpen : false, position: ['center', 'center'], overlay: { backgroundColor: '#000′, opacity: 0.5 }, buttons: { 'CONFERMA': function() { var $codiceSupporto = $(this).data('codiceSupporto'); var $note = $(this).data('note'); $('input#codiceSupporto').val($codiceSupporto); $('input#note').val($note); $('input#note').val($('textarea#noteTextarea').val()); //$('#formNote').submit(); document.forms['formNote'].submit(); }, 'ANNULLA' : function() { $(this).dialog('close'); } }, open: function (e, ui) { //valorizzo la label codice supporto var codiceSupporto = $(this).data('codiceSupporto'); var note = $(this).data('note'); $('label#codSupporto').html('Codice supporto: '+codiceSupporto); $('textarea#noteTextarea').html(note); // definisco il limite massimo di caratteri var limite = 255; var quanti = $('#noteTextarea').val().length; var rimasti = limite – quanti; // mostro il conteggio in real-time $('label#conteggio').html(rimasti + ' caratteri rimasti'); } }); });
il problema è il seguente:
quando clikko sul pulsante “CONFERMA” non viene fatta la submit del form se non la prima volta oppure dopo numerosi click per completezza uso struts 1
25 Febbraio 2015 alle 12:55 #6648jqueryitaliaAmministratoreCiao lusser!
Occhio quando inserisci codice nei post 😉
Relativamente alla tua domanda, la soluzione è la seguente:
- al pulsante CONFERMA invece di associare la function() associa una vera e propria funzione (nel mio esempio saveData() );
- inserisci poi il codice che intercetti il submit del form ed esegua la funzione
In pratica devi modificare il tuo codice in questa maniera:
$(function() { var myDialog, myForm; function saveData() { var $codiceSupporto = $(this).data('codiceSupporto'); var $note = $(this).data('note'); $('input#codiceSupporto').val($codiceSupporto); $('input#note').val($note); $('input#note').val($('textarea#noteTextarea').val()); myDialog.dialog('close'); } myDialog = $('#dialogNote').dialog({ resizable: false, dialogClass: 'no-close', height: 300, width: 500, modal: true, autoOpen : false, position: ['center', 'center'], overlay: { backgroundColor: '#000′, opacity: '.5' }, buttons: { 'CONFERMA': saveData, 'ANNULLA' : function() { myDialog.dialog('close'); } }, open: function (e, ui) { //valorizzo la label codice supporto var codiceSupporto = $(this).data('codiceSupporto'); var note = $(this).data('note'); $('label#codSupporto').html('Codice supporto: '+codiceSupporto); $('textarea#noteTextarea').html(note); // definisco il limite massimo di caratteri var limite = 255; var quanti = $('#noteTextarea').val().length; var rimasti = limite – quanti; // mostro il conteggio in real-time $('label#conteggio').html(rimasti + ' caratteri rimasti'); } }); myForm = myDialog.find( "form" ).on( "submit", function( e ) { e.preventDefault(); saveData(); }); });
Buon lavoro!
25 Febbraio 2015 alle 15:40 #6650lusserPartecipanteCiao grazie della risposta
non riesco a capire dove mettere la submit vera e propria in saveData?
function saveData() { var $codiceSupporto = $(this).data('codiceSupporto'); var $note = $(this).data('note'); $('input#codiceSupporto').val($codiceSupporto); $('input#note').val($note); $('input#note').val($('textarea#noteTextarea').val()); myDialog.dialog('close'); }
inserendo in questa funzione $(‘#formNote’).submit();
saluti
25 Febbraio 2015 alle 15:54 #6652jqueryitaliaAmministratoreNon devi inserire alcuna funzione di submit, in quanto il submit stesso viene intercettato dalla funzione sottostante la definizione della modal, questo:
myForm = myDialog.find( "form" ).on( "submit", function( e ) { e.preventDefault(); saveData(); });
Copia lo script che ho inserito in precedenza e vedrai che tutto funziona a dovere 😉
25 Febbraio 2015 alle 16:32 #6653lusserPartecipanteciao scusa se ti disturbo ancora nella pagina ho queste librerie jquery non posso modificarle
<link href="http://code.jquery.com/ui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.7.2/jquery-ui.js"></script>
l’errore che ho con su questa linea di codice
myForm = myDialog.find( “form” ).on( “submit”, function( e ) {
è questo:
Uncaught TypeError: undefined is not a function
la dialog è la seguente:
<div id="dialogNote" title="MODIFICA NOTE" class="${style}"> <form action="setNotaSupporto.do" method="post" id="formNote" > <input type="hidden" id="codiceSupporto" name="codiceSupporto"/> <input type="hidden" id="note" name="note"/> </form> <div style="width:100%"> <label id="codSupporto" style="font-size:10px;font-weight:bold"></label> <label id="conteggio" style="font-size:10px;float:right;">255 Caratteri rimasti</label> </div> <div style="width:100%;"> <textarea rows="4" style="width:100%" id="noteTextarea" name="noteTextarea" ></textarea> </div> </div>
saluti
25 Febbraio 2015 alle 21:40 #6655jqueryitaliaAmministratorejQuery 1.3.2 ?!?!?!?!? o_O
Credo sia una delle primissime versioni: è ovvio che non funzioni…
- AutorePost
- Devi essere connesso per rispondere a questo topic.