1

私のプロジェクトでは、チャートの作成に外部jqueryを使用しています。しかし、jquery を使用した後、私のプロジェクトではどのアクションも機能しません。プロジェクトに highChart piechart jquery をロードします。
私はjQuery.noConflict（）を使用していますが。しかし、役に立たない。

2 つの静的ページ (parent.jsp、leftsidemenu.jsp) と 1 つの動的インクルード ページ (rightside1.jsp、rightside2.jsp.....) があります。親ページには 2 つの部分 (左側と右側) があります。

ステップ 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>

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 を使用したグラフが 1 つあります。

<%@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 に答える