Datepicker not working inside search popup
I've been working with Struts2 and the jQuery plugin for a week now and I'm a little lost.
The last thing I tried to do was implement a date search in the jqGrid that I am displaying on the page. For this, I followed this tutorial here .
The thing is, it doesn't work because when I click on the search box that should pop out of the datepicker, it doesn't pop up anything. I was debugging the javascript code and found that when it tries to call a function datepicker()
, an error occurs: "Uncaught TypeError: Undefined is not a function".
I'm not sure why this is happening when I use Struts2-jquery-plugin 3.7.1
. I am posting my JSP code below (I missed all grid lines that are not relevant to the question):
<%@ 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>
Am I missing any imports / links or things like this?
UPDATE
I recently found a hack and it told me the problem was with the import / reference of the datepicker:
All I did was add a new tag inside my JSP:
<sj:datepicker style="display:none" disabled="true"></sj:datepicker>
Having done this, I am assuming that I am forcing the framework to automatically import and initialize the datepicker, and so it works, but this is not the solution I am looking for.
So my question is: How to import / reference and initialize the datepicker?
source to share
By default it <sj:head>
does NOT load all jQuery ui resources, but loads on demand. When you added the tag <sj:datepicker>
, it also loaded the required resources and your script was able to run.
To load all assets at once, set the loadAtOnce
tag attribute <sj:head>
to true
.
<sj:head jqueryui="true" loadAtOnce="true"
jquerytheme="south-street" locale="es" />
source to share