My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for

HeadTag  
The "head" tag renders required JavaScript code and necessary css styles.
Phase-Implementation
Updated Jul 14, 2010 by johgep

Introduction

The "head" tag renders required JavaScript code to configure jQuery and is required in order to use any of the tags included in the jQuery plugin.

Samples

Head tag for base AJAX calls

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head/>
  </head>
  <body>
  </body>
</html>

Head tag for AJAX calls, Effects and Widgets with Default Indicator

The "locale" attribute configures jQuery locale for datepicker. Default is "en" you can use all locales that are bundled with jQuery. e.g. "de, "fr", "ja", ...

The default indicator is visible at every ajax request.

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head locale="de" jqueryui="true" defaultIndicator="myDefaultIndicator"/>
  </head>
  <body>
    <img id="myDefaultIndicator" src="images/ajax-loader.gif" alt="Loading..." style="display:none"/>
  </body>
</html>

Themes

Base Themes

Built in themes from Plugin

  • black-tie
  • blitzer
  • cupertino
  • dark-hive
  • dot-luv
  • eggplant
  • excite-bike
  • flick
  • hot-sneaks
  • humanity
  • le-frog
  • mint-choc
  • overcast
  • pepper-grinder
  • redmond
  • smoothness
  • south-street
  • start
  • sunny
  • swanky-purse
  • trontastic
  • ui-darkness
  • ui-lightness
  • vader

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head locale="de" jqueryui="true" jquerytheme="redmond"/>
  </head>
  <body>
  </body>
</html>

Custome Themes

Create and Download your own Theme with jQuery ThemeRoller

  1. Create a folder in your WebRoot path template/themes/mytheme
  2. Extract downloaded theme and switch into the css folder
  3. Rename jquery-ui-x.x.x.custom.css to jquery-ui.css
  4. Copy jquery-ui.css and images folder into the template/themes/mytheme folder

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <s:url id="context" value="/" />
    <sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="%{context}template/themes"/>
  </head>
  <body>
  </body>
</html>

Attributes

Name

Required

Default

Evaluated

Type

Description

ajaxcache false false false Boolean If set to false it will force the pages that you request to not be cached by the browser.
ajaxhistory false false false Boolean If set to true it will enable history and bookmarking for AJAX content and jQuery UI Tabs.
compatibility false false String Enable Compatibility for older jQuery Versions. e.g. 1.3
compressed false true false Boolean use compressed version of jquery and jquery-ui
customBasepath false false String base path for custom jQuery designs
debug false false false Boolean enable debug logging
defaultErrorText false false String The default error text for all AJAX actions
defaultIndicator false false String The default indicator for all AJAX actions
defaultLoadingText false false String The default loading text for all AJAX actions
jquerytheme false smoothness false String jQuery UI theme
jqueryui false true false Boolean enable jQuery UI Scripts
loadAtOnce false false false Boolean do not use the on demand load for jquery ui resources
loadFromGoogle false false false Boolean Load JavaScript from google content distribution network
locale false en or struts.local value false String import jQuery i18n scripts.
scriptPath false #your context root#/struts/ false String path to the JavaScript ressources

Comment by kean...@gmail.com, May 28, 2010

hi can i get a better example of using a custom theme specially one where there is a namespace with it. it would really help so much thanks

Comment by kean...@gmail.com, May 30, 2010

hi i figure it out to remove the namespace change customBasepath="template/themes" to customBasepath="/project name/template/themes"

Comment by i060...@gmail.com, Jan 24, 2011

i have made loadFromGoogle = true in head tag. All files are being downloaded from Google CDN except the file jquery.struts2.min.js. Any Idea wht it is happening?

Comment by project member johgep, Jan 24, 2011

jquery.struts2.min.js is not hosted at google so it loads from your webapp.

Comment by saurabhk...@tcs.com, Apr 9, 2011

Hi I have a problem with autocompletor.

Prob def: when I include two jsp both having autocompletor with javascript function in a third page then javascript function of only second page works. first page javascript function does not work.
please tell me how to write my code so that both page's javascript function will work.

thanks in advance to all those deligates who even read my comments..

Comment by i060...@gmail.com, May 2, 2011

I want to load the contents from Google CDN but in case the internet is down, i want to load the files from local repository. How can I achieve this using sj:head

Comment by mahendr...@gmail.com, May 18, 2011

When I looked at birebug I see http://localhost:8282/struts/js/plugins/jquery.form.min.js With response headers Server Apache-Coyote/1.1 Pragma no-cache Cache-Control no-cache Expires -1 Content-Type text/javascript;charset=UTF-8 Content-Language en-US Transfer-Encoding chunked Date Wed, 18 May 2011 12:28:23 GMT

This means its not getting cached. I have added CachingFilter? for .js but still it not showing me 304 HTTP status its still showing 200 OK ... how can I fix this ?

Comment by kimjh...@gmail.com, Jan 17, 2012

Hi what about jquery mobile's Custome Themes..?

Comment by ilsh2...@gmail.com, Mar 27, 2012

when i use many struts tags, there are one problem, j-query lib was load many time. How can i fix it ?

Comment by niravsav...@gmail.com, Mar 28, 2012

We are having a weird issue. We are using the datepicker on a JSP page and we have configured the sj:head correctly as below: <head>

<sj:head jqueryui="true" jquerytheme="cupertino"/>

</head> The usage of datepicker is as follows: <sj:datepicker name="dateOfBirth" displayFormat="mm/dd/yy" id="datepicker1" yearRange="-100:-16" buttonImageOnly="true" changeYear="true" changeMonth="true" maxDate="-16y" minDate="-100y" size="10"/> The datepicker worked fine on our Dev servers and also in Production Servers. But 3 days after going live, suddenly there is a random JS loading issue. When the page loads, the datepicker image does not show up (and does not work) and there are Javascript error in JS console. Checked through firebug. On investigating, found that the root cause of the Javascript error is that the file jquery-1.5.2.min.js is not fully loaded. we found this by checking the source of this script by invoking https://<Ourwebsite Name>/struts/js/base/jquery-1.5.2.min.js But this happens very randomly. Some requests to this page will work fine. For some other requests, the datepicker breaks. Even for a same user, Sometimes doing a <Ctrl+F5> randomly toggles the behaviour.

Comment by cadenas....@gmail.com, May 15, 2012

Hi when i put sj:head tag in my jsp the others jquery libraries dont work anymore... what can i do?


Sign in to add a comment
Powered by Google Project Hosting