Discussion :

[Nico1131]

Bonjour,

Je voudrai savoir s'il est possible avec jQuery de créer une fonction qui affiche un type de dialog selon les paramètres donnés afin de pouvoir la réutilisé dans d'autres pages sans devoir créer des div avec du texte prédéfini dans chaque page ?

[SpaceFrog]

oui

[Nico1131]

D'accord merci

Question peut être bête mais vu que je suis novice en JS et jQuery, peut on mélanger les 2 ensemble dans la fonction ?

[SpaceFrog]

JQuery étant une librairie de fonctions JS ...

[Nico1131]

Ahah oui pas faut
On va dire que c'est à cause du mauvais temps

Bah je va voir ça, créer cette petite fonction et je reviendrai pour avoir un avis dessus

[Nico1131]

Me voilà de retour

J'ai crée ma petite fonction, mais qui ne marche pas car j'ai un peut de mal à faire le switch entre le JS et jQuery.
Enfin bon je vais vous montrer le code vous verrez bien que déjà au niveau du "appendChild" ça ne va pas

Je suis ouvert à toutes améliorations

Code javascript :

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
function messageDialog (TypeMess, Message){
 
	var objDialog = document.createElement("div");
	objDialog.setAttribute('id','dialog');
	objDialog.style.display = 'none';
	objDialog.style.position = 'absolute';
	objDialog.style.zIndex = '100';	
 
 
    switch(TypeMess){
	  // Information 
	  case 'I':
		$("#dialog").dialog({title: 'Information', dialogClass: 'ui-state-highlight', 
				modal: true, 
				autoOpen : false, 
				draggable: false, 
				closeOnEscape: true,
				resizable : false,
				open: function() {
					$( ".ui-dialog" ).css("visibility", "");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
                                        $( "#dialog" ).dialog( "close" );
				}   
		});
		$("#dialog").text(Message);
		$("#dialog").dialog('open');
	    break; 
	  // Erreur
	  case 'E':
		$("#dialog").dialog({title: 'Erreur', dialogClass: 'ui-state-error', 
				modal: true, 
				autoOpen : false, 
				draggable: false, 
				closeOnEscape: true,
				resizable : false,
				open: function() {
					$( ".ui-dialog" ).css("visibility", "");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
                                        $( "#dialog" ).dialog( "close" );
				}   
		});		
		$("#dialog").text(Message);
		$("#dialog").dialog('open');
	    break; 
	  // Succes
	  case 'S':
		$("#dialog").dialog({title: 'Succès', dialogClass: 'no-close success-dialog', 
				modal: true, 
				autoOpen : false, 
				draggable: false, 
				closeOnEscape: true,
				resizable : false,
				open: function() {
					$( ".ui-dialog" ).css("visibility", "");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
                                        $( "#dialog" ).dialog( "close" );
				}   
		});
		$("#dialog").text(Message);
		$("#dialog").dialog('open');
	    break; 
    }
	objDialog.appendChild($("#dialog"));
 
}

[Nico1131]

J'ai réussi à faire apparaitre mon petit Dialog en mode Erreur

J'ai commencé par supprimer ça car inutile :

Code javascript :

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

1
2
3
objDialog.style.display = 'none';
	objDialog.style.position = 'absolute';
	objDialog.style.zIndex = '100';

Puis j'ai modifié le appendChild :

Code javascript :

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

document.body.appendChild(objDialog);

Et voilà le résultat


Bon il reste à faire quelques retouche graphique mais l’essentiel et déjà la

Cependant il me reste un petit problème, car je fais appel de la fonction dans le onBlur d'un champ de saisie (input text) et en gros le dialog s'affiche seulement si je passe 2 fois dans le champ de saisie alors que j'aimerai qu'il s'affiche directement lorsque je sors de son focus la première fois.

Puis en essayant de l'afficher plusieurs fois, tout plante et un joli message d'erreur s'affiche et me dit :
" cannot call methods on dialog prior to initialization; attempted to call method 'close' "

Je comprend à peut près le problème mais je vois pas comment le résoudre

Si quelqu'un aurai une idée

[Nico1131]

Bon bon bon, même si je suis pour le moment le seul à parler dans cette discussion je met quand même la suite de mes modifications car sa pourrait aider d'autres personnes.

Donc pour régler le problème du message d'erreur :
" cannot call methods on dialog prior to initialization; attempted to call method 'close' "

J'ai simplement enlever les :

Code javascript :

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

$( "#dialog" ).dialog( "close" );

dans la fonction close du dialog.

Et dans la fonction open j'ai juste ajouté "visible" au :

Code javascript :

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

$( ".ui-dialog" ).css("visibility", "visible");

Puis j'ai créer ceci à part au chargement de la page :

Code javascript :

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

1
2
3
4
5
 
                //Fermer le Dialog en cliquant ailleurs
		$("body").on("click",".ui-widget-overlay",function() {
			 $('#dialog').dialog( "close" );
		});

Voilà comme ça le message d'erreur est contourné

Cependant il me reste toujours le problème sur le onBlur Je m'y plonge et si quelqu'un sait comment le résoudre je suis la

PS : Plus précisément je fais appel de la fonction messageDialog dans une autre fonction qui, elle, est appelée dans un onBlur, peut être que le problème est du à ça ?

[danielhagnoul]

UI Dialog : http://jqueryui.com/dialog/

[Nico1131]

Salut,

Merci pour ton message très explicite
Mais j'avais bien fait mes recherches dessus, cependant même avec la liste des méthodes et évènements qu'il y a sur les Dialog je n'ai pas réussi à résoudre le problème.

Je suis peut être passé à coter de la solution c'est possible, mais je continu à chercher.
Enfin c'est surtout mon problème que je comprend pas trop, car comme je l'ai dit précédemment le principe de base est que je fait la vérification d'une date en perdant le focus du champ de saisie.
Donc sur le onBlur du champ de saisie sa fait ça :
onBlur --> verif_date(){ [...] messageDialog(); [...] }

Puis le problème est que le Dialog s'affiche qu'à la deuxième perte du focus du champ de saisie mais une fois cela fait je peux l'afficher à nouveau sans problème si je ne recharge pas la page complétement, alors que si je le remplace par une Alert tout fonctionne correctement.

Je crois qu'il dois y avoir un problème avec l'initialisation du Dialog mais je vois pas où je pense l'avoir fait correctement non ?

[Nico1131]

Voilà voilà j'ai réussi

En gros j'ai un peut fait tout est n'importe quoi, pour être franc je sais pas vraiment le pourquoi du comment, mais je pense que sa venait du fait de l'ajout du texte après l'initialisation du Dialog.

Donc voici le résultat pour un Dialog de type Erreur :


Je vous met ci-dessous tout le code complet avec les petites modifications

Code javascript :

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
function messageDialog(TypeMess, Message){
 
	var objDialog = document.createElement("div");
	objDialog.setAttribute('id','dialog');
	document.body.appendChild(objDialog);
 
    switch(TypeMess){
	  // Information 
	  case 'I':
	  // Dialog Inforamtion
          break; 
 
	  // Erreur
	  case 'E':
 
		$("#dialog").html('<p style="text-align:justify;"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>' + Message + '</p>').dialog({title: 'Erreur', dialogClass: 'ui-state-error ui-corner-all', 
				modal: true, 
				autoOpen : false, 
				draggable: false, 
				closeOnEscape: true,
				resizable : false,
				open: function() {
					$( ".ui-dialog" ).css("visibility", "visible");
					$( ".ui-widget-header" ).css("background", "url('/welitecss/images/ui-bg_diagonals-thick_18_b81900_40x40.png') repeat-x scroll 50% 50%");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
				}   
		});		
		$("#dialog").dialog('open');
	    break; 
 
	  // Succes
	  case 'S':
	  //Dialog Succes
          break; 
    }
 
}

Il n'y a que pour le cas d'un Dialog de type Erreur mais après c'est exactement la même chose pour les autres juste le style à changer

Donc voilà je clos le sujet car le problème est résolu. Après si certains ont des proposition d'améliorations pour rendre la fonction plus simple ou le code plus lisible je suis preneur

[Nico1131]

Me revoilà

Finalement il me reste un autre soucis.
J'ai besoin de faire un :

Code javascript :

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

 $( "#dialog" ).dialog( "close" );

donc remettre ce que j'avais enlevé au début et qui me causais des soucis...

Car quand j'affiche un Dialog dans une page par exemple de type Erreur, puis ensuite un autre de type Succès, le problème est que soit le type Succès reprend le style du type Erreur, soit c'est le type Erreur qui s'affiche alors qu'il ne devrait pas

Du coup je suis aller voir dans les méthodes fournis pour les Dialog et j'ai essayais de faire un close et même un destroy lorsque que ferme le Dialog.
Exemple pour le cas Erreur:

Code javascript :

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
// Erreur
	  case 'E':
		$("#dialog").html('<p style="text-align:justify;"><span style="float: left; margin-right: .3em;"><img src="/welitecss/images/messErreur.png"></span>' + Message + '</p>').dialog({
				title: 'Erreur', 
				dialogClass: 'ui-state-error ui-corner-all', 
				modal: true, 
				autoOpen : false, 
				draggable: false, 
				closeOnEscape: true,
				resizable : false,
				open: function() {
					$( ".ui-dialog" ).css("visibility", "visible");
					$( ".ui-state-error .ui-corner-all" ).css("color", "white");
					$( ".ui-widget-header" ).css("background", "url('/welitecss/images/ui-bg_diagonals-thick_18_b81900_40x40.png') repeat-x scroll 50% 50%");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
					$( "#dialog" ).dialog( "close" );
				}   
		});		
		$("#dialog").dialog('open');
	    break;

Mais en faisant ça, j'ai le message d'erreur du tout début qui s'affiche à nouveau :
" cannot call methods on dialog prior to initialization; attempted to call method 'close' "

Donc en gros je suis un peut paumé la

[SpaceFrog]

Pense à la chrnologie ...

initialise le dialog avant de vouloir le modifier

[Nico1131]

Je comprend pas trop ce que tu veux dire, mes Dialog sont initialisés. Dans chaque cas je le fais en ajoutant les paramètres qu'il faut puis ensuite je l'ouvre.

Après j'interprète peut être mal la chose je sais pas

[SpaceFrog]

mes Dialog sont initialisés

cannot call methods on dialog prior to initialization;

Si tu le dis ...

[Nico1131]

Bah je comprend pas alors ce que vous dites par "initialiser" alors...

Pour moi c'est ce que j'ai fais en faisant :

Code javascript :

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

$("#dialog").dialog({ [PARAMETRES] });

Puis ensuite je l'ouvre :

Code javascript :

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

$("#dialog").dialog('open');

J'ai suivis le principe qu'il y a sur http://jqueryui.com/dialog/ et sur des forums.

[SpaceFrog]

Puis ensuite je l'ouvre :

c'est le "ensuite" qui semble poser souci ...

[Nico1131]

Si c'est le :

Code javascript :

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

$("#dialog").dialog('open');

qui pose problème, comment faire pour l'ouvrir alors ?

Que je le fasse comme ci-dessus ou comme ça :

Code javascript :

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

$("#dialog").dialog({ [PARAMETRES] }).dialog('open');

Ou même à l’extérieur du switch ça ne change rien

[Nico1131]

Ok je pense avoir trouvé

En gros il suffit de mettre chaque Dialog dans différentes variables afin qu'il puisse les différentier si j'ai bien compris.
Du coup sa donne ça (pour Dialog de type Erreur) :

Code javascript :

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
// Erreur
	  case 'E':
	  var erreur = $("#dialog").html('<p style="text-align:justify;"><span style="float: left; margin-right: .3em;"><img src="/welitecss/images/messErreur.png"></span>' + Message + '</p>').dialog({
				title: 'Erreur', 
				dialogClass: 'ui-state-error ui-corner-all', 
				modal: true, 
				autoOpen : false, 
				draggable: false, 
				closeOnEscape: true,
				resizable : false,
				open: function() {
					$( ".ui-dialog" ).css("visibility", "visible");
					$( ".ui-state-error .ui-corner-all" ).css("color", "white");
					$( ".ui-widget-header" ).css("background", "#D44944");
					$( ".ui-dialog" ).position({
						my: "center",
						at: "center",
						of: "body"
					});
				},
				close: function() {
					$( ".ui-dialog" ).css("visibility", "hidden");
					erreur.dialog( "close" );
				}   
		});	
		erreur.dialog('open');
	    break;

C'est vrai quant on y pense sa semble plus logique