javascript - Datepicker 在搜索弹出窗口中不起作用

标签 javascript jquery struts2 struts2-jquery

我已经使用 Struts2 和它的 JQuery 插件工作了大约一个星期,但我有点不知所措。

我尝试做的最后一件事是在页面上显示的 jqGrid 中按日期执行搜索。为此,我关注了this tutorial here.

问题是它不起作用,因为当我单击应该弹出日期选择器的搜索字段时,它不会弹出任何内容。 我调试了 javascript 代码,发现当它尝试调用 datepicker() 时函数,出现错误“Uncaught TypeError: Undefined is not a function”。

我不确定为什么会这样,因为我正在使用 Struts2-jquery-plugin 3.7.1 .我在下面发布我的 JSP 代码(我省略了所有与问题无关的网格行):

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<sj:head jqueryui="true" jquerytheme="south-street" locale="es" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
 datePick = function(elem) {
        $(elem).datepicker({
            firstDay : 1
        });
        $('#ui-datepicker-div').css("z-index", 2000);
}
</script>
<title>Testing</title>
</head>
<body>
<s:url var="remoteurl" action="reservationList"/>
<div id="grid">
    <sjg:grid
        id="reservationsGrid"
        caption="%{getText('reservationTable.title')}"
        dataType="json"
        href="%{remoteurl}"
        pager="true"
        gridModel="gridModel"
        rowList="10,15,30"
        rowNum="15"
        navigator="true"
        navigatorSearch="true"
        autowidth="true"
        navigatorSearchOptions="{multipleSearch:true, closeAfterSearch:true}">
        ...
        <sjg:gridColumn name="date" index="date" title="Date" search="true" formatter="date" sortable="true"  formatoptions="{newformat : 'd/m/Y H:i', srcformat : 'Y-m-d H:i'}" searchoptions="{sopt:['eq','lt','le','gt','ge'], dataInit:datePick}"/>
       ...
    </sjg:grid>

 </div>
</body>
</html>

我是否遗漏了任何导入/引用或类似的东西?


更新
最近我发现了一个黑客,它告诉我这个问题与日期选择器的导入/引用有关:

我所做的只是在我的 JSP 中添加一个新标签:
<sj:datepicker style="display:none" disabled="true"></sj:datepicker>

通过这样做,我想我是在强制框架自动导入和初始化一个日期选择器,所以它可以工作,但这不是我正在寻找的解决方案。

那么我的问题是: 如何导入/引用和初始化日期选择器?

最佳答案

默认 <sj:head>不会加载所有 jQuery ui 资源,而是按需加载。当您添加 <sj:datepicker>标记它还加载了所需的资源,并且您的脚本能够运行。

为了一次加载所有资源设置loadAtOnce <sj:head> 的属性标记为 true .

<sj:head jqueryui="true" loadAtOnce="true"
         jquerytheme="south-street" locale="es" />

关于javascript - Datepicker 在搜索弹出窗口中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27292484/

相关文章:

javascript - 通过 javascript api 调用(不是节点)获取 Stripe 客户信息,如何?

javascript - jQuery/JS 等待图像宽度调整

jsp - 如何在 Struts 2 操作类中检索复选框值?

struts2 - 停止 sj :datepicker from opening Struts2

javascript - 问题滑入/滑出 JQuery

javascript - 我如何使用 JavaScript 判断 DOM 对象是否在窗口之外?

jQuery - 如何检查元素是数组还是单个元素

java - 使用 Struts 2 遍历 HashMap<String, ArrayList<String>>

javascript - 状态 Vuex 不能与 Nuxt.js 问题一起正常工作

jquery - 自定义选择选项的外观