Skip to content

AnchorTag

Jump to bottom Edit New page
Johannes Geppert edited this page Jul 3, 2015 · 2 revisions

Introduction

A tag that creates an HTML element, that when clicked makes an asynchronous request(XMLHttpRequest). The url attribute must be build using the <s:url/> tag.

Samples

AJAX call to result div

	<%@ taglib prefix="s" uri="/struts-tags"%>
	<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
	<html>
	  <head>
		<sj:head/>
	  </head>
	  <body>
		<div id="div1">Div 1</div>
		<s:url var="ajaxTest" value="/AjaxTest.action"/>

		<sj:a id="link1" href="%{ajaxTest}" targets="div1">
		  Update Content
		</sj:a>
	  </body>
	</html>

AJAX call to multiple result divs with Highlight Effects

For effects, set jqueryui="true" in the sj:head tag.

Supported Effects are

  • bounce - Bounces the element vertically or horizontally n-times.
  • highlight - Highlights the background with a defined color.
  • pulsate - Pulsates the opacity of the element multiple times.
  • shake - Shakes the element vertically or horizontally n-times.
  • size - Resize an element to a specified width and height.
  • transfer - Transfers the outline of an element to another.

For effectOptions please look at the jQuery UI Effects API

	<%@ taglib prefix="s" uri="/struts-tags"%>
	<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
	<html>
	  <head>
		<sj:head jqueryui="true"/>
	  </head>
	  <body>
		<div id="div1">Div 1</div>
		<div id="div2">Div 2</div>
		<s:url var="ajaxTest" value="/AjaxTest.action"/>

		<sj:a id="link1" href="%{ajaxTest}" targets="div1, div2"  effect="highlight" effectOptions="{ color : '#222222' }" effectDuration="3000">
		  Update Content
		</sj:a>
	  </body>
	</html>

AJAX form submission

	<%@ taglib prefix="s" uri="/struts-tags"%>
	<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
	<html>
	  <head>
		<sj:head/>
	  </head>
	  <body>
		<s:form id="form" action="AjaxTest">
		  <input type="textbox" name="data">   
		</s:form>

		<sj:a formId="form" targets="div1">Submit form</sj:a>
	  </body>
	</html>

AJAX call to result div with events

	<%@ taglib prefix="s" uri="/struts-tags"%>
	<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
	<html>
	  <head>
		<sj:head/>
		<script type="text/javascript">
		   $.subscribe('before', function(event,data) {
			   alert('Before request ');
			   $('#result').html('Loading ...');
		   });
		   $.subscribe('complete', function(event,data) {
			   $('#result').append('<br/><br/><strong>Completed request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
		   });
		   $.subscribe('errorState', function(event,data) {
			   $('#result').html('<br/><br/><strong>Error request '+event.originalEvent.request.statusText+' completed with '+event.originalEvent.status+ '.</strong><br/>Status: '+event.originalEvent.request.status);
		   });
		</script>        
	  </head>
	  <body>
		<div id="result">Result Div</div>
		<s:url var="ajax" value="/ajax1.action"/>
		
		<sj:a id="ajaxlink" href="%{ajax}" indicator="indicator" targets="result" onClickTopics="before" onCompleteTopics="complete" effect="pulsate" cssClass="buttonlink ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh"></span>
		  Run AJAX Action
		</sj:a>
		<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>    
		<br/>
		<br/>
		<sj:a id="ajaxlink2" href="file-does-not-exist.html" indicator="indicator2" targets="result" onClickTopics="before" onCompleteTopics="complete" onErrorTopics="errorState" effect="pulsate" effectDuration="1500" cssClass="buttonlink ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh"></span>
		  Run AJAX Error Action
		</sj:a>
		<img id="indicator2" src="images/indicator.gif" alt="Loading..." style="display:none"/>    
	  </body>
	</html>

Attributes

Name

Required

Default

Evaluated

Type

Description
accesskey false false String Set the html accesskey attribute on rendered html element
button false false false Boolean jQuery UI Button
buttonIcon false false String Icons to display. The primary icon is displayed on the left of the label text. Value must be a classname (String), eg. ui-icon-gear.
buttonIconSecondary false false String Icons to display. The secondary icon is displayed on the right of the label text. Value must be a classname (String), eg. ui-icon-gear.
buttonText false true false Boolean Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.
clearForm false false Boolean Clear all form fields after successful submit when using formIds. Default: false
cssClass false false String The css class to use for element
cssErrorClass false false String The css error class to use for element
cssErrorStyle false false String The css error style definitions for element to use
cssStyle false false String The css style definitions for element to use
dataType false false String Type of the result. e.g. html, xml, text, json, ...
disabled false false String Set the html disabled attribute on rendered html element
effect false none false String Perform a effect on the elements specified in the 'targets' attribute. e.g. bounce, highlight, pulsate, shake, size or transfer. See more details at http://docs.jquery.com/UI/Effects
effectDuration false 2000 false String Duration of effect in milliseconds. Only valid if 'effect' attribute is set
effectMode false none false String The Effect Mode. show, hide, toggle, none
effectOptions false false String jQuery options for effect, eg 'color : #aaaaaa' for the highlight effect or 'times : 3' for the bounce effect. Only valid if 'effect' attribute is set. See more details at http://docs.jquery.com/UI/Effects
errorElementId false false false String This should provide the id of the element into which the error text will be placed when an error ocurrs loading the container. If 'errorTest' is provided, that wil be used, otherwise the ajax error message text wil be used.
errorPosition false false String Define error position of form element (top|bottom)
errorText false false false String The text to be displayed on load error. If 'errorElement' is provided, this will display the error in the elemtn (if existing), if not, it will display the error as the contents of this container
formIds false false String Comma delimited list of form ids for which to serialize all fields during submission when this element is clicked (if multiple forms have overlapping element names, it is indeterminate which will be used)
href false false String The url to be use when this element is clicked
id false false String HTML id attribute
iframe false false Boolean Boolean flag indicating whether the form should always target the server response to an iframe when using formIds. This is useful in conjuction with file uploads. Default: false
indicator false false String If loading content into a target, Id of element that will be displayed during loading and hidden afterwards (will override settings for the target container)
javascriptTooltip false false false Boolean Use JavaScript to generate tooltips
key false false String Set the key (name, value, label) for this particular component
label false false String Label expression used for rendering an element specific label
labelSeparator false : false String String that will be appended to the label
labelposition false false String Define label position of form element (top/left)
listenTopics false false String The comma separated list 'listenTopics' is the list of topic names that is used to trigger a request.
loadingText false false String If loading content into a target, The text to be displayed during load (will be shown if any provided, will override settings for the target container)
name false false String The name to set for element
onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics false false String A comma delimited list of topics that published always
onBeforeTopics false false String Topics that are published before a load
onBlurTopics false false String A comma delimited list of topics that published when the element is blured
onChangeTopics false false String A comma delimited list of topics that published when the element changed
onClickTopics false false String A comma delimited list of topics that published when the element is clicked
onCompleteTopics false false String A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided)
onDisableTopics false false String A comma delimited list of topics that published when the element disabled
onEffectCompleteTopics false false String A comma delimited list of topics that published when an effect is completed
onEnableTopics false false String A comma delimited list of topics that published when the element is enabled
onErrorTopics false false String A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided)
onFocusTopics false false String A comma delimited list of topics that published when the element is focused
onSuccessTopics false false String A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided)
onblur false false String Set the html onblur attribute on rendered html element
onchange false false String Set the html onchange attribute on rendered html element
onclick false false String Set the html onclick attribute on rendered html element
ondblclick false false String Set the html ondblclick attribute on rendered html element
onfocus false false String Set the html onfocus attribute on rendered html element
onkeydown false false String Set the html onkeydown attribute on rendered html element
onkeypress false false String Set the html onkeypress attribute on rendered html element
onkeyup false false String Set the html onkeyup attribute on rendered html element
onmousedown false false String Set the html onmousedown attribute on rendered html element
onmousemove false false String Set the html onmousemove attribute on rendered html element
onmouseout false false String Set the html onmouseout attribute on rendered html element
onmouseover false false String Set the html onmouseover attribute on rendered html element
onmouseup false false String Set the html onmouseup attribute on rendered html element
onselect false false String Set the html onselect attribute on rendered html element
openDialog false false String id of dialog that will be opened when clicked.
openDialogTitle false false String Set the title of a dialog opened by openDialog or openDialogTopics
openTemplate false false String Set template to use for opening the rendered html.
replaceTarget false false false Boolean Set to true if the target should be replaced or false if only the target contents should be replaced when using formIds.
requestType false POST false String Type of the AJAX Request. POST, GET, PUT
requiredLabel false false false Boolean If set to true, the rendered element will indicate that input is required
requiredPosition false false String Define required position of required form element (left|right)
resetForm false false Boolean Reset the form after successful submi twhen using formIds. Default: false
tabindex false false String Set the html tabindex attribute on rendered html element
targets false false String A comma separated list of ids of container elements to load with the contents from the result of this request
template false false String The template (other than default) to use for rendering the element
templateDir false false String The template directory.
timeout false 3000 false Integer jQuery options for timeout. Default is 3000
title false false String Set the html title attribute on rendered html element
tooltip false false String Set the tooltip of this particular component
tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips
tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath false false String Icon path used for image that will have the tooltip
validate false false false Boolean Enable client AJAX validation
validateFunction false false String A function that handle the client validation result. eg.: myValidation(form, errors)
value false false String Preset the value of input element.

Struts Project Page - Showcase - Showcase Grid - Download - Developer Blog - Developer News

Clone this wiki locally