Wednesday, November 25, 2009

JQuery Country State HTML SELECT [Dropdown] AJAX Implementation using XML.

This is the basic tutorial which will help you to start with JQuery and JSON(Java Script Object Notation) Objects. The following is the Project Structure in Netbeans; I worked in Netbeans hence soJ. In this tutorial I will start with JQuery AJAX Implementation with XML Objects,

For my convenience I have not downloaded/Installed any JQuery Javascript file in the current project, Still I am referring to the JQuery Website shared JavaScript Files. Hope it will help you from getting confused to the version of JQuery and other JS Files.
JQuery AJAX Using XML Objects.

I know whenever we hear about AJAX Country/State Drop down example will come into our mind, So I am also referring to the same. Here whenever the User changes the Country Dropdown we will update the State associated with that Country.
In this example we have only two JSP Files,
    1. index.jsp
    2. CountryState.jsp
Hope you can Apply few style sheet to make the index.jsp as followsJ, I think the image is ext-js component, any way I kept image to give you an idea.


The state information we are responding to the client as an XML File as follows.

 Kerala
 Karnataka
The following Line of code in JSP will help to respond the Data as a File.
response.setContentType("text/xml");
response.addHeader("Content-Disposition", "attachment; filename="states.xml");
In the current Example I am not connecting any Database for fetching the State details; I am simply updating the State drop down with My State in India and the neighborJ.
We have two drop down in Our Page with ids
1. Dropdown Country id="country"
2. Dropdown State id=" stateDD"
   Country “onchange” we are calling function loadState(), which makes an JQuery AJAX Request to the CountryState.jsp, and It is handling the response as XML, (by using the dataType TAG we are representing it) and pass the XML File to the  loadStatesFromXML Function.
      By Using XML Parser by JQuery It iterates and retrieve all the states from XML and Add to the state DropDown using appendState Method.


    ClearDD Method : It will remove all the options under the stateDD.


Example.
Index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page>/title>
        
        
    </head>
    <body>

Hello World!
Country :
        
        State :
        
    </body>
</html>
The countryState.jsp is simply receiving the countryId from request and responding a static states xml file.
CountryState.jsp

        <%
        String countryId = request.getParameter("countryId");
        response.setContentType("text/xml");
        response.addHeader("Content-Disposition", "attachment; filename="
          + "states.xml");
        out.println("" +
                "" +
                    "Kerala" +
                    "Karnataka" +
                "");
        %>

This file can be customized according to availability of Country state data, as Database tables or Data Files. I will explain the same in JQuery Using JSON.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)