3 Replies - 1576 Views - Last Post: 18 June 2011 - 09:34 PM

#1 jdmimie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-June 11

JQuery custom theme does not work in JSP

Posted 18 June 2011 - 08:44 PM

Hi! I have a problem with jquery not working in JSP. I have downloaded a theme in jquery but it does not seem to work. And I do not know what is the problem why it does not seem to work. I am very new to jquery and JEE. I am actually rushing this project as the deadline is very near. I would very much appreciate your help.

this is my jsp code: (the markup is from the demo of the theme I downloaded in jquery theme roller since I meant to see how it would look first before implementing)

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
    	<link type="text/css" href="css/redmond/jquery-ui-1.8.13.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
		<script type="text/javascript">
			jQuery(function(){
				// Accordion
				jQuery('#accordion').accordion({ header: 'a' });
	
				// Tabs
				$('#tabs').tabs();

				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});

				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});

				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
			});
		</script>

		<style type="text/css">
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>	
    </head>
    <body>
       <!-- Accordion -->
		<h2 class="demoHeaders">Accordion</h2>
		<div id="accordion">
			<div>
				<a href="#">First</a>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>

			<div>
				<a href="#">Second</a>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			
			<div>
				<a href="#">Third</a>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
		</div>

		<!-- Tabs -->
		<h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
			<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
			<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
			<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
		</div>
    </body>
</html>



It would be very nice if someone would be willing to help me out. :)

Is This A Good Question/Topic? 0
  • +

Replies To: JQuery custom theme does not work in JSP

#2 maniacalsounds  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 117
  • View blog
  • Posts: 472
  • Joined: 27-June 10

Re: JQuery custom theme does not work in JSP

Posted 18 June 2011 - 08:59 PM

This code works when you take out the first two lines of the code? (The JSP stuff)? Well, why not just take it out?

Anyway, you also forgot to put semi-colons (;) at multiple places. Is this required? I'm no expert. I've just normally seen it like that before. (EX: Line 51)
Was This Post Helpful? 0
  • +
  • -

#3 jdmimie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-June 11

Re: JQuery custom theme does not work in JSP

Posted 18 June 2011 - 09:19 PM

I think the jsp stuff is required since i'm making a jsp page. :) yes it does work without the jsp but i need it to make a jsp page if i'm doing it correct that is. :)

i tried removing the jsp scriptlet on top but it still does not work. :no: it still does not display the accordion. :no:
Was This Post Helpful? 0
  • +
  • -

#4 jdmimie  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-June 11

Re: JQuery custom theme does not work in JSP

Posted 18 June 2011 - 09:34 PM

it does work as plain html though.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1