IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

jQuery UI Dialog et formulaire


Sujet :

jQuery

  1. #1
    Invité
    Invité(e)
    Par défaut jQuery UI Dialog et formulaire
    Salut,
    je développe un formulaire un peu complexe, et donc par souci de clarté je voudrais déporter certains champ sur une fenêtre Dialog de jQuery.
    Ma DIV est bien dans le formulaire, mais le code généré me déplace toute la div en dehors, tout en bas de ma page. Ainsi, lorsque le formulaire est validé, les champs ne sont pas pris en compte.

    Je ne pense pas qu'il s'agisse d'un fonctionnement normal, mais je ne vois pas ce que je fais de spécial. Voici le code concerné :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    $('#addPieceJointe').click(function() {
    		$('#piecesjointesDialog').dialog('open');
    		return false;
    	})
     
    	$("#piecesjointesDialog").dialog({
    		width: 320,
    		maxWidth: 320,
    		minWidth: 320,
    		modal: true
    	});

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    <div id="piecesjointesDialog" title="<bean:message key="demande.piecesjointes" />">
    		<ul id="piecesjointes"></ul>
    		<div id="add_piecesjointes"><a href="#" onclick="addAttachment();"><html:img src="image/add.png"/><bean:message key="demande.ajouterpiecejointe" /></a></div>
    		<p><bean:message key="demande.piecesjointes.maxsize" /></p>
    		<p><input type="button" class="submit" onclick="$('#piecesjointesDialog').dialog('close');" value="<bean:message key="general.ok" />" /></p>
    	</div>
     
    	<div class="icon" style="float:right;"><p><a href="#" id="addPieceJointe"><html:img src="image/pieces_jointes.png"/></p><p><bean:message key="demande.piecesjointes" /></p></a></div>

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2008
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2008
    Messages : 17
    Par défaut
    Bonjour,

    Pour ce qui est des boutons sous JQuery UI, vas voir du côté de l'option "buttons" où tu définis tes boutons ainsi que les fonctions à exécuter au click.
    Tu passes ensuite tes options au moment du

    "$("#maDiv").dialog(options)"

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir.

    Je vois une erreur, pas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div id="piecesjointesDialog" title="<bean:message key="demande.piecesjointes" />">
    mais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div id="piecesjointesDialog" title="<bean:message key='demande.piecesjointes' />">

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Une autre erreur ici :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <div class="icon" style="float:right;">
        <p>
            <a href="#" id="addPieceJointe">
                <html:img src="image/pieces_jointes.png"/>
        </p>
        <p>
            <bean:message key="demande.piecesjointes" />
        </p>
        </a>
    </div>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Futur Membre du Club
    Inscrit en
    Janvier 2008
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Janvier 2008
    Messages : 3
    Par défaut
    Salut
    Le pb est que jquery.dialog remanie le dom de ta page.
    Une fois que la boite de dialogue est créée, celle-ci n'est plus entre les balises du form.
    J'ai résolu ce pb en réinsérant en dhtml, le div dans le form avant le submit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
     
    $("#divOptionsAvancees").dialog({ 
    		height: 500,
    		width: 340,
    		autoOpen: false,
       		modal: true, 
        	overlay: { 
    	        opacity: 0.5, 
    	        background: "black" 
    	    }, 
    	    buttons: {
    			'Valider': function() {
     
    			 	var node = document.getElementById("divOptionsAvancees");
    			 	document.formSyntheseMarches.appendChild(node);
    				$(this).dialog('close');
    				$("form[name='myForm']").submit();
     
    			},
    			'Annuler': function() {
    				$(this).dialog('close');
    			}
    		}
    	});
    Si qqun a une solution un poil plus élégante, je suis preneur.

  6. #6
    Invité
    Invité(e)
    Par défaut
    Effectivement ce n'est pas très propre, mais je ne vois pas d'autre solution pour l'instant... Merci charlux 64 ;-)

  7. #7
    Membre averti
    Inscrit en
    Mars 2008
    Messages
    27
    Détails du profil
    Informations forums :
    Inscription : Mars 2008
    Messages : 27
    Par défaut
    En reprenant ton idée, je fais le déplacement au moment de la création.
    Cependant je déplace le dialogue complet (dialogClass). C'est plus pratique.
    Il y a qu'un truc qui fonctionne mal avec cette astuce c'est lorsque modal est actif (il passe devant le dialog car le zIndex est plus fort).

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    	$("#form-edit .test").dialog({
    		dialogClass: 'test-dialog',
    	        create: function() {
    			$("#form-edit").append($(".test-dialog"));
    		}
    	});

  8. #8
    Membre éclairé
    Profil pro
    Inscrit en
    Août 2008
    Messages
    44
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 44
    Par défaut
    J'apporte une petite correction qui fonctionne mieux (je trouve) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    $("#delayReasonPanel").dialog({
       autoOpen: false,
       modal: true,
       width: 400,
       resizable: false,
       create: function () { 
          $("#delayReasonPanel").parent().appendTo($("#missionForm"));
       }
    });

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. jQuery UI Dialog & asp.net MVC
    Par pacifiquement dans le forum ASP.NET MVC
    Réponses: 0
    Dernier message: 11/07/2011, 14h53
  2. JQuery.UI Dialog et ASP.NET
    Par SlaYoU dans le forum ASP.NET
    Réponses: 1
    Dernier message: 18/03/2011, 03h15
  3. Jquery UI Dialog qui s'affiche 2 fois
    Par fenchi dans le forum jQuery
    Réponses: 1
    Dernier message: 16/02/2011, 08h54
  4. jQuery/Js dans un formulaire Zend
    Par Arkon06 dans le forum Zend_Form
    Réponses: 1
    Dernier message: 16/08/2010, 23h58
  5. Jquery ui.dialog unique.
    Par swann_cb dans le forum jQuery
    Réponses: 3
    Dernier message: 15/05/2009, 16h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo