how to integrate jquery with jsf richfaces tags for print the image and textarea content?

hi, Here i write code to take printout the textarea content using jquery.

I load the two java script (jquery-1.3.2.js and jquery.print.js)

But these two source file not support rich:datascroller tag(component)..

There are two problems occur:

Using jquery, print succesfully worked. but rich:datascroller not worked (without using jQuery.noConflict() method)
Suppose i use Jquery.noConflict(), this time rich:dataScroller working, But printing process not worked.

This code have datatable, rich:datascroller and textarea. Some time here i use image instead of teaxtarea. So i need code for support to print both textarea and image. Datatable for test the datascroller component.

My focus : print the textarea content as well as perfectly work to datascroller component.

printer.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<html>
     <head>
          <title>Print Viewer </title>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <a4j:loadScript src="resource/jquery-1.3.2.js"/>
          <a4j:loadScript src="resource/jquery.print.js"/>

         // The problem is : above two loadscript does not support datascroller   
         //componenet.  
         // But that two jquery file for using to take the print.   

          <script type="text/javascript">

           jQuery.noConflict();

          function printData()
          {      
              //Print the Div content for textarea        
              jQuery( ".printable" ).print();
              return( false );
          }
          </script>
     </head>

<body>

<h:form id="printViewerForm" binding="#{PrintViewer.initForm}">
   <rich:panel id="printViewerRichPanel">
     <h:panelGrid cellpadding="3" columns="2" id="printPanelGridId"
                  cellspacing="3" border ="1">
                  <h:panelGrid>

                   //DataScroller for dataTable
                    <rich:datascroller id = "dataScrollerTop" align="center"
                                       for= "printDataTable"  page="1"
                                       maxPages="20"/>

                       <rich:dataTable id="printDataTable" 
                                       value="#{PrintViewer.printViewerList}"
                                       cellpadding="3" rows = "5"  rowKeyVar="rowIndex"
                                       cellspacing="3" var="printViewerResultListTo">

                                <f:facet name="header">
                                    <rich:columnGroup>
                                        <rich:column>
                                            <h:outputText value="PrintTable"/>
                                        </rich:column>
                                    </rich:columnGroup>
                                </f:facet>

                                <rich:column>
                          <h:outputText value="#{printViewerResultListTo.printName}"/>
                                </rich:column>
                            </rich:dataTable>
                   </h:panelGrid>

          //Print Content Region
                  <a4j:region id="printContentViewRegion">
                    <a4j:commandButton id="printButton" 
                                       value="PrintContent"
                                       onclick="printData()"/>

                         <div id="printContentDiv"  class="printable">
                               <h:inputTextarea  id="printContentTextArea" 
                                                 style="width:300px;height:300px;
                                                 value ="
                                                          This is
                                                          Sample
                                                          Jquery For
                                                          Test
                                                          working
                                                          Text Area"/>
                            </div>
                           </a4j:region>
                     </h:panelGrid>
                </rich:panel>
           </h:form>
</body>

PrintViewer.java

import java.util.ArrayList; import java.util.List; import javax.faces.component.html.HtmlForm;

public class PrintViewer {

private HtmlForm initForm;
private List printViewerList = new ArrayList();

public HtmlForm getInitForm()
{
    printViewerList = getPrintList();
    return initForm;
}

private List getUploadList()
{
    if (!printViewerList.isEmpty())
    {
        printViewerList.clear();
    }

    printViewerList.add(new PrintViewerResultListTo("print 1"));
    printViewerList.add(new PrintViewerResultListTo("print 2"));
    printViewerList.add(new PrintViewerResultListTo("print 3"));
    printViewerList.add(new PrintViewerResultListTo("print 4"));
    printViewerList.add(new PrintViewerResultListTo("print 5"));
    printViewerList.add(new PrintViewerResultListTo("print 6"));
    printViewerList.add(new PrintViewerResultListTo("print 7"));
    printViewerList.add(new PrintViewerResultListTo("print 8"));
    printViewerList.add(new PrintViewerResultListTo("print 9"));
    printViewerList.add(new PrintViewerResultListTo("print 10"));
    printViewerList.add(new PrintViewerResultListTo("print 11"));
    printViewerList.add(new PrintViewerResultListTo("print 12"));
    printViewerList.add(new PrintViewerResultListTo("print 13"));
    printViewerList.add(new PrintViewerResultListTo("print 14"));
    printViewerList.add(new PrintViewerResultListTo("print 15"));

    return printViewerList;
}



public void setInitForm(HtmlForm initForm)
{
    this.initForm = initForm;
}

 public List getPrintViewerList()
{
    return printViewerList;
}

public void setPrintViewerList(List printViewerList)
{
    this.printViewerList = printViewerList;
}

}

PrintViewerResultListTo.java

public class PrintViewerResultListTo {

private String printName;

PrintViewerResultListTo(String printName)
{
    this.printName = printName;
}


public String getPrintName()
{
    return printName;
}


public void setPrintName(String printName)
{
    this.printName = printName;
}

}

I hope help me about this.

Thanks in advance.

ansaurus

tags:

views:

answers:

how to integrate jquery with jsf richfaces tags for print the image and textarea content?

related questions