开发者

richfaces page not work when load jquery plugin

开发者 https://www.devze.com 2023-01-30 10:58 出处:网络
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.

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(). 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 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

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();

                $(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>


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

});
0

精彩评论

暂无评论...
验证码 换一张
取 消