首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >JSP中没有显示JQuery数据报警器

JSP中没有显示JQuery数据报警器
EN

Stack Overflow用户
提问于 2015-08-18 08:19:18
回答 2查看 1.5K关注 0票数 2

我正在使用Struts2开发一个with应用程序,我已经创建了一个带有数据报警器的jsp。但是当我加载页面时,什么都不会发生。这个插件看起来工作得很好,并生成了数据采集器ui-datepicker-div

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

但是,当我集中处理#date文本输入时,什么都不会发生。非常奇怪的是,我用简单的HTML来设计我的jsps,数据报警器也能工作。

这是页面的源代码。

代码语言:javascript
复制
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html class=" js csstransforms3d">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><s:text name="application.title" /> | <s:property value="section.description" /> </title>
    <link href="<s:url value="/assets/css/styles.css"/>" rel="stylesheet" type="text/css">

    <link rel="shortcut icon" type="image/x-icon" href="<s:url value="/assets/img/favicon.ico" />" />
    <script type="text/javascript" src="<s:url value="/assets/js/vendors/modernizr/modernizr.custom.js"/>"></script>
</head>
<body>

    <!--Smooth Scroll-->
    <div class="smooth-overflow">
        <!--Navigation-->
        <s:include value="/views/sections/menu.jsp" />
        <!--/Navigation--> 

        <!--MainWrapper-->
        <div class="main-wrap"> 
            <!--Main Menu-->
            <s:include value="/views/sections/sidebar_left.jsp" />
            <!--/MainMenu--> 

            <!--Content Wrapper-->
            <div class="content-wrapper"> 

                <div class="page-header">
                    <h1><s:property value="section.description" /></h1>
                </div>

                <!-- Widget Row Start grid -->
                <div class="row" id="powerwidgets">
                    <div class="col-md-12 bootstrap-grid"> 
                        <s:include value="/views/sections/pages/block_messages.jsp" />
                    </div>
                </div>
                <!-- /Widgets Row End Grid--> 

                <div class="powerwidget dark-blue powerwidget-sortable" id="date-range" data-widget-editbutton="false" role="widget" style="">
                    <header role="heading">
                        <h2>Date Pickers</h2>
                    <div class="inner-spacer" role="content">
                        <form action="" id="data-pickers" class="orb-form">
                            <fieldset>
                                <section>
                                    <label class="label">Select date</label>
                                    <label class="input"> <i class="icon-append fa fa-calendar"></i>
                                        <s:textfield name="date" id="date" cssClass="hasDatepicker">
                                    </label>
                                </section>
                            </fieldset>
                            <footer>
                                <button type="submit" class="btn btn-default">submit</button>
                            </footer>
                        </form>
                    </div>
                </div>
            </div>
            <!-- / Content Wrapper --> 

        </div>
        <!--/MainWrapper--> 
    </div>
    <!--/Smooth Scroll--> 

    <!-- scroll top -->
    <s:include value="/views/sections/footer.jsp" />
    <!-- /scroll top -->

    <!--Scripts--> 
    <!--JQuery--> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/jquery/jquery.min.js" />"></script> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/jquery/jquery-dateFormat.min.js" />"></script> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/jquery/jquery-ui.min.js" />"></script> 

    <!--Forms--> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/forms/jquery.form.min.js" />"></script> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/forms/jquery.validate.min.js" />"></script>
    <!--Bootstrap--> 
    <script type="text/javascript" src="<s:url value="assets/js/vendors/bootstrap/bootstrap.min.js" />"></script> 

    <!--Main App--> 
    <script type="text/javascript" src="<s:url value="assets/js/scripts.js" />"></script>

    <s:include value="/views/sections/footer_scripts.jsp" />
    <!--/Scripts-->

</body>

在文件scripts.js中,我初始化了数据采集器

代码语言:javascript
复制
$(document).ready(function() {
    if ($('#date').length) {
        $('#date').datepicker({
            dateFormat: 'dd.mm.yy',
            prevText: '<i class="fa fa-chevron-left"></i>',
            nextText: '<i class="fa fa-chevron-right"></i>'
        });
    }
});
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-28 16:04:50

我发现了错误..。删除类hasDatepicker它工作..。

票数 0
EN

Stack Overflow用户

发布于 2015-08-18 11:30:32

定义表单标记上的所有.js文件。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32067164

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档