[.html() ] Utilisation d'un form

**CactO_o's** · 25/05/2009, 17h20

EDIT :

Après de nombreux tests je me suis rendu compte que le problème ne venait en faite pas du widget Dialog de jQuery mais plutôt de la fonction html() qui modifie le comportement des balises, dont la fermeture de la balise form directement après l'ouverture, (<form>[...]</form> => <form></form>[...])

[-----------------------------------------------------------------]

Bonjour à tous,

J'utilise pour mon site le widget 'Dialog' de JqueryUI... Je me suis fait un petit script JS, qui ouvre les boites de dialogues, récupère le contenu en Ajax et l'affiche a l'intérieur...

Cependant voilà le problème, j'ai une des pages qui contient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form action="traitement.php" method="post">
    <select name="select1">
[...]
    </select>
    <select name="select2">
[...]
    </select>
    <input type="submit" />
</form>

Simplement lorsque je l'ouvre dans la boite de dialogue, au click le bouton réagit comme sur un <input type="button" />
De plus ma page traitement.php contient un header("Location: index.php"); qui ne fonctionne pas non plus...

J'ai déjà pas mal cherché sur le sujet et les seuls réponses sont de mettre les bouttons dans l'option 'button' de jquery dialog...
Mais avec mon systeme de récupération en Ajax je ne peut pas résoudre le problème de cette manière...

Quelqu'un aurait une autre solution ??

Merci à tous

**Kerod** · 25/05/2009, 17h24

Mets ton code qu'on voit le problème.

Le code :

(X)HTML/CSS : que le code affiché par le navigateur
PHP : le code permettant de faire l'AJAX
JavaScript

**CactO_o's** · 25/05/2009, 17h37

Code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
		<span class='lanceur_dialog'>
			<span class='lanceur_dialog_url' style='display:none'>php/gestion_site/ajouter.php</span>
			<span class='lanceur_dialog_title' style='display:none'>Ajouter</span>
			Ajouter
		</span>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
		<div id="jqueryui_dialog"> </div>

Code JS traitant l'HTML :

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
25
26
27
28
29
30
31
32
 
	$("#jqueryui_dialog").dialog(
	{
		autoOpen  : false,
		resizable : false,
		modal     : true,
		hide      : 'slide', 
		show      : 'slide',
		close     : function()
		{
			$("#jqueryui_dialog").attr('title', ' ');
			$("#jqueryui_dialog").html(' ');
		}
	});	
 
	$(".lanceur_dialog").click(function()
	{
		var url_dialog = $(this).children('.lanceur_dialog_url').text();
		$("#jqueryui_dialog").html('<img style="margin-top:25px;" src="img/loadingAnimation.gif"/>');
 
                $.ajax(
		{
			url: url_dialog,
			success: function(rep_dialog)
                        {
				$("#jqueryui_dialog").html(rep_dialog);
			}
		});
 
		$("#jqueryui_dialog").dialog('option', 'title', $(this).children('.lanceur_dialog_title').text());
		$("#jqueryui_dialog").dialog("open");
	});

**danielhagnoul** · 25/05/2009, 23h50

Bonsoir.

Si j'ai bien compris, votre problème vient lorsque le dialogue contient le formulaire.

J'ai testé une version locale (ni AJAX ni PHP) sans constater de problème, voici mon code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #999999;
            font-size:0.8em;
        }
        div#conteneur p {
            margin-bottom:12px;
        }
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.1.custom.css" media="screen" />
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#jqueryui_dialog").dialog({
                autoOpen  : false,
                height: 200,
                width: 400,
                modal: true,
                hide: 'slide', 
                show: 'slide',
                buttons: {
                    "Ok": function() {
                        console.log("L'utilisateur à cliqué sur OK");
                        $(this).dialog("close");
                    }
                },
                close: function(){
                    console.log("L'utilisateur à fermé le dialogue");
                    $(this).attr('title', ' ');
                    $(this).html(' ');
                }
            });
 
            $(".lanceur_dialog").click(function(){
                $("#jqueryui_dialog").dialog('option', 'title', $(this).children('.lanceur_dialog_title').text());
                $("#jqueryui_dialog").dialog("open");
            });
 
            /* si on réouvre le dialogue il est bien vide ! */
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <span class='lanceur_dialog'>
            <span class='lanceur_dialog_title' style='display:none'>Ajouter</span>
            Ajouter
        </span>
        <div id="jqueryui_dialog">
            <form name="choisir" action="javascript:alert(document.choisir.select1.value + ', ' + document.choisir.select2.value);" method="post">
                <select name="select1">
                    <option value="1" selected="selected">Un</option>
                    <option value="2">Deux</option>
                    <option value="3">Trois</option>
                    <option value="4">Quatre</option>
                </select>
                <select name="select2">
                    <option value="Premier choix" selected="selected">Choix 1</option>
                    <option value="Deuxième choix" selected="selected">Choix 2</option>
                    <option value="Troisième choix" selected="selected">Choix 3</option>
                    <option value="Quatrième choix" selected="selected">Choix 4</option>
                </select>
                <input type="submit" />
            </form>
        </div>
    </div>
</body>
</html>

**CactO_o's** · 26/05/2009, 00h15

Merci pour ton code, mais je ne peux pas utiliser l'option button pour valider le formulaire..

Le principe est fondé sur l'AJAX qui va charger n'importe quelle page (avec l'url dans .lanceur_dialog_url) et l'afficher dans la boite de dialogue...
Il n'y aura donc pas un formulaire sur chaque page, et d'autre pourront comprendre un header('Location: x');

Les bouttons de submit seront donc compris dans le code php de la page chargé :s

**CactO_o's** · 26/05/2009, 16h10

Oups, après de nombreux tests je me suis rendu compte que le problème ne vient pas du widget Dialog mais de la fonction jQuery .html() qui ferme les <form> ! et transforme un partie des balises : <br /> => <br>...

J'édite le sujet principal

[.html() ] Utilisation d'un form

jQuery

Vue hybride

Discussions similaires

Partager

Partager