2010-12-15 102 views
1

Dans mon projet, j'utilise jquery externe pour créer un graphique. Mais après utilisation jquery, toute action ne fonctionne pas dans mon projet. Je charge highChart piechart jquery dans mon projet.
Même si j'utilise jQuery.noConflict(). Mais pas d'utilisation.La page richfaces ne fonctionne pas lors du chargement du plugin jquery

J'ai deux pages statiques (parent.jsp, leftsidemenu.jsp) et une page dynamique incluse (rightside1.jsp, rightside2.jsp .....). La page parent comporte deux parties (leftside et rightside).

Étape 1: Après login, certains menus apparaissent dans Leftside et graphique displying à côté droit (ce tableau peuplé en utilisant jQuery.)

Étape 2:. Si je clique menu Leftside, puis changer dynamiquement se produire dans la partie droite.
Mais après avoir utilisé la jquery, l'action leftsidemenu ne fonctionne pas.
Si je clique sur un menu dans le menu, il ne va pas appuyer l'action du 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
Cette page a un graphique à l'aide 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

Depuis que je ne sais pas jsp. avec ma compréhension s'il vous plaît changer déclaration jquery comme ci-dessous. –

+0

est-ce que vous obtenez une erreur? Vérifiez avec firebug ... – Vivek

+0

montrez-nous votre code jQuery afin que nous puissions analyser ce qui s'est mal passé? – Vivek

Répondre

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

}); 
+0

@Mohan Ram je pense qu'il n'y a rien de mal avec cette déclaration jquery ... – Vivek

+0

J'utilise aussi graph graphique. D'abord j'ai fait face à beaucoup de problèmes. mon erreur est une fausse déclaration dans $ .conflict(). donc je vous ai suggéré. –

+0

Merci pour votre réponse. J'ai testé de la façon suivante: 1. Utilisez votre code. Mais pas de réponse. 2. Je viens de charger ce plugin. Ne pas accéder à cette requête. Même si j'ai le même problème. – Eswar