Simple jQuery Print Friendly Page

The following script can be used to take the content from a section of a page, in this case a div, and put the content in a new simplified window.  This is one way to exclude banners and graphics or deal with page layouts that don't  print well.  In the first section, on document ready, the link (or whatever element you like) is selected by the id "linkPrintFriendly" and assigned a function to execute when the element is clicked.  I've also made the cursor a pointer when hovering over the element.  The "printfriendly" function basically grabs html from an element on the page (with the class "theelementtoprint") and puts it in a new window that is opened.  In this example, I'm also hiding a table that I don't want to show in the new window.

I found a very useful example showing the code at http://jsfiddle.net

  <script type="text/javascript">
        $(document).ready(function () {
            $("#lnkPrintFriendly").click(printfriendly);
            $("#lnkPrintFriendly").css("cursor", "pointer");
        });

        function printfriendly() {

            //open a new window or tab
            var w = window.open();

            //include only the content of the center div or rightnocenter div
            var html = $(".theelementtoprint").html();

            //provide a title
            w.document.title = 'Page Title';

            //put the html into the new page
            $(w.document.body).html(html);

            //hide the table
            $(w.document).find("#tblFunctions").hide();

        }
    </script>

Calling Existing Javascript from Code Behind

Notes on how to call an existing javascript function from the code-behind.  The "confirmDelete" function below calls a jQuery dialog that will be used to delete records from a datalist.  I'm running this script from the code behind because I want to populated the dialog with values from the datalist record to allow the user to view the data they are about to delete.  The code at the bottom contained in the datalist ItemCommand method and runs when the e.CommandName = "Delete".


ASPX


<script type="text/javascript">
        // increase the default animation speed to exaggerate the effect
        $.fx.speeds._default = 400;
        function confirmDelete() {


            var dlgeditproduct = $(".deleteconfirmdiv").dialog({
                modal: true,
                width: 750,
                height: 450,
                autoOpen: false,
                title: "Are you sure you want to delete this News Release?",
                hide: "explode"
            });


            $(".deleteconfirmdiv").dialog("open");


            dlgeditproduct.parent().appendTo(jQuery("form:first"));


        };
</script>



VB


 Page.ClientScript.RegisterStartupScript(Me.GetType(), "confirmdelete", "confirmDelete();", True)