Question

在我的项目中，我使用外部jquery创建图表。但是在使用jquery之后，任何操作都无法在我的项目中运行。我在我的项目中加载了highChart piechart jquery 虽然我使用jQuery.noConflict（）。但没用。

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

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

步骤2：如果我点击左侧的菜单，则会在右侧部分进行动态更改。
但是在我使用jquery后，leftsidemenu动作不起作用如果我点击左侧的任何菜单，那么它不会支持bean动作。

parent.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>

leftsidemenu.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>

Answer 1

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

});

加载jquery插件时，richfaces页面不起作用

1 个答案: