Print button

Ni

NickOg 18 May, 2013

Hi Bob,

Is there any way that I can add a Print button that sits outside the form? I am using a jQuery procedure to print the form. I know that I can do that by switching to custom code for the form and inserting a button there, but how can I do that via the Form Wizard?

Nick

Gr

GreyHead 18 May, 2013

Hi Nick,

Why does it need to be outside the form? A Custom Element Element in the form should work OK.

Bob

Ni

NickOg 18 May, 2013

I had better take a closer look. When I tried it it submitted the form rather than run the jQuery & print the form I can avoid printing the button as part of the form with CSS of course. I will try again tomorrow.

Nick

Gr

GreyHead 18 May, 2013

Hi Nick,

Please see this FAQ which has a MooTools solution.

Bob

Ni

NickOg 18 May, 2013

That is what I am looking for Bob. I hadn't thought of using the Thank You event. For the moment though I am adapting it to my existing form. So I have added the code to the on load event but get this message

TypeError: $(...).setStyle is not a function
http://j25.pmhu3a.ogbourne.org.au/index.php?option=com_chronoforms&idReceipt=108&byUser=NOgbourne&chronoform=ackApplyMember
Line 49

and the button doesn't appear.
If I delete that line I get a similar message

TypeError: $(...).addEvent is not a function
http://j25.pmhu3a.ogbourne.org.au/index.php?option=com_chronoforms&idReceipt=108&byUser=NOgbourne&chronoform=ackApplyMember
Line 50

I have cut and pasted your code as you can see.

<?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);
?>

Stuck! It's not a jQuery/mooTools clash is it?

The code seems to have copied into the page OK

  <script type="text/javascript">

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

Gr

GreyHead 19 May, 2013

Hi Nick,

Most likely either the MooTools library isn't being loaded or there is a conflict with jQuery.

Bob

Ni

NickOg 19 May, 2013

I suspected as much. I am using the MooTools date picker so it must be loaded and I know jQuery is because Google calendar uses that. So hw do I avoid the conflict? I know that I can write thejQuery by replacing the $ with the word jQuery but how can I do that with your MooTools code is the question. I know you have an FAQ for that but it looked quite complicated.

I need to look again tomorrow.
Thanks Bob

Gr

GreyHead 19 May, 2013

Hi Nick,

I come from the naïve viewpoint that as MooTools is native to Joomla! 2.5 then JQuery needs to conform - which basically means that it needs to be placed in noConflict mode. This can be trivially simple - adding one line of code, or painfully complex if you can't get the one line in just the right place (after JQuery loads and before any MooTools code runs).

It's probably also possible to re-write the MooTools code but I try to avoid having to do that :-(

Bob

Ni

NickOg 19 May, 2013

Actually, I remember that it is Google Analytics that I saw loaded jQuery. I will see if I can eliminate all jQuery for a start. I guess to if I look at the web source I should be able to find everywhere that jquery load.

Sounds like fun!

Ni

NickOg 19 May, 2013

I have made some progress by uninstalling Google analytics and as far as I can see from the web page <head> section jQuery is no longer loaded.

Now the error is

TypeError: window.addEvent is not a function
http://j25.pmhu3a.ogbourne.org.au/index.php?option=com_chronoforms&idReceipt=110&byUser=NOgbourne&chronoform=ackApplyMember
Line 43

Same error but earlier in the code.

Any other thoughts about where the problem might lay, Bob?

Ni

NickOg 19 Jul, 2013

A fairly late follow up. I never did work out how to fix the MooTools/jQuery clash myself. I finally found jQuery Easy. The extension is on extensions.joomla.org and the developers web site here http://www.simplifyyourweb.com/.

And, honest, install the plug in, enable it and it works. Damned if I know how but Bob's print screen function works a treat now.

Just in case anyone else is sweating in the problem.

Regards

Nick

ps Bob - you said

MooTools is native to Joomla! 2.5 then JQuery needs to conform

.

Did I see some note somewhere to the effect that jQuery was to be native to Joomla 3. something? Or have I got that wrong?

Gr

GreyHead 19 Jul, 2013

Hi Nick,

Nice find.

You are correct, in Joomla! 3 the MooTools Library is deprecated (another slightly bizarre decision by the Joomla! developers IMHO). However it is still there and seems to work well alongside the Joomla! 3 jQuery implementation - that is the two are not in conflict.

Bob