<netui:anchor> Tag

Generates an anchor that can link to another document or invoke an action method in the Controller file.

Syntax

<netui:anchor
    [accessKey="accessKey"]
    [action="action"]
    [charSet="charSet"]
    [clientAction="clientAction"]
    [coords="coords"]
    [dir="dir"]
    [disableSecondClick="disableSecondClick"]
    [formSubmit="formSubmit"]
    [href="href"]
    [hrefLang="hrefLang"]
    [lang="lang"]
    [linkName="linkName"]
    [location="location"]
    [onBlur="onBlur"]
    [onClick="onClick"]
    [onDblClick="onDblClick"]
    [onFocus="onFocus"]
    [onKeyDown="onKeyDown"]
    [onKeyPress="onKeyPress"]
    [onKeyUp="onKeyUp"]
    [onMouseDown="onMouseDown"]
    [onMouseMove="onMouseMove"]
    [onMouseOut="onMouseOut"]
    [onMouseOver="onMouseOver"]
    [onMouseUp="onMouseUp"]
    [popup="popup"]
    [rel="rel"]
    [rev="rev"]
    [shape="shape"]
    [style="style"]
    [styleClass="styleClass"]
    [tabindex="tabindex"]
    [tagId="tagId"]
    [target="target"]
    [targetScope="targetScope"]
    [title="title"]
    [type="type"]
    [value="value"] />

Description

Generates an anchor that can link to another document or invoke an action method in the Controller file. The <netui:anchor> tag also supports JavaScript-based form submission and URL re-writing.

An anchor must have one of five attributes to correctly create the hyperlink:

Attributes
accessKey
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The keyboard navigation key for the element. The following values are not recommended because they are often used by browsers: A, C, E, F, G, H, V, left arrow, and right arrow
action
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The action method to invoke. The action method must be in the Controller file of the Page Flow directory.
charSet
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The character set.
clientAction
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The client action.
coords
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The coordinates.
dir
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The dir.
disableSecondClick
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

Boolean. If disableSecondClick is set to true, the anchor will disable itself after being clicked.
formSubmit
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

Boolean. If formSubmit is set to true, and the <netui:anchor> tag is within a <netui:form> tag, then the form data will be submitted to the method named in the <netui:form> tag's action attribute.
href
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The URL to go to.
hrefLang
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The HREF lang.
lang
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The lang.
linkName
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

An internal place on the page to go to.
location
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

Location within the URI to visit.
onBlur
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onBlur JavaScript event.
onClick
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onClick JavaScript event.
onDblClick
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onDblClick JavaScript event.
onFocus
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onFocus JavaScript event.
onKeyDown
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onKeyDown JavaScript event.
onKeyPress
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onKeyPress JavaScript event.
onKeyUp
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onKeyUp JavaScript event.
onMouseDown
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onMouseDown JavaScript event.
onMouseMove
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onMouseMove JavaScript event.
onMouseOut
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onMouseOut JavaScript event.
onMouseOver
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onMouseOver JavaScript event.
onMouseUp
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The onMouseUp JavaScript event.
popup
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

Boolean. If popup is set to true, the anchor will open a popup window.
rel
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The rel.
rev
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The rev.
shape
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The shape.
style
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The style.
styleClass
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The style class.
tabindex
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The tabIndex of the rendered HTML tag. This attribute determines the position of the rendered HTML tag in the sequence of tags that the user may advance through by pressing the TAB key.
tagId
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

String value. Sets the id (or name) attribute of the rendered HTML tag. Note that the real id attribute rendered in the browser may be changed by the application container (for example, Portal containers may change the rendered id value to ensure the uniqueness of id's on the page). In this case, the real id rendered in the browser may be looked up through the JavaScript function getNetuiTagName( tagId, tag ).

For example, assume that some tag's tagId attribute is set to foo.

    <netui:textBox tagId="foo" />

Then the following JavaScript function will return the real id attribute rendered in the browser:

    getNetuiTagName( "foo", this )

To get a <netui:form> element and all of its children elements in JavaScript, use the same JavaScript function getNetuiTagName( tagId, tag ). For example, assume that there is a <netui:form> whose tagId attribute is set to bar.

    <netui:form tagId="bar" >

Then the following JavaScript function will return the <netui:form> element and its children (packaged as an array).

    document[getNetuiTagName( "bar", this )]

To retreive the value entered into a <netui:textBox> within the <netui:form> tag, use the following JavaScript expression.

    document[getNetuiTagName("bar", this)][getNetuiTagName("foo", this)].value

The second parameter ensures that the JavaScript function begins its search within the correct Portlet scope. Pass the JavaScript keyword this as the second parameter. For detailed information on using the function getNetuiTagName( tagId, tag ) see Using JavaScript in Page Flow and Portal Applications.

target
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The window target.
targetScope
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: Yes

The target scope in which the associated action's page flow resides.
title
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The title.
type
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

The type.
value
Required: No  |   Supports runtime evaluation: Yes  |   Data bindable: No

Set the text of the anchor.

 
Example

Submitting Form Data

In this sample, clicking on this anchor submits the form data and invokes the method submitForm.

      <netui:form action="formSubmit">
          Firstname:
          <netui:textBox dataSource="{actionForm.firstname}"/>
          Lastname:
          <netui:textBox dataSource="{actionForm.lastname}"/>
          <netui:anchor formSubmit="true">Submit</netui:anchor>
      </netui:form>

If the formSubmit attribute is set to true and no onClick attribute is set, the following JavaScript function will be written to the HTML page. This JavaScript function will be referenced by the onclick attribute of the generated anchor tag.

  function anchor_submit_form(netuiName, newAction)
  {
    for (var i=0; i<document.forms.length; i++) {
       if (document.forms[i].id == netuiName) {
          document.forms[i].method = "POST";
          document.forms[i].action = newAction;
          document.forms[i].submit();
       }
     }
  }

The JavaScript function will be invoked by the generated HTML anchor tag as follows:

 <a href="/WebApp/tagSamples/anchor/formSubmit.do"
       onClick='anchor_submit_form("Netui_Form_0","/WebApp/tagSamples/anchor/formSubmit.do");return false;'>Submit</a>

Custom JavaScript Functions

It is possible to write a custom onClick JavaScript event handler that would do additional work, for example form validation, and still POST the form correctly. To accomplish this, add the custom JavaScript method to the page:

 function SubmitFromAnchor()
 {
   // implement custom logic here

   for(var i=0; i<document.forms.length; i++)
   {
     // submit to the action /aWebapp/formPost.do
     if (document.forms[i].action == "/aWebapp/formPost.do")
     {
       document.forms[i].method="POST";
       document.forms[i].action="/aWebapp/formPost.do";
       document.forms[i].submit();
     }
   }
 }
Then reference the JavaScript method from the <netui:anchor> tag:
 <netui:anchor formSubmit="true" onClick="SubmitFromAnchor(); return false;">Submit</netui:anchor>

Related Topics

<netui:attribute> Tag

String