0

リンクをクリックしてモーダルダイアログにdivをロードすることになっています。しかし、ここではコードが機能しません。誰かが助けてくれますか。

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>

    <script src="JqueryLib/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<h:outputStylesheet library="css" name="application_1.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="jquery-ui.css"></h:outputStylesheet>

<script>
$(document).ready(function(){
$("#viewDetails").click(function(){

$("#popup").dialog({
     modal: true,
    height: 400,
    width:600,
     buttons: {
     Ok: function() {
     $( this ).dialog( "close" );} }
});



})    
});
</script>
</h:head>
<h:body>

<ui:composition template="/template.xhtml">

            <ui:define name="title">my title</ui:define>



            <ui:define name="content">

                <div class="content2">

                    <div class="tabs">

                        <h1>Overview</h1>

                            <p>
                                test test
                            </p>

                        <f:view>

                            <h:form id="testForm">

                            <h:outputLink id="viewDetails" value="#">
                <h:outputText value="View Details"/>
            </h:outputLink>



            <h:panelGroup id="popup" class="popup" title="test Panel" layout="block" >

            </h:panelGroup>


                            </h:form>

                        </f:view>



                    </div>

                </div>

            </ui:define>

        </ui:composition>

</h:body>

</ui:composition>

リンクをクリックするとダイアログボックスが表示されるはずですが、単純なjsfページでテストすると正常に動作しますが、このページでは動作しません。

4

1 に答える 1

0 
<ui:composition ... xmlns:rich="http://richfaces.org/rich">
...
<script src="JqueryLib/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>

4つの異なるjQueryファイルをロードして混合しています。もちろん、これは互いに競合するため失敗します。jQueryファイルは1つだけ使用する必要があります。RichFacesにバンドルされているものに固執することをお勧めします。<script>jQueryへのこれらの参照をすべて取り除きます。

<ui:composition ... xmlns:rich="http://richfaces.org/rich">

現在のページがRichFacesにバンドルされたjQueryが自動的にロードされるRichFacesajaxifiedコンポーネントを使用するかどうかを保証できない場合は、次の方法で強制的にロードできます。

<ui:composition ... xmlns:rich="http://richfaces.org/rich">
...
<h:outputScript name="jquery.js" />

独自のファイルを提供する必要はないことに注意してください。は<h:outputScript>、RichFacesJARファイルから自動的にロードします。

具体的な問題とは関係なく、RichFacesにはすぐに使用できます<rich:popupPanel>。自家栽培する代わりに見たことがありますか？

于 2013-02-12T11:44:46.373 に答える