Vai al contenuto
jQuery Italia
jQuery Italia

La community italiana di jQuery

  • HOME
  • IMPARA
    • Tutorials jQuery Italia
    • Tutorials dal web
    • Supporto ed Aiuto
  • CONTRIBUISCI
    • Nuovo Articolo
    • Nuovo Tutorial
  • SVILUPPA
    • Snippets
    • Tools
    • Download
    • Plugins
    • Links
  • NOTIZIE
    • jQuery
    • jQuery UI
    • Projects
  • CONTATTI
  • LOGIN
  • REGISTRATI

Problemi submit form in dialog

Home › Forum › Supporto ed Aiuto › Problemi con jQuery UI

Scrivi le tue richieste di aiuto nella sezione relativa.
Posta qui eventuali problemi con jQuery UI

Taggato: dialog, form, jquery ui

  • Questo topic ha 5 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 7 anni, 5 mesi fa da jqueryitalia.
Stai visualizzando 6 post - dal 1 a 6 (di 6 totali)
  • Autore
    Post
  • 24 Febbraio 2015 alle 10:17 #6646
    lusser
    Partecipante

    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 #6648
    jqueryitalia
    Amministratore

    Ciao 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 #6650
    lusser
    Partecipante

    Ciao 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 #6652
    jqueryitalia
    Amministratore

    Non 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 #6653
    lusser
    Partecipante

    ciao 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 #6655
    jqueryitalia
    Amministratore

    jQuery 1.3.2 ?!?!?!?!? o_O

    Credo sia una delle primissime versioni: è ovvio che non funzioni…

  • Autore
    Post
Stai visualizzando 6 post - dal 1 a 6 (di 6 totali)
  • Devi essere connesso per rispondere a questo topic.
Accesso
Accedi con Facebook
Accedi con Google
Accedi con Twitter

Login

Accedi con Facebook
Accedi con Google
Accedi con Twitter
  • Registrati
  • Password dimenticata?

SOSTIENI jQuery Italia

Aiuta la Community di jQuery Italia a rimanere in vita per contribuire a diffondere le conoscenze di base ed avanzate di jQuery.

Download in evidenza

  • gmap104.html (3590 download)
  • jqueryformwizard-201.html (3222 download)
  • jquery-1.4.1.min.js (3140 download)
  • tinytips11.html (3126 download)
  • jquery-ui-1.8rc1.zip (2990 download)
  • jquerytools120.html (2919 download)
  • jquery-1.4.2.min.js (2905 download)
  • calendarPicker.html (2893 download)
  • 1.0.0.zip (2886 download)
  • move-background.html (2855 download)

jQuery Links

  • jQuery Howto
  • jQuery Official Site
  • jQuery UI Official Site
  • Learning jQuery
  • Use jQuery

SITO SEGNALATO SU

Sito segnalato da Freeonline.it - La guida alle risorse gratuite Mooseek.com - Web Directory, Download Software, Giochi Online, Video Tecnologici, Siti d'Affari

TAG

aggiornamento (3) ajax (5) Android (5) animazione (49) api (10) BlackBerry (4) calendario (3) canvas (4) css3 (9) form (12) framework (41) gallery (8) google (5) html5 (11) immagini (38) javascript (29) jQuery (160) jQuery UI (15) Linux Day (3) maps (3) menu (6) mobile (10) modalbox (2) open source (4) overlay (3) plugin (93) Plugins (17) presentation cycle (4) projects (11) responsive (5) slider (7) slideshow (18) Smartphones (5) Tablets (4) template (5) tooltip (6) tutorial (12) twitter (2) upload (3) utility (18) VELug (3) video (3) widget (3) WYSIWYG (2) zoom (3)
jQuery Italia

La community italiana di jQuery

  • Facebook
  • Twitter
  • Linkedin
  • Youtube
Tutti i loghi ed i marchi contenuti e citati in questo sito sono dei rispettivi propietari.
Privacy Policy
Cookies Policy
COPYRIGHT © 2010 - 2022 jQuery Italia
Designed By ZeeTheme
Posting....