4 Replies Latest reply on Dec 16, 2010 9:44 PM by mangelo123

    Components are not work when i load jquery

    eswaramoorthy1985

      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.

        • 1. Re: Components are not work when i load jquery
          nbelaevski

          Hi,

           

          You have duplicate HTML/HEAD/BODY elements in your page. Let's start with removing them.

          • 2. Re: Components are not work when i load jquery
            mangelo123

            I don't think that you can load JQuery like that. I had more success when I did it like this:

             

            <a4j:loadScript src="resource://jquery.js"/>

             

            Richfaces comes with a version of JQuery. Also, don't forget that you cannot use $() and that you have to use jQuery() instead.

             

            Hope this helps.    

            • 3. Re: Components are not work when i load jquery
              eswaramoorthy1985

              @Michael Angelo : Very vey thanks for support.

               

              Now its perfectly worked..

               

              Now i remove all script.

               

              Just i load the following script in my head tag.

               

              <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    

                                                                 
                              <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />               
                              <a4j:loadScript src="../scripts/highcharts.js"/>
                            
                              <script type="text/javascript">

                                  jQuery.noConflict();

                                  jQuery(document).ready(function()
                                  {

                                          ....

                                          ....

                                   });

                              </script>

               

              </head>

              • 4. Re: Components are not work when i load jquery
                mangelo123

                Glad I can help!