Printing the result from a form?

fr

fribse 28 Apr, 2016

Hi Guys

I'm trying to use the tutorial on how to print a form, by including some code and a button.
My form gives me a result page that I output via PHP in a customcode module.

The top of the custom code looks like this:

<?php

$doc = JFactory::getDocument();
$script = "
jQuery(document).ready(function(jQ){
  function printPage()
  {
    var html, css, csss_file, printWin;
    css = \"\";
    css = \"<style type='text/css'>\"+css+\"</style>\";
    css_url = '';
    if ( css_url !== '' ) {
        css_url = \"<link rel='stylesheet' type='text/css' href='\"+css_url+\"' media='print' />\";
    }
    html = '<html><head>'+css+css_url+'</head>'+jQ(id).html()+'</html>';

    printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
  }
  var id;
  id = '#print_div';
  jQ('#print_button').css('visibility', 'visible');
  jQ('#print_button').click(printPage);
});
";
$doc->addScriptDeclaration($script);

echo '<div id="print_div" ><table><tr><td colspan="9"><h2>Turberegning</h2></td><td align="right">
<input type="image" src="/media/system/images/printButton.png" id="print_button" />
</td></tr>
...

This shows the button, but it doesn't react.
As you can see this is copied directly from the tutorial.
I was wondering if I should just 'echo' the $script into the page (with <script> tags around it) instead of the doc->addScriptDeclaration?
I tried doing this, but I didn't see any change...

fr

fribse 28 Apr, 2016

I tried this as well:

<?php

$script = "
jQuery(document).ready(function(jQ){
  function printPage()
  {
    var html, css, csss_file, printWin;
    css = \"\";
    css = \"<style type='text/css'>\"+css+\"</style>\";
    css_url = '';
    if ( css_url !== '' ) {
        css_url = \"<link rel='stylesheet' type='text/css' href='\"+css_url+\"' media='print' />\";
    }
    html = '<html><head>'+css+css_url+'</head>'+jQ(id).html()+'</html>';

    printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
  }
  var id;
  id = '#print_div';
  jQ('#print_button').css('visibility', 'visible');
  jQ('#print_button').click(printPage);
});
";

echo '<div id="print_div" ><script>'.$script.'</script><table><tr><td colspan="9"><h2>Turberegning</h2></td><td align="right"><input type="image" src="/media/system/images/printButton.png" id="print_button" /></td></tr>

That didn't work, the script is in the page source though.

Gr

GreyHead 28 Apr, 2016

Hi fribse,

With CFv5 please change the code to use $jdoc instead of $doc - Max has used $doc for something different and the two conflict.

Bob

PS I've just updated the FAQ to use $jdoc

fr

fribse 28 Apr, 2016

Hi GreyHead
Not really sure how I should do this the 'right' way.
In my 'On Submit' I just have a customcode with a ton of 'echo' commands that build up the html to display the results of the form.
I don't think that is 'correct' when using this code?
Should I instead add it all to a variable, and then use a 'Display message' with the variable in it, I mean for it to work with the print button, or what is the correct way?

Gr

GreyHead 29 Apr, 2016

Hi fribse,

It should still work provided that you have a <div> in the page to identify the part to be printed.

Bob

fr

fribse 29 Apr, 2016

Hmm, not sure what is wrong. Could you take a look at the form, and maybe deduct what I've done wrong?
It's in the custom code field 'beregning' that I create the output.

Gr

GreyHead 29 Apr, 2016

Hi fribse,

I don't know how to submit the form successfully :-(

You have errors in your Event Switcher code

return fail ;
} else {
  return success ;

should be

  return 'fail' ;
} else {
  return 'success';

with extra quotes.

Bob

Gr

GreyHead 29 Apr, 2016

Hi fribse,

I finally got it to submit using trial and error. Then the Print Button works OK

Bob

fr

fribse 29 Apr, 2016

Sorry, it's in danish, I should've given a few hints.
I've changed the event switch code, but I still don't see ANY reaction on the print button, I've also started the Chrome debugger to see what happens, but the only error I see is a fontawesome error (404).
That's very strange.
It's the same at work and at home, on chrome and firefox.

fr

fribse 04 May, 2016

When I look in Chrome debugger I see this message

tur-beregning?chronoform=TripCalculator&event=submit:65 Uncaught SyntaxError: Unexpected token ILLEGAL

jQuery(document).ready(function(jQ){
  function printPage()
  {
    var html, css, csss_file, printWin;
    css = "";
    css = "<style type='text/css'>"+css+"</style>";
    css_url = '';
    if ( css_url !== '' ) {
        css_url = "<link rel='stylesheet' type='text/css' href='"+css_url+"' media='print' />";
    }
    html = '<html><head>'+css+css_url+'
<style type="text/css">
                    div#cookieMessageContainer{display:none}
                </style>
</head>'+jQ(id).html()+'</html>';

    printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
  }

The error refers to this line: html = '<html><head>'+css+css_url+'

So for some reason, this code fails, or what?:
html = '<html><head>'+css+css_url+'</head>'+jQ(id).html()+'</html>';

fr

fribse 04 May, 2016

Hi
I've just tested with admintools turned of, that didn't work either.

This is private content

Gr

GreyHead 04 May, 2016

Hi fribse,

After five minutes trying to complete the form I get this message:
[list]Adgang nægtet
Din indtastning er blevet blokeret fra siden, da den indeholder ulovlige kommandoer.
Gentagelser af dette vil betyde at du vil blive blokeret helt fra siden.
Er du blevet blokereret helt kan du kontakte webmaster@dkdb.dk for at bede om at få låst op igen.[/list]

You seem to have added some extra CSS to the code - that is probably the problem - you can define your own css in the earlier line css = "";

Bob

fr

fribse 04 May, 2016

I had in a Load CSS module, I've tried moving it to an inline now, I didn't see a change.

This is private content

Gr

GreyHead 04 May, 2016

Answer

1 Likes

Hi fribse,

There's a line here

css = \"\";

where you can add Custom CSS to be used on the print page. Like this

css = \"div#cookieMessageContainer{display:none;}\";

Bob

fr

fribse 04 May, 2016

Ahaaaa, now I understand the code, so I simplified it to:

$jdoc = JFactory::getDocument();
$script = "
jQuery(document).ready(function(jQ){
  function printPage()
  {
    var html, css, csss_file, printWin;
    html = '<html>'+jQ(id).html()+'</html>';

    printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
    printWin.document.write(html);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
  }

And now it works, weeheee!!!
That was a tough one to get the head around🙂
Thankyou for saving me yet again!