1

在我的项目中，我使用外部 jquery 来创建图表。但是在使用 jquery 之后，任何操作在我的项目中都不起作用。我在我的项目中加载了 highChart piechart jquery。
尽管我使用 jQuery.noConflict()。但是没有用。

我有两个静态页面（parent.jsp，leftsidemenu.jsp）和一个动态包含页面（rightside1.jsp，rightside2.jsp.....）。父页面有两部分（左侧和右侧）。

第 1 步：登录后，一些菜单出现在左侧，图表显示在右侧。（此图表使用 jQuery 填充。）

第2步：如果我单击左侧的菜单，则在右侧部分发生动态变化。
但是在我使用 jquery 之后，leftsidemenu 操作不起作用。
如果我单击左侧的任何菜单，则它不会支持 bean 操作。

父.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">

<%@ 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>
<f:view>
    <head>           
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />                                   
    </head>
    <body id="parentBody">

        <rich:page id="parentRichPage" sidebarPosition="left" sidebarWidth="260">

            <f:facet name="sidebar">
                <a4j:outputPanel id="sideBarOutputPanelId">                       
                   <!-- Left side menuse -->
                   <jsp:include page="leftsidemenu.jsp"  flush="true" />                                       
                </a4j:outputPanel>
            </f:facet>

            <rich:layout>
                <rich:layoutPanel position="center" width="70*">                        
                    <a4j:outputPanel id="rightSidePanelId">

                        <f:verbatim>
                            // Here dynamic include the page depend upon leftside menu clicked
                            <jsp:include page="${ParentBean.rightSidePage}" flush="true"/>   
                        </f:verbatim>

                    </a4j:outputPanel>                       
                </rich:layoutPanel>
            </rich:layout>              

        </rich:page>
    </body>
</f:view>
</html>

左侧菜单.jsp

<rich:panelMenuGroup id="leftSideLink" label="leftside1">                           
        <a4j:support action="#{LeftSideBean.showRightSidePieAction1}"
                     event="onclick" 
                     reRender="rightSidePanelId"/>

       <rich:panelMenuItem id="leftSide2">
             <a4j:commandLink id="leftSideMenuLink2"
                              value="ShowPage2"
                              action="# {LeftSideBean.showRightSideAction2}"                         
                              reRender="rightSidePanelId"/> 
       </rich:panelMenuItem>

       <rich:panelMenuItem id="leftSide3">
             <a4j:commandLink id="leftSideMenuLink3"
                              value="ShowPage3"
                              action="# {LeftSideBean.showRightSideAction3}"                         
                             reRender="rightSidePanelId"/> 
       </rich:panelMenuItem>

rightside1.jsp
这个页面有一个使用 jquery 的图表。

<%@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">

<%@ 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"%>

<f:subview id="rightSide1SubviewId">   
 <f:verbatim><html>       
 <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <a4j:loadScript src="../../scripts/jquery-1.3.2.min.js"/>
            <a4j:loadScript src="../../scripts/jquery.min.js"/>
            <a4j:loadScript src="../../scripts/highcharts.js"/>

            <script type="text/javascript">

                jQuery.noConflict();

                $(document).ready(function()
                {                       
                      // Here i already wrote a script for loading chart.          
                });

            </script>

        </head>
        <body>
        </f:verbatim>

        <a4j:outputPanel id="rightSideChartPanel">
            <rich:simpleTogglePanel id="toggleId" switchType="client" label="Charte Management" >

                    <div id="container" style="width: 350px; height: 250px; margin: 0 auto"></div>

            </rich:simpleTogglePanel>
        </a4j:outputPanel>

        <f:verbatim>
        </body>
    </f:verbatim>
</f:subview>
<f:verbatim>

4

1 回答 1

0 
  $.noConflict();
                jQuery(document).ready(function($){
//Give ur jquery codes here

});
于 2010-12-15T09:34:34.847 回答