Usage of jQuery along with Richfaces
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
