Forum:

JQuery custom theme does not work in JSP

Greenhorn

Posts: 1

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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>

<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>

<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.

Bear Bibeault

Sheriff

Posts: 67750

173

I like...

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

You are using page-relatiove URLs. Bad idea.

Your resources should be addressed using server-relative URLs that begin with the context path. See the JspFaq.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky