2014-12-04 3 views
3

Я работал с Struts2, и это плагин JQuery в течение недели, и я немного потерялся.Datepicker не работает внутри поиска popup

Последнее, что я пытался сделать, это реализовать поиск по дате в jqGrid, который я показываю на странице. Для этого я следовал this tutorial here.

Дело в том, что это не работает, потому что, когда я нахожусь на поисковом поле, которое должно вытолкнуть datepicker, оно ничего не выскочит. Я отлаживал код javascript и обнаружил, что когда он пытается вызвать функцию datepicker(), возникает ошибка: «Uncaught TypeError: Undefined не является функцией».

Я не уверен, почему это происходит, когда я использую 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> 

я упускаю какой-либо импорт/ссылку или такую ​​вещь?


UPDATE
Недавно я нашел хак, и он говорит мне, что этот вопрос относится к Datepicker по импорту/ссылка:

Все, что я сделал, добавив новый тег внутри моей JSP :
<sj:datepicker style="display:none" disabled="true"></sj:datepicker>

делая это, я думаю, я принуждая рамки для автоматического импорта и инициализировать DatePicker, и поэтому она работает, но это не решение, я искал.

Итак, мой вопрос: Как я могу импортировать/ссылаться и инициализировать datepicker?

+0

попробуйте заменить '$' на jQuery. чтобы проверить, нет ли datepicker, запустите 'jQuery.fn.datepicker' в консоли. –

+0

@CerlinBoss Вы могли бы прояснить замену, которую вы предлагаете? Я запустил консоль jQuery.fn.datepicker'in, но, к сожалению, он возвращает undefined. – JorgeGRC

+0

, что означает, что вы не включили библиотеку для datepicker. –

ответ

2

По умолчанию <sj:head> НЕ загружает все ресурсы jQuery ui, а загружается по требованию. Когда вы добавили тег <sj:datepicker>, он также загрузил необходимые ресурсы, и ваш скрипт смог запустить.

Чтобы загрузить все ресурсы сразу, установите loadAtOnce атрибут <sj:head> тег на true.

<sj:head jqueryui="true" loadAtOnce="true" 
     jquerytheme="south-street" locale="es" /> 
Смежные вопросы