Search code examples
javascriptjquerybuttononclickprintthis

How do you assign the printThis plugin function to a button?

Sorry for the noob question...I've been searching for an example but I'm obviously doing something wrong (or am way off track in what I want to do!)

I am using this: http://www.devx.com/webdev/Article/10483/0/page/2 to create a multipage form using visibility and div sections. Seems to work very well.

I now need to be able to print (printer) one page from another page. Possible?

I'm trying to use the printThis plugin by Jason Day.

I am calling the plugin like so: $.getScript("printThis.js", function(){ });

(plugin is in the current directory...will address that later)

<input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
<input type="button" id="B2" value="Print App" onClick="$("#page1").printThis()">

First button works as expected...goes back to page1 Second button does nothing...is syntax right? Or am I just trying to do something that can't be done?

Solution

  • Your first button is correct. The second button is not however. Your double quotes " within your jQuery selector is causing the onClick attribute to close prematurely. Try one of the following methods:

    Inline Option 1 - Escape Double Quotes

    <input type="button" id="B2" value="Print App" onClick="$(\"#page1\").printThis()">

    Inline Option 2 - Use Single Quotes

    <input type="button" id="B2" value="Print App" onClick="$('#page1').printThis()">

    Option 3 - Remove Obtrusive JavaScript (Strongly Recommended)

    <!-- Place this code in the <head></head> section of your page -->
<script type="text/javascript">
    $(document).ready(function () {
        $('#B2').on('click', function () {
            $('#page1').printThis();
        });
    });
</script>