Print button doesn't work

ro

rogeranton 12 Mar, 2013

Hi

I followed the steps in "How can I add a Print button to my form?" FAQ, but the button doesn't work. When I click it, nothing happens. First the button wasn't visible, so I changed the code from hidden to visible. Why is the code set to hidden? I've tried in both Chrome and IE. JavaScript is enabled in the browsers.

In JavaScript-console I get this error: Uncaught SyntaxError: Unexpected token illegal on line 27

Roger

Gr

GreyHead 12 Mar, 2013

Hi rogeranton,

The code is set to hidden because you don't want to show it until you come to print the page. The JavaScript error is the problem and will need to be fixed for the print button to work.

What is on and around line 27? Please post a link to the form so I can take a quick look.

Bob

ro

rogeranton 12 Mar, 2013

Thanks Bob

I changed the code back to 'hidden'. Now the printbutton don't show.
Here's the link to the form: http://svc.tess.as/index.php/nb/?option=com_chronoforms&tmpl=component&chronoform=svcreg-intern-Copy

It's just a test form so you can to whatever you want with it.

Roger

Gr

GreyHead 12 Mar, 2013

Hi rogeranton,

An extra line break has crept into this line of the JavaScript. Please make it into one line:

html = '<html><head>'+css+css_url+'<link rel="stylesheet" type="text/css" href="/plugins/editors/jckeditor/typography/typography.php"/></head>'+$(id).innerHTML+'</html>';

I misunderstood your question about the hidden button. It's hidden because it will only work if JavaScript is running on the page, if it is running then the script un-hides it.

Bob

ro

rogeranton 12 Mar, 2013

I don't get it. The button still don't show. Does it show in your browser?

There is also one more error in JavaScript-Console:
Port error: Could not establish connection. Receiving end does not exist.
chromeHidden.Port.dispatchOnDisconnect

Roger

Gr

GreyHead 12 Mar, 2013

Hi rogeranton,

The error in the JavaScript hasn't been fixed on your test form. Until that is corrected there is nothing else to check.

Bob

ro

rogeranton 12 Mar, 2013

Here is the code from the FAQ that I copied to the form. Which line do you mean I have to fix? I can't find the line you refer to.

<?php
$doc =& JFactory::getDocument();
$script = "
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>'+$(id).innerHTML+'</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;
window.addEvent('domready', function() {
    id = 'print_div';
    $('print_button').setStyle('visibility', 'visible');
    $('print_button').addEvent('click', printPage);
});
";
$doc->addScriptDeclaration($script);
?>

Roger

Gr

GreyHead 12 Mar, 2013

Hi rogeranton,

You're right, I should have looked more closely.

But the code that appears in your form is this:

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+'<link rel="stylesheet" type="text/css" href="/plugins/editors/jckeditor/typography/typography.php"/>
</head>'+$(id).innerHTML+'</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;
window.addEvent('domready', function() {
    id = 'print_div';
    $('print_button').setStyle('visibility', 'visible');
    $('print_button').addEvent('click', printPage);
});

If you look at these lines:

    html = '<html><head>'+css+css_url+'<link rel="stylesheet" type="text/css" href="/plugins/editors/jckeditor/typography/typography.php"/>
</head>'+$(id).innerHTML+'</html>';

You'll see that there is an extra <link . . .> jammed in there complete with a line break.

I have no idea where that comes from :-(

Bob

ro

rogeranton 12 Mar, 2013

When I look at the code it is without linebreak. The code spans over two lines but there is no linebreak. It's all on line 27.

Roger

ro

rogeranton 13 Mar, 2013

I created a new, very simple form http://svc.tess.as/index.php/nb/?option=com_chronoforms&tmpl=component&chronoform=SSV_endring_etikett

The form has three events only:

On Load
Show html
On Submit
Show Thanks Message
Custom Code

From the FAQ I've done nothing more than copy and paste the code enclosed and added some text between the div-tags.

I still get the same error on line 27. What's missing?

Gr

GreyHead 13 Mar, 2013

HI rogeranton,

Yes, it has exactly the same problem :-( Something, and I have no idea what, is inserting that JCK Editor link into the JavaScript.

What happens if you disable Typography on the JCK Editor (if that is possible?).

Bob

ro

rogeranton 13 Mar, 2013

I was able to disable System - JCK Typography in the Extension Manager.
Now the script stops at line 37: Uncaught TypeError: Object [object global] has no method 'addEvent'

Roger

Gr

GreyHead 13 Mar, 2013

Hi rogeranton,

Hmm, that's because the MooTools library isn't loading without the template. If you check the form with the template you'll find that the print button now shows up.

Bob

ro

rogeranton 15 Mar, 2013

Thanks a lot Bob. It works like a charm😀

Roger

Ka

Kati 21 Mar, 2013

That does not print the filled form. It just prints the Thank You message. How do I collect the filled data for printing?

Kati

Fl

FloB 21 Mar, 2013

Hello Kati!
You can show the results of your form in the Thank you message using the tag {data}...
See this FAQ http://chronoengine.com/faqs/view/2697/how-can-i-use-the-form-data.html;
Flo

ka

kate_ee 28 May, 2013

Hi GreyHead & Rogeranton,

I have the same trouble here.
May you tell me how you could get the print button displayed with the template?
I don't want any template/plugin/menu shows on my pages.
Everytime I disable the template, the print button doesn't show up.
Just like what you had before. 😟

Help, please advise.
Thank you in advance.

Regards,

Lily

Gr

GreyHead 30 May, 2013

Hi Lily,

I'm sorry but I don't understand your question :-(

The print button is hidden by default so if it isn't showing there may be a JavaScript error on your page.

Bob

ro

rogeranton 13 Sep, 2013

Hi

I've copied a form from a Joomla 2.5.6 site to a 3.1.5 site. Everything works fine except for the print button. It shows but nothing happens when I click it. Could it be that the code isn't compatible with Joomla 3.0? The print button code is copied from 'How can I add a Print button to my form?' FAQ.

Regards, Roger

Gr

GreyHead 14 Sep, 2013

Hi Roger,

I think it should still be OK with Joomla! 3. Do you see any JavaScript errors?

Please post a link to the form so I can take a quick look.

Bob

ro

rogeranton 16 Sep, 2013

Hi Bob

I don't see any JavaScript errors.

Here is a link to the form:
http://registrering.tess.as/index.php/etiketter-utskrift/cc_edit_data?cid=34

Roger

Gr

GreyHead 16 Sep, 2013

Hi Roger,

Yes there's an error there.

Uncaught TypeError: Object [object global] has no method 'addEvent'

from this line

window.addEvent('domready', function() {

I think that's because the page isn't loading the MooTools library. You can either load MooTools or re-write the script using jQuery if you prefer?

Bob

ro

rogeranton 16 Sep, 2013

Thank's, but how do I load MooTools? I can't find any place to activate/deactivate it. jQuery I'm not familiar with.

Roger

ro

rogeranton 18 Sep, 2013

I finally figured this out. In Joomla 3 MooTools is not loaded by default. I had to edit the JHtml class in the template index.php. It was set to

JHtml::_('bootstrap.framework')

which enables jQuery. I changed this to

JHtml::_('behavior.framework', core)

Google is my best friend 🙂 , Roger

Gr

GreyHead 18 Sep, 2013

Hi Roger,

I'm sorry I could have sworn that I'd replied to this. I wrote a FAQ about this. I guess that I wrote the FAQ but forgot the post :-(

Bob

ro

rogeranton 18 Sep, 2013

That's ok Bob. You've been most helpful both here and in other threads. I appreciate your help very much. I learn a lot when I have to dig deeper on my own 🙂

Roger