dialog impossible à ré-ouvrir sous IE

Version imprimable

Bonjour,

Lorsque j'ouvre une "Modal dialog" sous internet explorer pour la première fois, ça fonctionne très bien.
Mais si je ferme le dialog et que je tente de le réouvrir la page devient grise (normal puisque c'est une "modal"), mais le dialog n'apparait pas. Bon au moins je peux toujours revenir à la page normal avec "Escap".

Ce qui est étonnant c'est que sur "Google Chrome" et "Mozilla firefox" ça fonctionne très bien, je peux ouvrir et ré-ouvrir ma fenêtre comme je veux.

J'utilise "jquery-1.4.2.min.js" et "jquery-ui-1.8.1.custom.min.js"
Voici le code javascript en question:

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
<script language="javascript">
		<!--
		$(function()
		{
			// initialise l'image de chargement et le texte qui va avec
		});
 
		images=new Array; // variable globale qui retien les images déjà vues, afin d'éviter de les recharger
		function showImage(url)
		{
			// prépare le dialog
			$('#dialog_img').dialog({
				height: ($(window).height()-20),
				width: ($(window).width()/2),
				closeText: 'hide',
				draggable: false,
				resizable: false,
				title: '<?php echo $languages_dialog_img['loading_title']; ?>',
				show: 'clip',
				hide: 'highlight',
				modal: true,
				beforeClose: function()
				{
					// si on ferme le dialog, on remet tout comme avant (car entre deux je changerai des valeurs)
					document.getElementById("dialog_img_img").src="design/<?php echo $_SESSION['style'];?>/images/loading_img.gif";
					document.getElementById("dialog_img_img").style.display="inline";
					document.getElementById("dialog_img_message").style.display="block";
					document.getElementById("dialog_img_message").innerHTML="<?php echo $languages_dialog_img['loading']; ?>";
					$('#dialog_img').dialog("option", "title", '<?php echo $languages_dialog_img['loading_title']; ?>');
				}
			});
 
			// on a déjà vu cette image
			if(inArray(images, url))
			{
				// on met à jour la source de l'image et on efface le message de chargement
				document.getElementById("dialog_img_img").src=url;
				document.getElementById("dialog_img_message").style.display="none";
				$('#dialog_img').dialog("option", "title", '<?php echo $languages_dialog_img['title']; ?>');
			}
			// on n'a jamais ouvert cette image
			else
			{
				// on crée une nouvelle variable image (ce n'est pas le tableau plus haut, ici "image" est au singulier)
				var image=new Image;
				image.onload=function() // Lorsque l'image est chargée
				{
					// on met à jour la source de l'image et on efface le message de chargement
					document.getElementById("dialog_img_img").src=image.src;
					document.getElementById("dialog_img_message").style.display="none";
					$('#dialog_img').dialog("option", "title", '<?php echo $languages_dialog_img['title']; ?>');
					// on rajoute cette image au tableau des images déjà vues
					images.push(image);
				}
				// s'il y a une erreur avec l'image
				image.onerror=function()
				{
					//on rend l'image invisible (pour éviter le "lien cassé") et on met à jour le texte et le titre
					document.getElementById("dialog_img_img").style.display="none";
					document.getElementById("dialog_img_message").style.display="block";
					document.getElementById("dialog_img_message").innerHTML="<?php echo $languages_dialog_img['error']; ?>";
					$('#dialog_img').dialog("option", "title", '<?php echo $languages_dialog_img['error_title']; ?>');
				}
				// on commence à charger l'image
				image.src=url;
			}
		}
 
		// return "true" l'élément "string" se trouve dans le tableau, sinon "false"
		function inArray(table, string)
		{
			for(i=0; i<table.length; i++)
			{
				if(table[i].src==string)
				{
					return true;
				}
			}
			return false;
		}
		-->
</script>

Merci d'avance à celles et ceux qui me répondront :ccool:

09/05/2010, 22h48
danielhagnoul

Bonsoir.

Voir l'option autoOpen :false (http://jqueryui.com/demos/dialog/#option-autoOpen) et

Code:

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

pour ouvrir le dialogue.

Salut,

c'est gentil, mais je connaissais déjà.

J'avais fait un test en utilisant "open":

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
  <head>
 
  	<link rel="stylesheet" type="text/css" href="jqueryUI/css/smoothness/jquery-ui-1.8.1.custom.css" />
  	<script language="javascript" type="text/javascript" src="jqueryUI/js/jquery-1.4.2.min.js" ></script>
  	<script language="javascript" type="text/javascript" src="jqueryUI/js/jquery-ui-1.8.1.custom.min.js" ></script>
 
  	<script language="javascript" type="text/javascript">
  		$(function()
  		{
  			// initialise l'image de chargement et le texte qui va avec
  			document.getElementById("dialog-modal-img").src="http://www.sur-la-toile.com/icones/patience.gif";
  			document.getElementById("dialog-modal-message").innerHTML="Chargement de l'image<br />veuillez patienter<br />";
 
  			// prépare le dialog
  			$('#dialog-modal').dialog({
  				height: 400,
  				width: 400,
  				closeText: 'hide',
  				draggable: false,
  				resizable: false,
  				title: 'Chargement de l\'image',
  				autoOpen: false,
  				show: 'clip',
  				hide: 'highlight',
  				modal: true,
  				beforeClose: function()
  				{
  					// si on ferme le dialog, on remet tout comme avant (car entre deux je changerai des valeurs)
  					document.getElementById("dialog-modal-img").src="http://www.sur-la-toile.com/icones/patience.gif";
  					document.getElementById("dialog-modal-img").style.display="inline";
  					document.getElementById("dialog-modal-message").innerHTML="Chargement de l'image<br />veuillez patienter<br />";
 
  					$('#dialog-modal').dialog("option", "width", 400);
  					$('#dialog-modal').dialog("option", "height", 400);
  					$('#dialog-modal').dialog("option", "position", ['center', 'center']);
  					$('#dialog-modal').dialog("option", "title", 'Chargement de l\'image');
  				}
  			});
  		});
 
  		images=new Array; // variable globale qui retien les images déjà vues, afin d'éviter de les recharger
  		function showImage(url, pseudo)
  		{
  			// on a déjà vu cette image
  			if(inArray(images, url))
  			{
  				// on met à jour la source de l'image et on efface le message de chargement
  				document.getElementById("dialog-modal-img").src=url;
  				document.getElementById("dialog-modal-message").innerHTML="";
 
  				// on met la fenêtre modale dans les bonnes proportions, au bon endroit et avec le bon titre
  				$('#dialog-modal').dialog("option", "width", '800');
  				$('#dialog-modal').dialog("option", "height", ($(window).height()-20));
  				$('#dialog-modal').dialog("option", "position", ['top', 'center']);
  				$('#dialog-modal').dialog("option", "title", 'Image de '+pseudo);
 
  				// on ouvre la fenêtre modale
  				$('#dialog-modal').dialog('open');
  			}
  			// on n'a jamais ouvert cette image
  			else
  			{
  				// on ouvre la fenêtre modale par défault qui contient l'image de chargement et le texte de chargement
  				$('#dialog-modal').dialog('open');
 
  				// on crée une nouvelle variable image (ce n'est pas le tableau plus haut, ici "image" est au singulier)
  				var image=new Image;
  				image.onload=function() // Lorsque l'image est chargée
  				{
  					// on met à jour la source de l'image et on efface le message de chargement
  					document.getElementById("dialog-modal-img").src=image.src;
  					document.getElementById("dialog-modal-message").innerHTML="";
 
  					// on met la fenêtre modale dans les bonnes proportions, au bon endroit et avec le bon titre 
  					$('#dialog-modal').dialog("option", "width", '800');
  					$('#dialog-modal').dialog("option", "height", ($(window).height()-20));
  					$('#dialog-modal').dialog("option", "position", ['top', 'center']);
  					$('#dialog-modal').dialog("option", "title", 'Image de '+pseudo);
 
  					// on rajoute cette image au tableau des images déjà vues
  					images.push(image);
  				}
  				// s'il y a une erreur avec l'image
  				image.onerror=function()
  				{
  					//on rend l'image invisible (pour éviter le "lien cassé") et on met à jour le texte et le titre
  					document.getElementById("dialog-modal-img").style.display="none";
  					document.getElementById("dialog-modal-message").innerHTML="Désolé, cette image ne peut pas être affichée car il y a eu une erreur lors de son téléchargement";
  					$('#dialog-modal').dialog("option", "title", 'Erreur');
  				}
  				// on commence à charger l'image
  				image.src=url;
  			}
  		}		
 
  		// return "true" l'élément "string" se trouve dans le tableau, sinon "false"
  		function inArray(table, string)
  		{
  			for(i=0; i<table.length; i++)
  			{
  				if(table[i].src==string)
  				{
  					return true;
  				}
  			}
  			return false;
  		}
  	</script>
 
  </head>
  <body>
  	<!-- modal -->
  	<div id="dialog-modal" style="display: none; background: black; color: white; text-align: center;"><span id="dialog-modal-message"></span><img id="dialog-modal-img" src="" /></div>
 
  	<!-- miniatures -->
  	<img onclick="showImage('http://www.wallpaper-land.com/xorg.php?wp=51567&size=wp1600x1200', 'Avril Lavigne');" class="mini" src="http://www.wallpaper-land.com/xorg.php?wp=51567&size=wp160x120" />
  	<br />
  	<img onclick="showImage('http://www.wallpaper-land.com/xorg.php?wp=17159&size=wp1024x768', 'Sphère de verre');" class="mini" src="http://www.wallpaper-land.com/xorg.php?wp=17159&size=wp160x120" />
  </body>
  </html>

Mais j'ai le même problème, c'est d'ailleurs pour ça que je crée un objet chaque fois, je pensais que ça résoudrait le problème. Mais non.

11/05/2010, 19h31
Michaeljackfan

Salut,

pour celles et ceux que ça pourrait intéresser: IE ne supporte pas la fonction "hide:'highlight'", mais "hide:'clip'", par exemple, fonctionne très bien. Je suppose que l'option "highlight" fait appel à des propriétés javascript que IE ne gère pas.

Donc maintenant je peux ouvrir et ré-ouvrir mes "modal dialog" sous tous les navigateurs et j'initialise une seule fois un objet, puis je me sert de la méthode "open" et "autoOpen: false" pour l'ouvrir (puisque finalement ce n'était pas ça le problème).
14/05/2010, 21h00
danielhagnoul

Bonsoir.

Sous IE8, la démo fonctionne : http://jqueryui.com/demos/effect/#option-effect
15/05/2010, 14h02
Michaeljackfan

Oui, je sais.

Mais pourtant quand j'essaie mon code, ça fonctionne la première fois, mais la seconde rien ne se passe.
Ce phénomène n'apparait pas lorsque je met "hide:clip" à la place de "hide:highlight".

les valeurs d'initialisation ne sont pas les mêmes et entre deux affichages je change les propriétés du dialog. Je ne sais pas ce qui influence le résultat, je constate juste que "hide:highlight" crée un bug sous IE lorsque je veux ré-ouvrir mon dialog.

Salut,

comme je l'ai dit, j'a résolu le problème de la fenêtre qui ne se ré-ouvrait pas en changeant "highlight" par "clip".

Mais un nouveau problème se présente sous IE 7, toujours avec les dialog:
Lorsque j'ouvre les dialogs, ils sont limités en hauteur. Bien que je demande une hauteur de 400, il refuse de me l'ouvrir avec cette taille. Et c'est toujours exclusif à IE.

Le 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
$(document).ready(function(){
			// initialize the dialog object
			$('#dialog_img').dialog({
				height: 400,
				width: 320,
				closeText: 'hide',
				resizable: false,
				title: "<?php echo $languages_research['dialog_img_load_title']; ?>",
				show: 'clip',
				hide: 'clip',
				modal: true,
				autoOpen: false
			});
 
			// initialize the dialog object
			$('#dialog_profile').dialog({
				height: ($(window).height()-20),
				width: ($(window).width()-50),
				closeText: 'hide',
				resizable: false,
				title: "<?php echo $languages_research['dialog_profile_load_title']; ?>",
				show: 'clip',
				hide: 'clip',
				modal: true,
				autoOpen: false
			});
		});
 
		images=new Array; // variable globale qui retien les images déjà vues, afin d'éviter de les recharger
		function showImage(url, pseudo, id, size)
		{
 
			// initialise the size of the image
			if(size=="small")
			{
				$('#dialog_img').dialog("option", "width", 400);
				$('#dialog_img').dialog("option", "height", 400);
			}
			else
			{
				$('#dialog_img').dialog("option", "width", ($(window).width()-50));
				$('#dialog_img').dialog("option", "height", ($(window).height()-20));
			}
 
			// We've already seen this image
			if(inArray(images, url))
			{
				// we update the image source, hide the message and set a new title
				document.getElementById("dialog_img_img").src=url;
				document.getElementById("dialog_img_message").style.display="none";
				document.getElementById("dialog_img_pseudo").style.display="block";
				document.getElementById("dialog_img_pseudo").innerHTML=pseudo;
				// if this is the small image, we propose to watch the profile. Otherwise, no
				if(size=="small")
				{
					document.getElementById("dialog_img_pseudo").href="javascript:showProfile('"+id+"')";
				}
				else
				{
					document.getElementById("dialog_img_pseudo").style.display="none";
				}
				$('#dialog_img').dialog("option", "title", '<?php echo $languages_research['dialog_img_title']; ?>');
				$('#dialog_img').dialog('open');
			}
			// we never opened this image
			else
			{
				// if the image must be loaded, we put everything to say "loading"
				document.getElementById("dialog_img_img").src="design/<?php echo $_SESSION['style'];?>/images/loading_img.gif";
				document.getElementById("dialog_img_img").style.display="inline";
				document.getElementById("dialog_img_message").style.display="block";
				document.getElementById("dialog_img_message").innerHTML="<?php echo $languages_research['dialog_img_load']; ?>";
				$('#dialog_img').dialog("option", "title", '<?php echo $languages_research['dialog_img_load_title']; ?>');
				$('#dialog_img').dialog('open');
 
				// We use a new "Image" variable
				var image=new Image;
				image.onload=function() // when the image is loaded
				{
					// update the image source, hide the message and set a new title
					document.getElementById("dialog_img_img").src=image.src;
					document.getElementById("dialog_img_message").style.display="none";
					document.getElementById("dialog_img_pseudo").style.display="block";
					document.getElementById("dialog_img_pseudo").innerHTML='<?php echo $languages_research['big_image_see_profile_title']; ?>'+'<span class="pseudo">'+pseudo+'</span>';
 
					// if this is the small image, we propose to watch the profile. Otherwise, no
					if(size=="small")
					{
						document.getElementById("dialog_img_pseudo").href="javascript:showProfile('"+id+"')";
					}
					else
					{
						document.getElementById("dialog_img_pseudo").style.display="none";
					}
					$('#dialog_img').dialog("option", "title", '<?php echo $languages_research['dialog_img_title']; ?>');
					// on rajoute cette image au tableau des images déjà vues
					images.push(image);
				}
				// If there's an error
				image.onerror=function()
				{
					// we hide the image, show an error message and change the title
					document.getElementById("dialog_img_img").style.display="none";
					document.getElementById("dialog_img_message").style.display="block";
					document.getElementById("dialog_img_message").innerHTML="<?php echo $languages_research['dialog_img_error']; ?>";
					$('#dialog_img').dialog("option", "title", '<?php echo $languages_research['dialog_img_error_title']; ?>');
				}
				// we load the image
				image.src=url;
			}
		}
 
		// return "true" if the "string" element is in the table, otherwise: "false"
		function inArray(table, string)
		{
			for(i=0; i<table.length; i++)
			{
				if(table[i].src==string)
				{
					return true;
				}
			}
			return false;
		}

Et la même chose arrive lorsque je veux ouvrir le dialog pour le profile. la déclaration du dialog pour lui est aussi contenu plus haut, voici la fonction qui l'ouvre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// show profile
		function showProfile(id)
		{			
			$.ajax({
				type: "POST",
				url: 'pop_up/watch_profile.php',
				data: "id="+id,
				dataType: "html",
				success: function(data){
					$('#dialog_profile').html(data);
					$('#dialog_profile').dialog('open');
				}
			});
 
			if($('#dialog_img').dialog('isOpen'))
			{
				$('#dialog_img').dialog('close');
			}
		}