"Dialog" et impression PDF

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Alors voici mon petit souci : j'ai crée un dialog pour pouvoir faire une impression pdf avec pdfCreator du résultat de ma fenêtre. Le bouton "Continuer" permet de faire un printAera. Le problème est que lorsque j'ai ajouté le fichier css jquery-ui.css ma boîte dialog est devenue toute belle sauf qu'elle c'est incrusté dans mon impression et le problème et que je n'arrive pas en gros à la cacher :?

Bien sur j'ai testé avec les options et events : beforeClose et hide, mais ça ne change rien.

Voici les résultats d'avant et après avoir ajouté le css :

Avant le css : Pièce jointe 139813
Après le css : Pièce jointe 139814

Et voici 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 $j("#btntest").click(function(){$j("#myDiv2").dialog('open')}); $j( "#myDiv2" ).dialog({ height: 140, title: "Confirmation", modal: true, autoOpen : false, draggable: true, closeOnEscape: true, buttons: [{ text: "Continuer", click: function() { $j("#myDiv").printArea( {} ); // Cancel code here $j(this).dialog("close"); } }, { text: "Annuler", click: function() { // Save code here $j(this).dialog("close"); } }] });

J'ai avec moi une solution mais je ne peux pas tester car il me manque de chose, mais bon s'il y a le moindre soucis reviens ici.
Alors on pourrait écrire le code de fermeture avant l'impression, et enregistrer un événement close une fois fermé, faire un dans css un dysplay none ou enlever carrément le dialog du DOM avec un remove ou un detach si tu veux le réutiliser, ou . A moins que tu as besoin de ton dialogue en plein traitement de l'impression.

Mais on crains que ça ne laisse pas l’action d'impression finir son corps car tu attache tout au dialogue. Donc on va fermer après, mais on va jouer sur l'état asynchrone de JavaScript alors on va créer une fonction à part et faire juste l'appel donc le dialogue ne sera pas responsable de l’échec de l'impression si on le démlit.

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
 
 
function imprimer(){
 
        $("#myDiv").printArea( { } );
 
}
$("#btntest").click(function(){$("#myDiv2").dialog('open');});
 
$( "#myDiv2" ).dialog({
          height: 140,
          title: "Confirmation",
          modal: true,
          autoOpen : false,
          draggable: true,
          closeOnEscape: true,
 
          close: function(event, ui){ 
                    //On le garde quelque part
                    madialog=$(this).detach() ; },
 
          buttons:             [                {
                    text: "Continuer", 
                   click: function() {
 
         //IL FAUX TESTER LES DEUX OU JOUER SUR LES CSS
          imprimer(); 
          $(this).dialog("close");
 
         /*L'idéal serait ceci alors teste le, normalement ça doit bien marcher
          $(this).dialog("close");
           imprimer();*/ 
 
}                }, 
 
{  text: "Annuler",
    click: function() {          
 
   // Save code here 
                       $(this).dialog("close"); 
   }                }            ] 
 
});

06/03/2014, 16h43
SpaceFrog

un media print en css ne suffirait il pas ???
06/03/2014, 16h55
Nico1131

1 pièce(s) jointe(s)

Tout d'abord merci de m'avoir répondu ;)

@la.lune :

J'ai essayé tes 2 manip mais malheureusement sa ne marche pas :?

La première manip ne change rien sa fait toujours le même résultat et la deuxième me fait ça :
Pièce jointe 139829

Du coup mon tableau n'est plus chargé :?

@SpaceFrog :

J'avais essayé ça au tout début de créer une autre page css pour le media print, mais en faisant ça mon tableau n'avait plus du tout de couleur n'y rien. Mais ce n'est pas mon but car moi je souhaite faire une impression pdf selon une partie de la page spécifique qui est mon tableau et non de toute la page.
06/03/2014, 17h09
SpaceFrog

en quoi media print t'oblige-t-il à créer une autre page .. :koi:

colle juste un display non à l'élement qui te gène dans le media print ...
06/03/2014, 17h16
Nico1131

Bah je connaissais pas, du coup je suis allé voir quelques tuto et la plupart disait de faire une page css en plus pour la différencier de celle de base. Mais de toute façon ce n'est pas ce que je recherche car cela concerne toute la page, alors que moi c'est juste un morceau de la page qui m'intéresse. :)
06/03/2014, 17h18
SpaceFrog

ça ne concerne que ce que tu lui demande de concerner ...
06/03/2014, 17h22
Nico1131

Ok ^^
Je suis un peut long à la détente excuse moi :p

Oui certes, mais sa ne marchera pas. Car le tableau est créer dynamiquement avec les couleurs aussi. Donc rien est mis dans un fichier css, tout est alloué dans les balises selon des variables.
Ce n'est pas moi qui est structuré comme ça mais le boulot ^^'
06/03/2014, 17h24
SpaceFrog

??? dynamiquement ou pas ça ne change rien
tu mets juste un display non en media print sur l'élement génant
06/03/2014, 17h29
Nico1131

Ah tu parle de la boîte dialog pour le media print x)
Je pensais que tu parlait du tableau.
(Fin de journée cerveau HS :mouarf: )

En gros je fais un truc comme ça pour le dialog ? :

Code:

<div id=myDiv2 media='print' style='display:none;'></div>
06/03/2014, 17h56
la.lune
Ah ok désolé comme j'ai dis j'aime tester avant de dire, mais je ne peux pas tester :( Déjà, on t'a dit de faire display none mais pas définir ça depuis le début, un truc comme ça, et j'avais même soulginer ça a début tu peux tester ceci pour le 2e cas :
Code:

1 2 3 4 $(this).dialog("close").css("display", "none"); imprimer();
06/03/2014, 18h00
Nico1131

Merci, mais ça ne change rien, le résultat est le même que sur le screen que j'ai laissé. Mon tableau n'est pas chargé :?
07/03/2014, 08h12
la.lune

Il y a un problème déjà dans ton code, car j'ai téléchargé le plugin printarea et j'ai testé je ne trouve pas l'erreur que tu as. Tu as un bug quelque part.
Enlève déjà le 'j' partout où tu as écris "$j(" , Qui t'a dis qu'après le symbole $ on met un 'j', c'est le '$(' que tu dois avoir. C'est ça le bug qui bloque tes scripts.

Au début j'ai testé avec un code à part entière ça marche et après quand j'ai copié ton code, j'ai eu le bug dans la console.

Déjà tu dois t'habituer à corriger les bug dans la console ou avec ton IDE, moi j'utilise Netbeans qui synchronise avec chrome utilisant une extension, donc la page sur chrome et débogage javascript avec netebans.

Tu nous a fais perdre tout ce temps pour un bug banal dans ton code.
07/03/2014, 08h34
SpaceFrog

heu :koi:

Code:

<div id=myDiv2 media='print' style='display:none;'></div>

c'est quoi ce code ????

Tu aurais pu au moins faire un minimum de recherche sur @media en css ...

http://christophe-f.developpez.com/t...ule-media.html

ou un exemple pratique http://sk-martin.developpez.com/Certif.htm
07/03/2014, 08h45
la.lune

Lui il a des bug dans son code, aucune raison à ce que ça ne marche pas, j'ai testé moi même, j'ai même pas besoin de faire un remove ou un detach ou un display none, et j'ai fais exprès d'ajouter même le div du dialogue à l'intérieur du div à imprimer mais il sera caché bien sûr au debut, et pourtant le pdf généré ne donne pas le dialogue et le dialogue se ferme correctement.
Mais dès que j'ai copié son code :bug:
07/03/2014, 09h25
Nico1131

1 pièce(s) jointe(s)
@la.lune

Le '$j' n'est pas du tout un bug !
C'est comme ça car je fait un jQuery.noConflict().
Car le projet sous lequel je travail utilise "Prototype" du coup j'utilise cette méthode pour éviter tout confit entre les 2 :
Code:

1 2 //Pour éviter les conflis avec Prototype var $j = jQuery.noConflict();
Et puis je n'ai pas de 'mode console' car je travail sous "Progress" le langage le plus perdu que je connaisse ^^ et sous IE8.
Tout ce que j'ai c'est un éditeur du genre blocnote mais avec des couleurs, sachant que notepad++ est la base.
Voici un screen d'exemple :
Pièce jointe 139879

Enfin bref, le '$j' ne pose pas de problème. Après qu'il y est des erreurs ailleurs que dans le code JS peut être je sais pas, je suis qu'un étudiant en alternance qui est tombé sur ce projet en cours et qui essaye de trouver une solution aux problèmes que je rencontre sur ce code.

@Spacefrog

J'ai effectué des recherches dessus sauf que je m'y suis pas attardé dessus, car le but était au départ de générer directement un pdf le résultat affiché sans passer par la case 'impression' et pdfCreator.
07/03/2014, 10h33
Nico1131

1 pièce(s) jointe(s)

Le truc c'est que tout marche niquel si je n'ajoute pas le fichier css jquery-ui.css, la boîte de dialog ne ressemble vraiment plus à rien mais bon :
Pièce jointe 139890

Il doit y avoir quelque chose dans ce css qui bloque la boîte. Après vous me direz pourquoi ne pas faire mon propre css ^^'

Voilà je pense avoir résolu mon problème :D

J'ai viré le css de base fournis par jQuery et je me le suis fait mois même.

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
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 10px;
}
 
.ui-widget-content {
    background: #F9F9F9;
    border: 5px solid #dfe7f3;
    color: #222222;
}
 
.ui-dialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    /* position: absolute; */
    top: 0;
}
 
.ui-dialog-titlebar-close {
  visibility: hidden;
}
 
.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 0 !important;
}
 
.ui-widget-header {
    background: #6ca8cc;
    border: 0;
    color: #fff;
    font-weight: normal;
}
 
.ui-dialog .ui-dialog-titlebar {
    padding: 5px 10px;
    position: relative;
        font-size: 10px;
}

Bon ce n'est qu'une base j'ai encore des chose à rajouter mais au moins j'ai plus le problème de la boîte de dialog qui reste fixer lors de l'impression.

Merci encore pour votre aide ;)

08/03/2014, 13h10
SpaceFrog

...
ou pourquoi faire simple avec @media print quand on peut se compliquer l'existence autrement ...:aie:
10/03/2014, 09h39
Nico1131

Bah le truc c'est que boulet que je suis en faisant le media print j'avais mis le nom de ma div et tout ce que sa cachait été le texte mis dedans ^^
C'est que pendant le weekend que j'ai tilté que c'était avec les sélecteurs du dialog qu'il fallait le faire :mouarf:

Donc oui avec media print sa marche ;)
Mais j'ai quand même fait un autre css car je trouvais que celui fournis de base a beaucoup trop de chose inutile pour ma dialog.

Donc voilà tout est bien qui fini bien :p

Sujet résolu :)