jspjsf-1.2

jQuery UI is not loading in jsp

I want to include jQuery UI in my jsp page. I tried this

<jsp:root 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    version="2.1" >

    <jsp:directive.page 
        contentType="text/html" 
        pageEncoding="UTF-8" />

    <jsp:output
        doctype-root-element="html"
        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

    <c:url var="cssUrl" value="/resources/css/eAuditStyle.jspx"/>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <body>                       
            <f:view>                              
                <h:form>
                    <jsp:include page="topMenu.jspx" flush="true" />                  
                    <div id="menuBodyContainer" >             
                        <jsp:include page="leftMenu.jspx" flush="true" />

                        <div id="myBody">
               </h:form>             
            </f:view>          
        </body>       
    </html>   
</jsp:root>

and here is my leftmenu.jsp

<jsp:root 
    xmlns:jsp="http://java.sun.com/JSP/Page" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    version="2.1">

    <jsp:directive.page contentType="text/html" pageEncoding="UTF-8"/>

    <f:subview id="leftMenu" >           
        <div id="menu">               
            <div id="myAccordion">                  
                <h2>
                    <a href="#">Header 1</a>
                </h2>

                <div>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
                </div>

                <h2>
                    <a href="#">Header 2</a>
                </h2>

                <div>
                    Etiam tincidunt est vitae est. Ut posuere, mauris at sodales 
                </div>

                <script src="resources/development-bundle/jquery-1.7.2.js"></script>
                <script type="text/javascript" src="resources/development-bundle/ui/jquey.ui.core.js"></script>
                <script type="text/javascript" src="resources/development-bundle/ui/jquery.ui.widget.js"></script>
                <script src="resources/development-bundle/ui/jquery.ui.accordion.js"></script>
                <script>
                    $(function() {
                        $("#myAccordion").accordion();
                    });
                </script>                    
            </div> <!--end of id="myAccordion"  -->                
        </div> <!--end of menu -->       
</f:subview>

It only includes jQuery 1.7.2.js. It also include <link rel="stylesheet" href="resources/development-bundle/themes/base/jquery.ui.all.css" />. I mean path is correct. Why it is not including the other files :(. Please help.

Thank you.

Solution

  • this should work -

    <script type="text/javascript">
<![CDATA[
   $(function() {
     $("#myAccordion").accordion();
   });
]]>
</script>

    or maybe you need to put the whole thing inside cdata -

    <![CDATA[
  <script src="resources/development-bundle/jquery-1.7.2.js"></script>
  <script type="text/javascript" src="resources/development-bundle/ui/jquey.ui.core.js"></script>
  <script type="text/javascript" src="resources/development-bundle/ui/jquery.ui.widget.js"></script>
  <script src="resources/development-bundle/ui/jquery.ui.accordion.js"></script>
  <script>
    $(function() {
      $("#myAccordion").accordion();
    });
  </script>
]]>