How to do something like Post Back in JSP

MaxGeek · Feb 17, 2006

I'm trying to make a form in JSP. Similar to a automotive form.

I have a drop down list for "Makes" (honda, toyota,etc)
and once a "make" is selected I want to generate the items in drop down list for "models" like (civic, s2000, pilot, etc)
Similar to how autotrader.com works.

My question is how can I do this? Is there a way to get JSP to do post back? I have other fields on this form so I would like a solution that doesn't wipe out the content of the fields.

venur · Feb 18, 2006

Hi,

AJAX is better solution.Here is my blog with an example of how to use AJAX with Struts (my explation might not be good but code works)

http://venur.blogspot.com/2006/01/struts-and-ajax-by-example-1.html

You could use the same code in JSP or Servelts as well, if not let me know I can post an example.

Cheers
Venu

MaxGeek · Feb 18, 2006

Could you post an example or post maybe a zip file of your example. I'm having a hard time getting your example to run in netbeans.

Thanks

venur · Feb 21, 2006

Hi,

I have posted a new blog which uses jsp insted of struts,

http://venur.blogspot.com/2006/02/ajax-jsp-to-populate-dependent.html

Any how here is the code hope this will hlep you. The code has dependency to prototype.js download it from here

http://prototype.conio.net/

ajaxOptions.jsp

Code:

<%@ page contentType="text/html;charset=windows-1252"%>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    <title>Address Form</title>
    <!-- include the AJAX JS File -->
    <script src="js/ajax/prototype.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">

/*
onChange event of the dropDownList will calls this function
which has AJAX call to Struts Action class
@param: dropDownList object (this)
@param: URL or Struts Action
*/
function depedentDropDown(obj, url) {
    var stateValue = $F(obj)
    var pars = "state=" + stateValue;
    //alert(stateValue);
    var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars,
        onComplete: showResponse});
}

/*
Upon completing the request the AJAX will call this method
which is responsible for loading the depedent list from the XML
*/
function showResponse(originalRequest)
{
    var list = $('city');
    var xmlString = originalRequest.responseXML;
    var items = xmlString.getElementsByTagName('labelValueBean');
    clearList(list);
    if (items.length > 0)
    {
        for (var i = 0; i < items.length; i++)
        {
            var node = items[i];
            var value = "";
            var label = "";
            if (node.getElementsByTagName("label")[0].firstChild.nodeValue) {
                value = node.getElementsByTagName("label")[0].firstChild.nodeValue;
                label = node.getElementsByTagName("value")[0].firstChild.nodeValue;
            }
            addElementToList(list, value, label);
        }
    }
    else
    {
        addElementToList(list, "", "-- Select is Empty --");
    }
}

/**
remove the content of te list
*/
function clearList(list)
{
    while (list.length > 0)
    {
        list.remove(0);
    }
}

/**
Add a new element to a selection list
*/
function addElementToList(list, value, label)
{
    var option = document.createElement("option");
    option.value = value;
    var labelNode = document.createTextNode(label);
    option.appendChild(labelNode);
    list.appendChild(option);
}



</SCRIPT>
  </head>
  <body>
    <form method="POST" action="">
      <fieldset style="padding: 2">
        <legend>Address Form</legend>
        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="58%">
          <tr>
            <td width="24%">Address</td>
            <td width="76%">
              <input type="text" name="address1" size="20"/>
            </td>
          </tr>
          <tr>
            <td width="24%">Apt#</td>
            <td width="76%">
              <input type="text" name="address2" size="20"/>
            </td>
          </tr>
          <tr>
            <td width="24%">State</td>
            <td width="76%">
              <select size="1" name="state" onChange="depedentDropDown(this,'ajaxOptionResult.jsp')">
                <option>Select State</option>
                <option value="VA">VA</option>
                <option value="MD">MD</option>
              </select>
            </td>
          </tr>
          <tr>
            <td width="24%">City</td>
            <td width="76%">
              <select size="1" name="city">
                <option>Select City</option>
              </select>
            </td>
          </tr>
          <tr>
            <td width="24%">Zip</td>
            <td width="76%">
              <input type="text" name="zip" size="20"/>
            </td>
          </tr>
        </table>
      </fieldset>
      <p>
        <input type="submit" value="Submit" name="B1"/>
        <input type="reset" value="Reset" name="B2"/>
      </p>
    </form>
  </body>
</html>

ajaxOptionResult.jsp

Code:

<%
 
  String state = request.getParameter("state");
  String[] vaArray = new String[]{"Reston", "Centerville", "Chantilly", "Fairfax"};
  String[] mdArray = new String[]{"Silver Spring", "Rockwill", "Bethesda", "Brandywine" };
  // pouplate the state
  StringBuffer buffer = new StringBuffer();
  buffer.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
  buffer.append("\n");
  buffer.append("<root>");
  buffer.append("\n");
  if(state.equals("VA")){
   for(int i=0; i < vaArray.length; i++){
      buffer.append("<labelValueBean>");
      buffer.append("\n");
        buffer.append("<label>" + vaArray[i] + "</label>");
        buffer.append("\n");
        buffer.append("<value>"+ vaArray[i]+"</value>");
      buffer.append("\n");
      buffer.append("</labelValueBean>");
    }
  }else if(state.equals("MD")){
    for(int i=0; i < mdArray.length; i++){
      buffer.append("<labelValueBean>");
      buffer.append("\n");
        buffer.append("<label>" + mdArray[i] + "</label>");
        buffer.append("\n");
        buffer.append("<value>"+ mdArray[i]+"</value>");
      buffer.append("\n");
      buffer.append("</labelValueBean>");
    }
  }else{
    buffer.append("<labelValueBean>");
    buffer.append("\n");
    buffer.append("<label>Selet is empty</label>");
    buffer.append("\n");
    buffer.append("<value>Empty</value>");
    buffer.append("\n");
    buffer.append("</labelValueBean>");
  }
  buffer.append("\n");
  buffer.append("</root>");
  System.out.print(buffer.toString());
  response.addHeader("Content-Type", "text/xml");
  response.setContentType("text/xml; charset=windows-1252");
  out.write(buffer.toString());
%>

Hope this will hlep you.

Cheers
Venu

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to do something like Post Back in JSP

MaxGeek

Technical User

venur

MIS

MaxGeek

Technical User

venur

MIS

Similar threads

Part and Inventory Search

Sponsor