Resizable for Divs
Drag and Drop for Divs
Selectable for Divs
Sortable for Divs

Form Elements

Tasks

Links

Developer Guide

SubmitTag

Renders a submit button that can submit a form asynchronously.
Phase-Implementation

Updated Jun 29, 2011 by johgep

Introduction
Samples

AJAX form submission
AJAX form submission out of the form
AJAX from submit with Highlight Effects and Events

Attributes

Introduction

A tag that renders a submit button that can submit a form asynchronously.

Samples

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">
      <sj:submit value="Submit Form" />
    </s:form>
  </body>
</html>

AJAX form submission out of the form

<%@ 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:submit formId="form" value="Submit Form" />
  </body>
</html>

AJAX from submit with Highlight Effects and Events

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"/>
    <script type="text/javascript">
    $.subscribe('before', function(event,data) {
      var fData = event.originalEvent.formData;
         alert('About to submit: \n\n' + fData[0].value + ' to target '+event.originalEvent.options.target+' with timeout '+event.originalEvent.options.timeout );
      var form = event.originalEvent.form[0];
      if (form.echo.value.length < 2) {
          alert('Please enter a value with min 2 characters');
          // Cancel Submit comes with 1.8.0
          event.originalEvent.options.submit = false;
      }
    });
    $.subscribe('complete', function(event,data) {
   	 alert('status: ' + event.originalEvent.status + '\n\nresponseText: \n' + event.originalEvent.request.responseText + 
     '\n\nThe output div should have already been updated with the responseText.');
    });
    $.subscribe('errorState', function(event,data) {
        alert('status: ' + event.originalEvent.status + '\n\nrequest status: ' +event.originalEvent.request.status);
    });
    </script>       
  </head>
  <body>
    <s:form id="formevent" action="echo" theme="simple" cssClass="yform">
        <fieldset>
            <legend>AJAX Form</legend>
	        <div class="type-text">
	            <label for="echo">Echo: </label>
	            <s:textfield id="echo" name="echo" value="Hello World!!!"/>
	        </div>
	        <div class="type-button">
	            <sj:submit 	targets="result" 
	            			value="AJAX Submit" 
	            			timeout="2500" 
	            			indicator="indicator" 
	            			onBeforeTopics="before" 
	            			onCompleteTopics="complete" 
	            			onErrorTopics="errorState"  
	            			effect="highlight" 
	            			effectOptions="{ color : '#222222' }" 
	            			effectDuration="3000"/>
	        </div>
        </fieldset>
    </s:form>

    <img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>    
    
    <s:form id="formeventerror" action="file-does-not-exist.html" theme="simple" cssClass="yform">
        <fieldset>
            <legend>AJAX Form with Error Result</legend>
            <div class="type-text">
                <label for="echo">Echo: </label>
                <s:textfield id="echo" name="echo" value="Hello World!!!"/>
            </div>
            <div class="type-button">
                <sj:submit 	targets="result" 
                			value="AJAX Submit with Error" 
                			timeout="2500" 
                			indicator="indicator" 
                			onBeforeTopics="before" 
                			onCompleteTopics="complete" 
                			onErrorTopics="errorState" 
                			effect="highlight" 
                			effectOptions="{ color : '#222222' }" 
                			effectDuration="3000"/>
            </div>
        </fieldset>
    </s:form>
  </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. 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.

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

formFilter false false String Function name used to filter the fields of the form.

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. 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

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.

openTemplate false false String Set template to use for opening the rendered html.

parentTheme false false String The parent theme. Default: value of parent form tag or simple if no parent form tag is available

replaceTarget false false false Boolean Set to true if the target should be replaced or false if only the target contents should be replaced.

requestType false POST false String Type of the AJAX Request. POST, GET, PUT

required 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 submit. Default: false

src false false String Supply an image src for image type submit button. Will have no effect for types input and button.

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

type false input false String The type of submit to use. Valid values are input, button and image.

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.

Comment by eman.nollase@gmail.com, Jun 22, 2010

Hi,

I try to integrate the ajax form validation but i have encounter some problem. I am new to struts2 and please bear with me if ask stupid question.

i have a form like this:

<s:form action="create" method="post" theme="qxhtml"

cssClass="grey-bck">

.................

<sj:submit

targets="result" button="true" validate="true" effect="pulsate" value="Submit" indicator="indicator" />

</s:form>

observation: 1. it complains that submit-close.ftl cannot be found. im WEB-INF/classes/template, i have two folders /jquery and qxhtml.

- i copied the submit-close.ftl from jquery folder to qxhtml folder

2. when i do that, it complains about stackoverflow exception

any pointer on how i do the integration?

thanks. cheers.

Comment by project member johgep, Jun 23, 2010

1. When not using the Struts2 xhtml or css_xhtml theme, you need a custom validation function like in the showcase.

2. I don't know the qxhtml theme, but you can try to set the parentTheme for the sj:submit tag.

<sj:submit targets="result" button="true" parentTheme="qxhtml" validate="true" effect="pulsate" value="Submit" indicator="indicator" />

3. Please use for Questions the User Group and not this Comment Section.

Comment by jos...@gmail.com, Sep 21, 2010

sshb

Comment by vito.mih...@gmail.com, Oct 31, 2010

Hi,

I would like to know how to block UI when the user submits an action. Is there any example?

I tried the following: 1. <sj:submit

onBeforeTopics="before"

2. $.subscribe('before', function(event,data) {

alert("loading"); $.blockUI('<h1><img src="ajax-loader.gif" /> Saving...</h1>');

});

3.I found out that blockUI does not work when I use <sj:head jqueryui="true"/>

Any idea?

Regard

Comment by project member johgep, Nov 1, 2010

blockUI is not part of jquery ui project. so you need to include the necessary scripts after the sj:head tag.

Comment by whs.harr...@gmail.com, Dec 27, 2010

first,my English is poor,But i have a question. if using xml validation and <sj:submit>,how to complete javascript validation. pls help me,thx. i'm an chinese boy.

Comment by whs.harr...@gmail.com, Dec 28, 2010

为什么没有人回复一下哦？

Comment by jflefeb...@sopragroup.com, Feb 21, 2011

sj:submit not render buttonIcon Example : <sj:submit targets="formResult" value="Test"

buttonIcon="ui-icon-refresh" button="true" />

And if button="false" no class set

Comment by project member johgep, Feb 22, 2011

please use the user groups for questions.

http://groups.google.com/group/struts2-jquery?hl=en

yes the buttonIcon attribute has no effect on submit buttons. but you can use a <sj:a tag instead. just use the formIds attribute to submit the form.

Comment by vuddagir...@gmail.com, May 16, 2012

Can we validate fields using separate validation framework, even if your are using Struts2 jquery plugin.

► Sign in to add a comment