jquery, jsf интеграция не работает ..!

Question

Я должен загрузить div в модальный диалог, щелкнув ok ссылку. но здесь не работает код, может ли кто-то помочь.

<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 страницы отлично работает, но не на этой странице.

Answer 1

<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. Я рекомендую придерживаться RichFaces-bundled. Избавьтесь от всех этих <script> ссылок на jQuery.

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

Если вы не можете гарантировать, если текущая страница будет использовать RichFaces ajaxified компоненту, для которых будет автоматически загружена RichFaces комплектации JQuery, то вы можете заставить его загрузку на

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

Обратите внимание, что вы делаете не необходимо предоставить свой собственный файл. <h:outputScript> автоматически загрузит его из файла JAR RichFaces.

---

Unrelated к конкретной проблеме, RichFaces имеет <rich:popupPanel> из коробки. Вы смотрели на него вместо того, чтобы его доморостить?