Datepicker isn't working inside search popup

Question

I've been working with Struts2 and it's JQuery plugin for around a week and I'm a little bit lost.

Last thing I tried to do was to implement searches by date in a jqGrid I'm displaying on a page. For this, I followed this tutorial here.

The thing is it's not working because when I click on the searchfield which is supposed to pop out the datepicker, it won't pop out anything. I've debugged the javascript code and found that when it tries to call the datepicker() function, an error comes up saying "Uncaught TypeError: Undefined is not a function" .

I'm not sure why this happens as I'm using Struts2-jquery-plugin 3.7.1. I'm posting my JSP code below (I've omitted all the grid rows that don't relate 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 import/reference or such a thing?

UPDATE
Recently I've found a hack, and it's telling me that the issue relates to the datepicker's import/reference:

All I did was adding a new tag inside my JSP:
<sj:datepicker style="display:none" disabled="true"></sj:datepicker>

By doing this, I guess I'm forcing the framework to automatically import and initialize a datepicker, and so it works, but it's not the solution I'm searching for.

So my question then is: How can I import/reference and initialize the datepicker?

try replacing `$` with jQuery. to check if datepicker is there are not, run `jQuery.fn.datepicker` in console. — Cerlin, Dec 04 '14 at 12:16
@CerlinBoss could you please clarify the replace you suggest? I ran `jQuery.fn.datepicker`in console but sadly it returns undefined. — JorgeGRC, Dec 04 '14 at 12:23
@CerlinBoss Forgive me as I'm new to webdevelopment and Maven, but I've included the `struts2-jquery-plugin` dependency in my project as follows: ` com.jgeppert.struts2.jquery struts2-jquery-plugin 3.7.1 ` Isn't this enough? Should I manually search for the jquery-datepicker dependency then? — JorgeGRC, Dec 04 '14 at 12:37
by default jquery doesn't support datepicker. datepicker functionality is in jquery ui. i am also not sure about `Maven`. — Cerlin, Dec 04 '14 at 12:41
Many thanks for your reply, @AleksandrM . It seems to work with the solution you replied, please post it as an answer and I'll accept it :). I've searched the documentation and read what loadAtOnce does [HERE](https://code.google.com/p/struts2-jquery/wiki/HeadTag#Attributes) but still don't understand it.. Could you please explain a bit about it? — JorgeGRC, Dec 11 '14 at 08:28
@AleksandrM okay I did some research and finally understood what `loadAtOnce`stands for, but if you want to include it to make your answer more fulfilling it would be more interesting for the community in my opinion :) — JorgeGRC, Dec 11 '14 at 09:06

score 2 · Accepted Answer · answered Dec 11 '14 at 19:36

By default <sj:head> will NOT load all jQuery ui resources rather they are loaded on demand. When you've added a <sj:datepicker> tag it also loaded needed resources and your script was able to run.

In order to load all resources at once set loadAtOnce attribute of <sj:head> tag to true.

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

Datepicker isn't working inside search popup

1 Answers1