страница richfaces не работает при загрузке плагина jquery - PullRequest
Новая
       26

страница richfaces не работает при загрузке плагина jquery

1 голос
/ 15 декабря 2010

В моем проекте я использую внешний jquery для создания диаграммы.Но после использования jquery, любое действие не работает в моем проекте.Я загружаю highChart piechart jquery в свой проект.
Несмотря на то, что я использую jQuery.noConflict ().Но бесполезно.

У меня есть две статические страницы (parent.jsp, leftsidemenu.jsp) и одна динамически включенная страница (rightside1.jsp, rightside2.jsp .....).Родительская страница состоит из двух частей (слева и справа).

Шаг 1 : после того, как я войду в систему, некоторые меню появятся в левой части экрана, а диаграмма будет отображаться с правой стороны (эта диаграмма заполнена с помощью jQuery.)

Шаг2: Если я щелкаю меню в левой части, то в правой части происходят динамические изменения.
Но после того, как я использую jquery, действие левой стороны не работает.
Если я щелкаю любое меню в левой части, тоон не собирается поддерживать действие 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>

1 Ответ

0 голосов
/ 15 декабря 2010 
  $.noConflict();
                jQuery(document).ready(function($){
//Give ur jquery codes here

});
...