3 Replies Latest reply on Apr 6, 2010 10:24 AM by ilya_shaikovsky

    problem in position of jquery.ui.dialog  ?

    shasho

      Hello,

       

      Problem setting the position when integrating jquery.ui.dialog with richfaces unders seam

      The jquery command

       

      function openDialog()
          {

           jQuery("#example").dialog({ height: 350,
                      width: 400,
                      position , 'center' ,
                      modal: true,
                      title:'Hello World',
                  });

      }

       

       

      trying variouse position parameter/numbers ([][]) with no success, the position of the open window is always in the left corner of the screen

      All the other options of jquery.ui.dialog seems to work (size, modal .....)

       

      including

      <script type="text/javascript" src="/resources/js/jquery-ui.js"></script>

      <style type="text/css">
          @import "/resources/js/themes/base/jquery.ui.all.css";
          @import "/resources/js/themes/start/jquery-ui-1.8.custom.css"; 
      </style>

       

      html to open window

       

      <a href="#" onclick='javascript:openDialog()'>Show it</a>

       

       

      versions

      jquery.ui.dialog - 1.8

      richfaces 3.3.3 CR1 , 3.3.1GA

      Seam 2.2.0 GA

       

       

      Thanks

      Amir

        • 1. Re: problem in position of jquery.ui.dialog  ?
          ilya_shaikovsky

          1) do not load jquerry base library as external resource. use bundled with richfaces as there could be versions conflicts. Check FAQ (common client side problems) and look through richfaces-demo load script page to learn how to load resources from class-path.

          2) in general looks like just jquery problem.. Or it  works fine if used on the pages without RF resources? Then it seems 1) is the reason.

          1 of 1 people found this helpful
          • 2. Re: problem in position of jquery.ui.dialog  ?
            shasho

            Hi,

             

            You are right, here are the needed step for jquery.ui.dialog integration

             

            1 in Web.xml


            To use ONLY jquery
            ...
            <context-param>
                <param-name>org.richfaces.ExcludeScripts</param-name>
                <param-value>Prototype,Scriptaculous</param-value>
            </context-param>
            ...

            2. just after the <body> add this
            <rich:jQuery timing="onload" query="undefined" />

            3 load all the external scripts and css
            <a4j:loadStyle src="/resources/js/themes/start/jquery-ui-1.8.custom.css"/>
            <a4j:loadScript src="/resources/js/jquery.dimensions.js" />
            <!--  you pick the elements in http://jqueryui.com/download,  -->
            <a4j:loadScript src="/resources/js/jquery-ui-1.8.custom.min.js" />

             

            4. Add the ready function for jquery

             

            <script language="JavaScript">
                jQuery(document).ready(function(){
                    jQuery("#example").dialog({ autoOpen: false } );
                  });           
            </script>

             

             

            5. In your HTML define the dialog

            <div id="example" style="display:none;" title="my title">
                 expmple
                <br/>
                <a href="/site/home.smart">
                    <img src="/resources/images/example.jpg"/>
                </a>
                </div>

             

            6. In your HTML call to open the dialog

            </div>
                    <a href="#" onclick='jQuery("#example").dialog("open");'>Show it</a>
                    <br/>
                    <a href="#" onclick='jQuery("#example").dialog("close");'>Close it</a>

             

                </c:if>

             

            Amir

            • 3. Re: problem in position of jquery.ui.dialog  ?
              ilya_shaikovsky
              <context-param>
                  <param-name>org.richfaces.ExcludeScripts</param-name>
                  <param-value>Prototype,Scriptaculous</param-value>
              </context-param>

              this means that prototype and scriptaculous will not be loaded. But RichFaces heavily depends on them. And wiki post contains clear note that if you excluding them you should load alternative versions of them (designed just for case when you want to degrade or upgrade the versions manually.) But changing of our bundled libs with external - could cause problems because we have some patches applied to the libraries which still unsolved in original ones.

               

              So I guess that this step should be reverted as RF features or components you using will possibly be broken.