Link to home
Start Free TrialLog in
Avatar of i808237
i808237Flag for United States of America

asked on

AJAX and

Hello AJAX Expert,

I am trying to implement the Select/Dropdown AJAX tag from the following link.  The Select/Dropdown tag work the following way: when selection within a dropdown field, a second select field will be populated.

See the following link: http://ajaxtags.no-ip.info/

The demo has 2 files associated with it, a JSP and a JAVA servlet.  The servlet name is DropdownServlet.  How is this servlet called from the JSP with the following ajax:select tag?

<ajax:select
  baseUrl="${contextPath}/dropdown.view"
  source="make"
  target="model"
  parameters="make={make}"
  preFunction="initProgress"
  postFunction="resetProgress"
  errorFunction="reportError"
  parser="new ResponseXmlParser()" />

I am using Netbeans IDE with JSP named dropdown and servlet named DropdownServlet.   I think DropdownServlet is supposed to return model given make to the JSP to be displayed in the chained dropdown box.

Heres a code snippet from the demo JSP:

<form action="." class="basicForm">
  <fieldset>
    <legend>Choose Your Car</legend>
    <label for="make">Make:</label>
    <select id="make">
      <option value="">Select make</option>
      <option value="Ford">Ford</option>
      <option value="Honda">Honda</option>
      <option value="Mazda">Mazda</option>
    </select>
    <span id="progressMsg" style="display:none;"><img alt="Indicator" src="./styles/indicator.gif" /> Loading...</span>

    <label for="model">Model:</label>
    <select id="model" disabled="disabled">
      <option value="">Select model</option>
    </select>
  </fieldset>
</form>
<div id="errorMsg" style="display:none;border:1px solid #e00;background-color:#fee;padding:2px;margin-top:8px;width:300px;font:normal 12px Arial;color:#900"></div>

<script type="text/javascript">
 /*
  * USER DEFINED FUNCTIONS
  */

function initProgress() {
  Element.show('progressMsg');
}

function resetProgress() {
  // show marker emblem
  var index = $('make').selectedIndex;
  var automaker = $('make').options[index].text;
  var imgTag = $('makerEmblem');
  if (index > 0) {
    imgTag.src = "./styles/" + automaker.toLowerCase() + "_logo.gif";
  }

  Effect.Fade('progressMsg');
}

function reportError() {
  if ($('model').options.length == 0) {
    $('errorMsg').innerHTML = "Dropdown busted!";
  }
  Element.show('errorMsg');
  setTimeout("Effect.DropOut('errorMsg')", 2500);
}
</script>

<ajax:select
  baseUrl="${pageContext.request.contextPath}/DropdownServlet"
  source="make"
  target="model"
  parameters="make={make}"
  preFunction="initProgress"
  postFunction="resetProgress"
  errorFunction="reportError"
  parser="new ResponseXmlParser()" />

Can you tell be how the servlet gets called in this AJAX demo?

Getting desperate.  Appreciate the help!!
ASKER CERTIFIED SOLUTION
Avatar of anumalas
anumalas

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial