Forum:

JQuery not working in JSF 2.0

Greenhorn

Posts: 4

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am trying to use JQuery full calendar ( http://arshaw.com/fullcalendar/ ) in my xhtml page that looks like this:

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core">
     
<h:head>
<title>Sign in</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel='stylesheet' type='text/css' href='./fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='./fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='./jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='./jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='./fullcalendar/fullcalendar.min.js'></script>

$j(document).ready(function() {

</script>
<style type='text/css'>

body {
	margin-top: 40px;
	text-align: center;
	font-size: 14px;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	}

#calendar {
	width: 900px;
	margin: 0 auto;
	}

</style>
</h:head>

<h:body>
<div id='calendar'></div>
</h:body

>
</html>

I have defined I am trying to use JQuery full calendar ( http://arshaw.com/fullcalendar/ ) in my xhtml page that looks like this:

[code=java]
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
<title>Sign in</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel='stylesheet' type='text/css' href='./fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='./fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='./jquery/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='./jquery/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='./fullcalendar/fullcalendar.min.js'></script>

<script type='text/javascript'>
$j = jQuery.noConflict(); so there is no conflict, I have also tried putting .js files in resource files and loading them with <h:outputScript> but no sucess.

I am using rich faces 4.0 and JSF 2.0. I have no exceptions or errors, but the page is just no loading, ie I don't have calendar in appropriate 'calendar' div tag.
Can anyone suggest solution for this problem?

Rehab Bozic

Greenhorn

Posts: 4

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Ok, sorry for that, the actual page looks like this:

<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core">
     
<h:head>
<title>Sign in</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel='stylesheet' type='text/css' href='./fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='./fullcalendar/fullcalendar.print.css' media='print' />
<h:outputScript  name="./js/jquery/jquery-1.5.2.min.js" target="head"/>  
<h:outputScript  name="./js/jquery/jquery-ui-1.8.11.custom.min.js" target="head"/>  
<h:outputScript  name="./jscal/fullcalendar/fullcalendar.min.js" target="head"/>

</script>
<style type='text/css'>

body {
	margin-top: 40px;
	text-align: center;
	font-size: 14px;
	font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
	}

#calendar {
	width: 900px;
	margin: 0 auto;
	}

</style>
</h:head>

<h:body>
Brbanka
<div id='calendar'></div>
</h:body>
</html>

Tim Holloway

Saloon Keeper

Posts: 28806

212

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

RichFaces has a pretty powerful calendar control itself. If you can use it, that should be less trouble.

Otherwise, you might want to look at the RichFaces <a4j:script > element, which is designed to allow references to JavaScript resources in a JSF-friendly way.

RichFaces uses jQuery internally, and it mostly works well with user-supplied jQuery code as well, but there are cases (and versions) where problems have come up. so it's worth doing a web search.

Experience keeps a dear School, but Fools will learn in no other.
---
Benjamin Franklin - Postal official and Weather observer

You showed up just in time for the waffles! And this tiny ad:

Clean our rivers and oceans from home

https://www.kickstarter.com/projects/paulwheaton/willow-feeders