2010-12-15 42 views
1

在我的项目中,我使用外部jQuery来创建图表。但使用jQuery之后,任何操作都不适用于我的项目。我在我的项目中加载了highChart piechart jquery。
尽管我使用jQuery.noConflict()。但没用。我有两个静态页面(parent.jsp,leftsidemenu.jsp)和一个动态包含页面(rightside1.jsp,rightside2.jsp .....)。父母页面有两个部分(左边和右边)。richfaces页面加载jquery插件时不工作

步骤1:i之后登录,某些菜单显示在左侧和右侧图表在右侧displying(该图通过使用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> 

+0

因为我不知道JSP。以我的理解,请更改jquery声明如下。 – 2010-12-15 09:35:21

+0

您是否收到任何错误?请检查萤火虫... – Vivek 2010-12-15 09:42:17

+0

向我们展示您的jQuery代码,以便我们分析出错的原因? – Vivek 2010-12-15 09:53:44

回答

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

}); 
+0

@Mohan Ram我认为jquery声明没有错...... – Vivek 2010-12-15 09:41:19

+0

我也在使用高图。首先,我遇到了很多问题。我的错误是$ .conflict()中的错误声明。所以我建议你。 – 2010-12-15 09:43:24

+0

感谢您的回复。我测试了以下方法:1.使用您的代码。但没有回应。 2.我只是加载该插件。不能访问该查询。尽管我有同样的问题。 – Eswar 2010-12-15 09:46:59

相关问题