2 Replies Latest reply on Dec 28, 2012 6:34 AM by Brendan Healey

    Usage of jQuery along with Richfaces

    Deibys Quintero Newbie

      Hello Guys,

       

      I am using RichFaces 4.2.2  and I want to use some jQuery funcions, mainly the jQuery Dialog.

      I have downloaded the jQuery 1.8.3 version.

       

      I have implemented a javascript function:

       

       

      function showDialog(mensaje) {
                                              //newjq =  jQuery.noConflict();
                                              jQuery( "#dialog" ).dialog({
                                            autoOpen: false,
                                            width: 400,
                                            buttons: [
                                                      {
                                                                text: "Ok",
                                                                click: function() {
                                                                          jQuery( this ).dialog( "close" );
                                                                }
                                                      },
                                                      {
                                                                text: "Cancel",
                                                                click: function() {
                                                                          jQuery( this ).dialog( "close" );
                                                                }
                                                      }
                                            ]
                                  });
      
      
                                              jQuery("#dialog").dialog('open');
      
      
                                              var htmlCode = mensaje;
      
      
                                              jQuery("#dialog").html( htmlCode );
                                    }
      
      

       

      Whenever I try to call tha js function I get the following error:

       

      Uncaught TypeError: Object [object Object] has no method 'dialog'

       

      How can I make it work ? 

       

      Here is my JSF page:

       

       

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
      
      <html xmlns="http://www.w3.org/1999/xhtml"   
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:rich="http://richfaces.org/rich"
            xmlns:a4j="http://richfaces.org/a4j"
            xmlns:cu="http://colfuturo.org/demo/custom-taglib"
            >
          <h:head>
              <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
                    <link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
                          <script src="js/jquery-1.8.3.js" />
                          <script src="js/jquery-ui-1.9.2.custom.js" />
                    <script>
                              function showDialog2(mensaje) {
                                              alert(mensaje);
                  }
                                    function showDialog(mensaje) {
                                              //newjq =  jQuery.noConflict();
                                              jQuery( "#dialog" ).dialog({
                                            autoOpen: false,
                                            width: 400,
                                            buttons: [
                                                      {
                                                                text: "Ok",
                                                                click: function() {
                                                                          jQuery( this ).dialog( "close" );
                                                                }
                                                      },
                                                      {
                                                                text: "Cancel",
                                                                click: function() {
                                                                          jQuery( this ).dialog( "close" );
                                                                }
                                                      }
                                            ]
                                  });
      
      
                                              jQuery("#dialog").dialog('open');
      
      
                                              var htmlCode = mensaje;
      
      
                                              jQuery("#dialog").html( htmlCode );
                                    }
                    </script>
          </h:head>
        
                <h:body style="margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 20;">
                          <h:form>
                              <cu:custom />
                                    <h:panelGrid columns="2">
                                              <h:outputText  value="Usuario" />
                                              <h:inputText   value="#{DemoBean.usuario}" />
                                              <h:outputText  value="Contraseña" />
                                              <h:inputText   value="#{DemoBean.contrasena}" />
                                    </h:panelGrid>
                                    <a4j:commandButton value="Submit>>"  action="#{DemoBean.validar()}"  render="@form"   />
                          </h:form>
                          <div id="dialog" title="Dialog Title">
                          </div>
                </h:body>
      
      
      </html>      
      
      

       

       

      Thanks,

      Deibys