Discussion :

[Nico1131]

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 :
• Après le css :

Et voici le code :

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

[la.lune]

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

[SpaceFrog]

un media print en css ne suffirait il pas ???

[Nico1131]

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 :


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.

[SpaceFrog]

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

colle juste un display non à l'élement qui te gène dans le media print ...

[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.

[SpaceFrog]

ça ne concerne que ce que tu lui demande de concerner ...

[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 ^^'

[SpaceFrog]

??? dynamiquement ou pas ça ne change rien
tu mets juste un display non en media print sur l'élement génant

[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 )

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

Code :

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

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

[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 JavaScript :

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

1
2
3
4
 
$(this).dialog("close").css("display", "none");
 
imprimer();

[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é

[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.

[SpaceFrog]

heu

Code :

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

<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

[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

[Nico1131]

@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 :

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

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 :


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.

[Nico1131]

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 :


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 ^^'

[Nico1131]

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

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

Code css :

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
.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

[SpaceFrog]

...
ou pourquoi faire simple avec @media print quand on peut se compliquer l'existence autrement ...

[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

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