[.html() ] Utilisation d'un form

Version imprimable

25/05/2009, 17h20
CactO_o's

[.html() ] Utilisation d'un form
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:

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
25/05/2009, 17h24
Kerod
Mets ton code qu'on voit le problème. ;)

Le code :
1. (X)HTML/CSS : que le code affiché par le navigateur
2. PHP : le code permettant de faire l'AJAX
3. JavaScript
:merci:

Code HTML :

Code:

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:

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

Code JS traitant l'HTML :

Code:

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

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:

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>

26/05/2009, 00h15
CactO_o's

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
26/05/2009, 16h10
CactO_o's

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