betweenGo

It is relatively simple to dynamically create a dropdown from which you can jump to different parts of a page using JavaScript and ATG DSPEL.

First create the dropdown.

<form name="jumpTo" action=".">
  <dspel:droplet name="/atg/dynamo/droplet/ForEach">
    <dspel:param name="array" param="categories"/>
    <dspel:setvalue param="category" paramvalue="element"/>
    <dspel:oparam name="outputStart">
      <select name="names">
    </dspel:oparam>
    <dspel:oparam name="output">
      <dspel:getvalueof id="index" param="index"/>
      <c:set var="catShortName" value="cat${index}"/>
      <option value="<c:out value="${catShortName}"/>">
        <dspel:valueof param="category.name"/>
      </option>
    </dspel:oparam>
    <dspel:oparam name="outputEnd">
      </select>
    </dspel:oparam>
  </dspel:droplet>
</form>

Next create the button outside of the form for jumping to different parts of the page. I learned about the window.location.hash from this article. And I learned about how to access the selected value from the dropdown from this article.

 <input type="image" src="/img/buttons/update.gif"
   onClick="window.location.hash=
document.jumpTo.names.options[document.jumpTo.names.selectedIndex].value">

Finally you create the name anchors throughout your document.

<dspel:droplet name="/atg/dynamo/droplet/ForEach">
  <dspel:param name="array" param="categories"/>
  <dspel:setvalue param="category" paramvalue="element"/>
  <dspel:oparam name="output">

    <%-- magazine category --%>
    <dspel:getvalueof id="index" param="index"/>
    <c:set var="catShortName" value="cat${index}"/>
    <a name="<c:out value="${catShortName}"/>"
       id="<c:out value="${catShortName}"/>">
      <dspel:valueof param="category.name"/>
    </a>

  </dspel:oparam>
</dspel:droplet>

It has always bedeviled me how to submit an ATG form using a text link. I have asked many people about this but no one seems to know. Finally with the help of ATG support I figured it out.

Below is a simple example of how to do it. The trick is the hidden submit input which triggers ATG to call the handleSubmit method of the form handler.

<%@ taglib uri="/dspTaglib" prefix="dsp"%>

<dsp:page>

<script>
  function submit(form) {
    form.submit();
  }
</script>

<dsp:form action="<%=request.getRequestURI()%>" method="post" name="testForm">

  Foo: <dsp:input type="text" bean="TestFormHandler.foo"/>

  <p><a href="javascript:submit(document.testForm)" mce_href="javascript:submit(document.testForm)">Submit</a>

  <dsp:input type="hidden" bean="TestFormHandler.submit" value="Submit"/>

</dsp:form>

</dsp:page>

Submitting a form from a radio button is not common but it is a nice UI which is even better when done with AJAX.

A typical form with two radio buttons would look something like this.

<form action="test.html">
1 <input type="radio" name="test" value ="1"><br>
2 <input type="radio" name="test" value ="2">
<p><input type="submit" value="submit">
</form>

But with basic JavaScript you can make a simpler form like this.

<script>
function submitAction( form, absPath ) {
form.action = absPath;
form.submit();
}
</script>

<form action=”test.html” id=”test”>
1 <input type=”radio” name=”test” value =”1″ onchange=”submitAction(document.getElementById(’test’), ‘test.html’)”><br>
2 <input type=”radio” name=”test” value =”2″ onchange=”submitAction(document.getElementById(’test’), ‘test.html’)”>
</form>

If you are using Struts the above form’s JSP would be:

<html:form action="test.do" styleId="test">
1 <input type="radio" name="test" value ="1" onchange="submitAction(document.getElementById('test'), 'test.do')"><br>
2 <input type="radio" name="test" value ="2" onchange="submitAction(document.getElementById('test'), 'test.do')">
</html:form>