Using Jquery-UI-Dialog in JSF 1.2

Question

I'm trying use jquery in a jsf project. I want to open a jquery dialog. The dialog box is opening and can perform what we desire. But when its closed, richfaces tabs are not working. When i remove

<script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
        <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"> </script>

declerations they are working again.

Here is error output in firebug

Error: element.dispatchEvent is not a function
Source File: http://localhost:8080/KOBAR/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.PrototypeScript
Line: 265

Here is my .xhtml page.

<ui:define name="head">
        <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
        <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
        <f:verbatim>
            <script type="text/javascript">

            function openStakeHolderPopUp(){
                //$('#stakeHolderPopUp').dialog('open');
                    var popUpWindow = document.getElementById("stakeHolderPopUp");
                    popUpWindow.setAttribute("style", "visibility:visible");
                    $(popUpWindow).dialog({
                        modal: true,
                        height: 100,
                        width: 200,
                        closeOnEscape: true,
                        close: function(ev, ui) { 
                            $(this).dialog("destroy");
                        }
                    });
                };
            </script>
        </f:verbatim>
    </ui:define>

    <ui:define name="body">
       <RF:tabPanel>
    <RF:tab label="Profil" id="tabProfil">
            <h:inputText id="value" readonly="true" onclick="openStakeHolderPopUp()"/>
            <h:inputText id="name" required="true" value="#{company.name}"/>
            </RF:tab>
    <RF:tab label="Detay" id="tabDetail">
            </RF:tab>


    <RF:panel id="stakeHolderPopUp">
    <ui:define name="label">Paydaş Adı</ui:define>
      <h:inputText id="value" required="true"/>
    </RF:panel>

    </ui:define>

Any idea? Thanks.

Answer 1

RichFaces 3.3.3 ships with its own version of jQuery which is I believe 1.3.x. It might have collided with jQuery 1.6.2 which you included manually. You can try the following:

• Don't include jQuery 1.6.2 and just use RichFaces-supplied jQuery libs. If necessary change jQuery UI to a 1.3.x compatible version.

• Or just use <rich:modalPanel> instead of jQuery UI dialog.