Discussion :

[nicolas2603]

Bonjour, je souhaite utiliser les possibilités de jquery pour ouvrir des fichiers pdf dans des "fausses" popup plutôt que des popup windows qui ouvrent une nouvelle fenêtre.

Je pensais passer par une fenêtre "dialog", mais je ne trouve pas d'exemples qui pourraient m'aider.

Y a-t-il une meilleure possibilité ? Merci d'avance.

[Gruik]

Hello,

Une proposition

Code html :

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

<div id="dialogContainer"><iframe src="url_du_pdf"></iframe></div>

Code :

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

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

[nicolas2603]

Salut ! Ce code ouvre bien une popup dans laquelle se charge le pdf, mais cette popup s'ouvre dès l'arrivée sur la page, alors qu'il faudrait qu'elle ne s'ouvre qu'en cliquant sur le lien

Code :

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

<a href="bulletin/bul_<?php echo $varNtotal['numero']; ?>.pdf">Ouvrir</a>

[Gruik]

Bein ça c'est un probleme de js quelconque, tu dois positionner sur le lien un gestionnaire d'evenement pour l'évenement click

Ya plusieurs methodes pour ça
En jQuery ce serait

Code :

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

1
2
3
4
5
6
$('selecteur pour le lien').click(
  function () {
     $('#dialogContainer').dialog();
     return false;
  }
);

[nicolas2603]

Alors voici mon avancement (je sais, ça n'avance pas vite me direz-vous ...).
J'arrive à ouvrir mes popups dont le contenu est un fichier, comme ceci :

Code :

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

<a href="exemple_popup.php" class="popup">

et le script qui m'ouvre ma fenêtre

Code :

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

1
2
3
4
$('.popup').click(function() {
   	$('<div/>').load(this.href).dialog({ position: ['center',200], width: 500 });
   	return false;
});

Sauf que lorsqu'il s'agit d'un PDF, ça ne fonctionne pas (il l'ouvre mais ne l'interprète pas), j'ai essayé avec '<div/><iframe/>' mais sans succès !

[Bovino]

load est une fonction Ajax, tu ne peux pas récupérer un PDF avec Ajax

Code :

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

$('<iframe/>').attr('src', 'url_du_pdf')

Devrait être une meilleure piste.

[nicolas2603]

Bonjour Bovino, effectivement après coup cela me semble logique de ne pouvoir ouvrir un pdf en ajax. J'ai eu utilisé un script (highslide pour ceux qui connaissent) et l'appel des popups était différent selon que la source était un php ou un pdf. Donc que cela fonctionne pareil avec jquery est normal.

Par contre, j'ai tourné et retourné ma fonction dans tous les sens et dans tous les cas, mon pdf s'ouvre en "classique". Est-ce que vous avez déjà essayé d'ouvrir un pdf dans un dialog et pouvez me confirmer que c'est possible, ou bien je tourne en rond sans pour autant qu'il y ait une solution ?

Quelques exemples de ce que j'ai essayé, pour comprendre où je bloque :

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
$('.popupPdf').click(function() {
	$('<iframe/>').attr('src', this.href);
});
 
$('.popupPdf').click(function() {
	$('<iframe/>').attr('src', this.href);
        $('<div/>').load('<iframe/>').dialog({ position: ['center',200], width: 500 });
});
 
$('.popupPdf').click(function() {
        $('<div/>').load($('<iframe/>').attr('src', this.href);).dialog({ position: ['center',200], width: 500 });
});
 
$('.popupPdf').click(function() {
        $('<iframe/>').attr('src', this.href).dialog({ position: ['center',200], width: 500 });
});
 
etc...

[danielhagnoul]

Bonsoir.

Code :

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

$('<iframe/>').attr('src', 'url_du_pdf')

Devrait être une meilleure piste.

Je pense qu'il faut ajouter show() :

Code :

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

1
2
 
$('<iframe/>').attr('src', 'url_du_pdf').show();

[Bovino]

Bonsoir.



Je pense qu'il faut ajouter show() :

Code :

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

1
2
 
$('<iframe/>').attr('src', 'url_du_pdf').show();

Effectivement !

[nicolas2603]

Bon ok, là je crois que j'ai du mal !
Même en rajoutant le show(), mon pdf continuait à s'ouvrir en "classique", remplaçant la page de mon site par le contenu du fichier.
A ce moment là, je passais par un code comme ceci :

Code :

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

1
2
3
4
5
$(function() {
	$('.popupPdf').click(function() {
             $('<iframe/>').attr('src', this.href).show();
        });
});

Et l'appel :

Code :

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

<a href="plaquette.pdf" class="popupPdf">Télécharger la plaquette</a>

J'ai fait alors un test de mettre le lien directement dans la fonction

Code :

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

1
2
3
4
5
$(function() {
	$('.popupPdf').click(function() {
             $('<iframe/>').attr('src', 'plaquette.pdf').show();
	});
});

Et l'appeler comme ceci :

Code :

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

<a href="#" class="popupPdf">Télécharger la plaquette</a>

Et là, il ne se passe rien, comme si la fonction n'était pas interprétée !!

[danielhagnoul]

Bonjour.

Un exemple rapide, il faut affiner le CSS de l'iframe :

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
 
<!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;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		#affiche {
			width:600px;
			height:auto;
			margin:12px;
			border:1px solid #999999;
		}
 
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.popupPdf').click(function() {
				$("#affiche").attr('src', $(this).attr("pdfURL")).show();
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div>
			<a href="#" class="popupPdf" pdfURL="plaquette.pdf">Télécharger la plaquette</a>
			<a href="#" class="popupPdf" pdfURL="texte.pdf">Télécharger le texte</a>
		</div>
		<iframe id="affiche"></iframe>
	</div>
</body>
</html>

[nicolas2603]

J'ai testé cet exemple qui fonctionne correctement, cependant je ne souhaite pas avoir mon emplacement <iframe> prédéfini puisque je cherche à ouvrir une popup "dialog" redimensionnable...

[Gruik]

Il ya un evenement dans les dialog pour savoir quand l'utilisateur redimensionne, tu peux alors redimentionner l'iframe quand ça arrive

[nicolas2603]

ça y est, j'en vois le bout !
J'arrive à ouvrir mon pdf dans l'iframe contenu dans une popup dialog, comme ceci :

Code :

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

1
2
<a href="#" pdfURL="plaquette.pdf" class="popupPDF">Télécharger la plaquette</a>
<iframe id="iPDF" width="500"></iframe>

et

Code :

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

1
2
3
4
5
6
$('#iPDF').hide();
$('.popupPDF').click(function () {
	$("#iPDF").attr('src', $(this).attr("pdfURL")).show();
	$('#iPDF').dialog({ position: ['center',100], width: 500, height: 500 });
	return false;
});

Il me reste deux points que je n'arrive pas à régler :
1. c'est la taille du pdf. Je mets ma fenêtre dialog à 500, le met l'iframe à 500 (en css et en brut) et malgré ça, le pdf doit faire environ 70% de la taille de la fenêtre dialog.

2. si je ferme ma fenêtre dialog, lorsque je reclique sur le liens elle ne s'ouvre plus... Y a t-il un moyen de ne pas conserver le contenu pour forcer le rechargement à chaque clic ?

Encore merci
Une idée d'où cela peut venir ?

[danielhagnoul]

Bonsoir nicolas2603.

Voici un exemple d'un iframe (affichant un PDF) inclus dans un dialogue, il y a plusieurs commentaires dans le code que je vous conseille de prendre en considération avant toute modification. Cet exemple fonctionne sous IE8, C2 et F3.

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
100
101
102
 
<!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>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
    </style>
    <!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#dialog').dialog(
                {
                    autoOpen: false,
                    width: 800,
                    height: 600,
                    /* Lorsque inclus dans le dialogue, ne marche pas avec Chrome 2 et IE8 */
                    /*
                    open: function(event, ui) {
                        $("#iPDF").attr({
                            margin: "5%",
                            width: "100%",
                            height: "98%",
                            src: $(this).attr("pdfURL")
                        }).show();
                    },
                    */
                    close: function(event, ui) {
                            // on arrive toujours ici, que l'utilisateur ait cliqué sur OK ou sur la case de fermeture
                            $("#iPDF").hide();
                    },
                    buttons: {
                        "Ok": function(event, ui) {
                            $(this).dialog("close"); 
                        }
                    }
                }
            );
 
            $('.popupPDF').click(function () {
                $("#dialog").dialog('open');
                /* Lorsque inclus dans le dialogue, ne marche pas avec Chrome 2 et IE8 */
                /* Les réglages width et height sont OK pour F3, IE8. */
                /* Et C2 si frameborder="0" */
                $("#iPDF").attr({
                    margin: "5%",
                    width: "100%",
                    height: "98%",
                    src: $(this).attr("pdfURL"),
                    overflow: "hidden"
                }).show();
                return false;
            });        
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <!--
            il y a un délai entre le click et l'affichage du PDF,
            sa durée dépens de la taille de PDF et du navigateur
        -->
        <a href="#" pdfURL="../mail.pdf" class="popupPDF">Télécharger la plaquette</a>
        <div id="dialog" title="La plaquette">
            <!-- frameborder uniquement pour Chrome 2 qui s'amuse à mettre des barres -->
            <iframe id="iPDF" frameborder="0"></iframe>
        </div>
    </div>
</body>
</html>

[nicolas2603]

Bonjour, j'ai passé la matinée sur votre exemple, mais je n'obtiens pas ce que je suis sensé obtenir. A savoir que là, j'ai une fenêtre "dialog" vide qui s'ouvre en premier plan. En fait, le pdf se charge dans une iframe contenue dans une seconde fenêtre "dialog", visible que lorsque je déplace la première vide ouverte.

J'ai donc essayé d'apporter des modifications/corrections à votre code, mais sans succès, je retombe sur mes problèmes cités plus haut !!!

[danielhagnoul]

Bonsoir.

Je vous assure que cela fonctionne parfaitement.


Voici un zip avec tous les éléments nécessaires inclus.


Si l'exemple inclus dans le zip (Sans rien y changer !) ne fonctionne pas chez vous sur IE8, C2 et F3, c'est que vous avez un problème avec votre ordinateur ou un défaut de mise à jour.


La quantité de mémoire allouée pour les zip étant très faible, il s'autodétruira dès que j'aurais besoin de la place.

[nicolas2603]

Merci, j'ai téléchargé le zip et sur mon pc personnel effectivement cela fonctionne parfaitement ! J'essayerai lundi sur celui sur lequel je bosse pour voir d'où vient le problème !

[Thewil]

La quantité de mémoire allouée pour les zip étant très faible, il s'autodétruira dès que j'aurais besoin de la place.

Merci Agent 007

[danielhagnoul]

Bonjour Thewil.

Plutôt « Mission impossible. »