jQuery Print Preview Plugin not working with <h:commandLink>

Question

I am trying to use jQuery Print Preview Plugin to show the prieview of a JSF page before printing it.

First I tried a demo with plain HTML tags.

<script src="../js/jquery.print-preview.js" type="text/javascript"
                    charset="utf-8"></script>
                <script type="text/javascript">
                    var $j = jQuery.noConflict();

                    $j(function() {
                                alert("hai");
                                /*
                                 * Initialise print preview plugin
                                 */
                                 $j('.print-preview').printPreview();
                                 alert("bye");

                            });
                </script>

                <div id="header" class="container_12">
                     <a class="print-preview">Print this Page</a>
                </div> 

I works correctly and the print -preview modal dailog is opened.

However,when i try replacing the <a> tag with <h:commandLink> the $(this).bind('click', function(e) within the print-preview.js is not triggered.

<h:form id="printForm">
                <script src="../js/jquery.print-preview.js" type="text/javascript"
                    charset="utf-8"></script>
                <script type="text/javascript">
                    var $j = jQuery.noConflict();

                    $j(function() {
                                alert("hai");
                                /*
                                 * Initialise print preview plugin
                                 */
                                 $j('.print-preview').printPreview();
                                 alert("bye");

                            });
                </script>

                <div id="header" class="container_12">
                <h:commandLink id="sample" value="Print this page" styleClass="print-preview"/> 

                </div> 
</h:form>

I even tried using $j('printForm\\:sample').printPreview();, but still it is not working.

Am I doing something wrong?

Answer 1

I replaced <h:commandLink> with <p:commandLink> and the jQuery Print Preview Plugin works perfectly fine now.