1
私のプロジェクトでは、作成するチャートに外部jqueryを使用します。しかし、jqueryを使用した後、私のプロジェクトでは何のアクションも動作しません。私はプロジェクトでhighChart piechart jqueryをロードします。
私はjQuery.noConflict（）を使用しています。しかし、使用しないでください。richfacesページが動作しないjqueryプラグインをロードする
私は2つの静的ページ（parent.jsp、leftsidemenu.jsp）と1つの動的インクルードページ（rightside1.jsp、rightside2.jsp .....）を持っています。 親ページには2つの部分（左側と右側）があります。
ステップ1：私がログインした後、いくつかのメニューが右側にdisplying左側およびチャートに表示されます（このチャートは、jQueryのを使用して読み込ま。）
ステップ2：私は、左側のメニューをクリックすると、右側の部分で動的に変更が発生します。
jqueryを使用した後、leftsidemenuアクションは機能しません。
左側のメニューをクリックすると、Beanのアクションをサポートしません。
<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
leftsidemenu.jsp
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>
このページに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>
私は、JSPを知らないので。私の理解でjqueryの宣言を以下のように変更してください。 –
エラーが発生していますか？firebugで確認してください... – Vivek
何が問題になったのかを分析できるようにjQueryコードを表示しますか？ – Vivek