Member Avatar for himmat.m4

Hi,

I have following ajax code so here I want to help to edit the code.

I have servlet name is SendInfo.java.
here feaches destination cities and add into Arraylist according destination city selected by dropdownlist listFrom then that Arraylist send back to displayCity.jsp and displayed in second dorpdownlist listTo.

So please help me edit the following code to send selected city and get Arraylist for displaying.

Thanks in advance.

function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<div id="myDiv">
     <% getsource = (String)request.getAttribute("sndsource");
       stmtSelectSource=con.createStatement();
       rsSelectSource = stmtSelectSource.executeQuery(sqlSelectSource);
    %>
           <td><select name="listFrom" id="listFrom" onChange="loadXMLDoc()">
           <option>----Select City----</option>
           <%while (rsSelectSource.next())
               {%>
                 <option><%=rsSelectSource.getString(1)%></option>
             <%}%>
            </select>

   <%
                                //stmtSelectDestination=con.createStatement();
                                //rsSelectDestination = stmtSelectDestination.executeQuery(sqlSelectDestination);

                                Iterator itrDest = null;
                               // ArrayList getListDestination = new ArrayList();

                               if(getsource != null)
                                   {
                                     List getListDestination = (List)request.getAttribute("sndlistDestination");
                                     itrDest = getListDestination.iterator();
                                   }
                                    
                            %>
                            
                           <td><select name="listTo" id="listTo">
                          <option>----Select City----</option>

                      <%
                      if(getsource != null)
                                    {
                            while (itrDest.hasNext())
                                {%>
                                    <option><%=itrDest.next()%></option>
                                <%}
                          } %>
                                </select>
</div>


</body>
</html>
  • 2 Contributors
  • 4 Replies
  • 89 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by himmat.m4

Recommended Answers

All 4 Replies

Member Avatar for Luckychap

Here is a sample(NOT complete):-

Main page

<script>
function loadXMLDoc(selectEl) {
    ...
    ...
    xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           document.getElementById("display_city_div").innerHTML=xmlhttp.responseText;
       }
   }
   ...
   ...
   /* Get the selected city */
   var selectedCity = selectEl.options[selectedIndex].text;
   /* Send it with url */
   xmlhttp.open("GET",url+'?city=' + selectedCity ,true);
}
</script>

<body>
    <h2>AJAX</h2>
    <div id="myDiv">
    <!--
    Do same stuff you were doing before
    ie get all the destination cities
   
    BUT in onChange method pass 'this' 
    so that you can send the selected city 
    from first dropdown list 
    -->
    ...
    ...

    <select name="listFrom" id="listFrom" onChange="loadXMLDoc(this)">    
    </div>
   
    <div id="display_city_div"></div>

</body>
</html>

In Servelet get the selected city(that was sent through loadXMLDoc method) and return html string for second dropdownlist and the code in loadXMLDoc will populate it in second div(id='display_city_div');

Try it yourself

Member Avatar for himmat.m4

I have some doubts.

xmlhttp.open("GET",url+'?city=' + selectedCity ,true);
- is there write Servlet name in above line at the place of url?

- Is there write RequestDispatcher in servlet to sending resulting data (which is contaning Arraylist) back to jsp?

document.getElementById("display_city_div").innerHTML=xmlhttp.responseText;

-In above line comes resulting data but how to use to displaying cities in jsp for second dropdownlist?

Please clear my above doubts.

Thanks for reply.

Edited by himmat.m4 because: add some sentance
Member Avatar for Luckychap

xmlhttp.open("GET",url+'?city=' + selectedCity ,true);
- is there write Servlet name in above line at the place of url?

Yes you have to mention your servelet name/path in place of url

- For sending data back check this simple example:
http://www.jsptube.com/servlet-tutorials/simple-servlet-example.html

- The html string needs to be build in servelet itself(refer above example)
Once you get all the cities array loop through it and build html.

String htmlStr = "<select name='listFrom1' id='listFrom1'>";
for(int i = 0; i < arrayList.length(); i++) {
    String city = arrayList[i];
    htmlStr += "<option>" + city + "</option>";
}
htmlStr += "</select>";

out.print(htmlStr);

you will get html string in loadXMLDoc() success handler.

Member Avatar for himmat.m4

Thank you so much

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.