Usage of jQuery along with Richfaces
deibys Dec 20, 2012 10:13 AMHello 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