jQuery UI 未在 jsp 中加载答案

【问题标题】：jQuery UI is not loading in jspjQuery UI 未在 jsp 中加载
【发布时间】：2012-06-19 08:41:51
【问题描述】：

我想在我的 jsp 页面中包含 jQuery UI。我试过这个

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

这是我的 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>

它只包括 jQuery 1.7.2.js。它还包括<link rel="stylesheet" href="resources/development-bundle/themes/base/jquery.ui.all.css" />。我的意思是路径是正确的。为什么它不包括其他文件:(。请帮忙。

谢谢。

【问题讨论】：

你怎么知道它不包括其他js？你遇到了什么错误？
因为我是用萤火虫看到的。没有错误。当我看到使用 firebug 的源代码时，我发现只包含 jQuery.1.7.2.js。为什么？
当您执行$("#myAccordion").accordion(); 时不会出现任何错误吗？如果您将所有脚本标签保留在 #myAccordion div 之外会更好
我在 index.jsp 中试过 <head> <title>Welcome</title> <link rel="stylesheet" href="${cssUrl}" type="text/css" /> <link rel="stylesheet" href="resources/development-bundle/themes/base/jquery.ui.all.css" /> </head> 。我试图在 index.jsp 中的上述行之后包含它，但它也不起作用。
当我包含 jQuery 1.7.2.js 时出现问题。我刚试过<script>alert("Basit")</script>。它起作用了，但后来我在<script src="resources/development-bundle/jquery-1.7.2.js"></script><script>alert("Basit")</script> 的上方添加了。现在警报没有显示。这是某种兼容性问题，因为我正在使用带有 jsp 的 jsf 1.2？

标签： jsp jsf-1.2

【解决方案1】：

这应该可行 -

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

或者您可能需要将整个内容放入 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>
]]>

【讨论】：

但我只将脚本文件放在 [... 我的意思是我没有将 <script> $(function() { $("#myAccordion").accordion(); }); </script> 行放在 CDATA 中
理想情况下，您也应该将它放在cdata 中。原因在此链接stackoverflow.com/questions/8303050/… 的答案中得到了很好的解释，浏览器没有正确处理自关闭脚本标签<script />。而它适用于<script></script> 标签。您的最后一个脚本内部有一个函数，因此适用于您的情况。

【解决方案2】：

你必须在你的jqueryUI里面“jqueryui/external/jquery/jquery.js”中使用jquery.js，而且google chrome总是延迟这么多时间，你最好不要使用google chrome。

【讨论】：