Components are not work when i load jquery
eswaramoorthy1985 Dec 16, 2010 12:09 AMHi, 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.