Components are not work when i load jquery
Hi, In my project i use external jquery for create chart. But after use jquery, any action is not work in my project. I load highChart piechart jquery in my project.
Eventhough i use jQuery.noConflict(). and also $.noConflict(). But no use.
I have two static page(parent.jsp, leftsidemenu.jsp) and one dynamic included page(rightside1.jsp, rightside2.jsp.....). The parent page have two parts (leftside and rightside).
Step 1 : After i login, some menus appear in leftside and Chart displying in right side.(this chart populated by using jQuery.)
Step 2 : If i click menu in leftside, then dynamically change occur in right side part.
But after i use the jquery, the leftsidemenu action is not work.
If i click any menu in leftside, then it's not going to backing bean action.
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 menus -->
<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 dynamically include the jsp 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>
and, 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>
</rich:panelMenuGroup>
and,
rightside1.jsp
This page have one chart using 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(); // also i use : $.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>
How to resolve this..
Help me.
Thanks for your valuable time.
