1

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.

Basit
  • 8,426
  • 46
  • 116
  • 196
  • how do you know its not including other js? what error are you getting? – Kshitij Jun 19 '12 at 08:46
  • because i saw it using firebug. No error. when i see the source using firebug then i find only jQuery.1.7.2.js included . Why ? – Basit Jun 19 '12 at 09:08
  • don't you get any error when you do `$("#myAccordion").accordion();`? Also it would be better if you keep all your scripts tags outside _#myAccordion div_ – Kshitij Jun 19 '12 at 09:12
  • I tried in the index.jsp like ` Welcome ` . I tried to include it after the above line in index.jsp but it didn't work either. – Basit Jun 19 '12 at 09:23
  • things are going wrong when i am including jQuery 1.7.2.js. I just tried ``. It worked but then i included just above the line ``. Now alert didn't show. Is this some sort of compatibility issue, as i am using jsf 1.2 with jsp? – Basit Jun 19 '12 at 10:55
  • i dont think that should be the problem...is there any javascript error you are getting? also i see you missed to add `type="text/javascript"` in few of your script tags – Kshitij Jun 19 '12 at 11:02
  • also add tags for `jquery` and `javascript` to your question – Kshitij Jun 19 '12 at 11:05
  • no the problem is with jspx. my page is index.jspx instead of index.jsp. I think this is the issue. May be xml parser causing the problem? – Basit Jun 19 '12 at 11:11
  • i don't think so that adding jQuery and javascript tags help much because those peoples i think know about the client side, its a java side issue i think. If it's a simple html then i include for sure tags of jQuery and javascripts... – Basit Jun 19 '12 at 11:13
  • yup i am right. On jsp pages it is working fine :). But how can i run jQuery on jspx? Do you know ? – Basit Jun 19 '12 at 11:16
  • well in that case everthing inside `script` tag should go in `<![CDATA[ ..... ]]>` – Kshitij Jun 19 '12 at 11:19
  • can you post an example of it? like put the script files in <![CDATA]. Thanks. – Basit Jun 19 '12 at 11:22
  • i am still not sure why your import `resources/development-bundle/jquery-1.7.2.js` not working. The only thing which seems missing is `type="text/javascript"` ...but this is just good practise – Kshitij Jun 19 '12 at 11:23
  • no i didn't use `type=text/javascript` on jsp page but it is still working there. Also my friend i have tried it with the `type=text/javascript`also, it didn't work ;) – Basit Jun 19 '12 at 11:24
  • see this link. It makes sense - http://stackoverflow.com/questions/8303050/including-js-files-jquery-in-jspx-files – Kshitij Jun 19 '12 at 11:24
  • You rock buddy. It worked when i put it in the `<![CDATA[ ..... ]]>` ;) :) – Basit Jun 19 '12 at 11:26
  • cool...i will just post it as answer so u can accept it ;) – Kshitij Jun 19 '12 at 11:27

2 Answers2

0

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>
]]>
Kshitij
  • 8,474
  • 2
  • 26
  • 34
  • but i only put the script files inside the <!CDATA>[... I means i didn't put the ` ` line inside CDATA – Basit Jun 19 '12 at 12:16
  • ideally you should put that also inside `cdata`. The reasons is well explained in the answer in this link http://stackoverflow.com/questions/8303050/including-js-files-jquery-in-jspx-files browser doesnot handles self closing script tags `` properly. whereas it works well with `` tags. Your last script has a function inside it and hence worked in your case. – Kshitij Jun 19 '12 at 12:23
0

You have to use jquery.js inside your jqueryUI in "jqueryui/external/jquery/jquery.js", and google chrome always delays so much time, you'd better not use google chrome.

张翌庸zyyong
  • 1