Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: JSP with Ajax

  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JSP with Ajax

    Hi i'm a new to Ajax.
    i'm using JSP for generating dynamic combo box.
    i completed that using onchange Event in JSP but Form is loading for each event.
    so my Team Leader advice me to use Ajax to avoid loading.

    Now In the Form default i loaded the 1st combo box with State.now i don't know how give the link to getCity.jsp for getting City in Second combo box.

    i have Form1.jsp , getCity.jsp , getArea.jsp , dil_ProjectMaster.jsp
    for three combo box i created separate table for State mt1(table name),City mt2,Area mt3...,

  • #2
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Jsp with Ajax

    This is my Script

    Form1.jsp

    <%@ page import="java.sql.*"%>
    <%@ page import="java.io.*"%>
    <%@ page import="java.text.*"%>
    <%@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>
    <script language="java" type="text/javascript" >
    function GetXmlHttpObject()
    {
    var xmlHttp=null;
    try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
    // Internet Explorer
    try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    return xmlHttp;
    }
    var xmlObj = GetXmlHttpObject();

    function getCityData()
    {
    var stateValue = document.getElementById("State").value;

    url = "http://localhost:8085/NewForm/getCity.jsp?State="+stateValue;
    alert(url);
    xmlObj.open("GET",url);

    xmlObj.onreadystatechange = function() {
    alert(xmlObj.status);
    //alert(xmlObj.readystate);
    if(xmlObj.readystate == 4 & xmlObj.status == 200)
    alert(xmlObj.readystate);
    {
    alert("jerald");
    var id = document.getElementById("City").innerHtml;
    alert(id);
    var result = xmlObj.responseText;

    var s = result.split(',');
    var indx = 1;
    for(indx=1; indx < s.length; indx++)
    {
    id.options[s[indx]] = new Option(s[2],s[1]);
    }
    }
    }
    xmlObj.send(null);
    }


    function getAreaData()
    {
    var cityValue = document.getElementById("City").value;
    var url = "getArea.jsp?City="+cityValue;
    alert(url);
    xmlObj.open("GET", url)
    alert("3");
    xmlObj.onreadystatechange = function() {


    if(xmlObj.readystate == 4 & xmlObj.status == 200)
    {
    alert(xmlObj.statusText);
    var id = document.getElementById("Area");
    var result = xmlObj.responseText;

    var s = result.split(',');
    var indx = 1;
    for(indx=1; indx < s.length; indx++)
    {
    id.options[indx] = new Option(s[2],s[1]);
    }
    }
    }

    xmlObj.send(null);
    }
    </script>

    </head>
    <title>Master</title>
    <style rel="stylesheet" type="text/css" media="screen">
    form
    {
    margin: 4em auto;
    width: 75%;
    }
    </style>
    </head>

    <body bgcolor="orange" text='black'>
    <form name="form1" action="http://localhost:8085/NewForm/dil_ProjectMaster.jsp" method="POST" onsubmit="return (checkform(this) && ValidateDate())";>

    <div align="center">
    <table border='0' height="500" width="1000" text='black' colspan='4' bgcolor="orange">

    <tr>
    <th colspan="4" ><font size="5">PROJECT MASTER</th>
    </tr>
    <tr>
    <td><font size="5">Project Code</td>
    <td><input type="text" name="dil_ProjectCode" id="dil_PC"></td>


    <td><font size="5">Project Name</td>
    <td ><input type="text" name="dil_ProjectName" id="dil_PN">

    </tr>

    <tr>
    <td><font size="5">Work Level1</td>
    <td >
    <%
    Connection con = null;
    PreparedStatement stmt= null;
    DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
    con = DriverManager.getConnection("jdbcracle:thin:@localhost:1521:xe","distil","distil");
    %>


    <%

    stmt = con.prepareStatement("select S_ID,STATE from mt1");
    ResultSet rs1=stmt.executeQuery();
    %>
    <select name="State" id="State" onchange=" return getCityData();">
    <option value="0">------Please Select------</option>

    <%
    while(rs1.next())
    {
    %> <option value="<%=rs1.getString(1)%>"><%=rs1.getString(2)%></option>
    <%}
    rs1.close();
    %>
    <option selected="selected" value="<%=request.getParameter("State")%>"><%=request.getParameter("State")%></option>
    </select>
    </td>



    <td><font size="5">Work Level2</td>

    <td>
    <select name="City" onchange="return getAreaData()";>
    <option value="0">------Please Select------</option>
    </select>
    </td>


    <tr>
    <td><font size="5">Work Level3</td>
    <td>

    <select name="Area">
    <option value="0">------Please Select------</option>
    </select>
    </td>

    <td><font size="5">Notes</td>
    <td><input type="text" name="dil_Notes"></td>
    </tr>

    <tr>
    <td><font size="5">Project Start Date</td>
    <td><input type="text" size="20" name="dil_ProjectStartDate">


    </td>


    <td><font size="5">Project End Date</td>
    <td><input type="text" size="20" name="dil_ProjectEndDate">

    </td>
    </tr>
    <tr>
    <td></td>
    <td><input type="Submit" value="Save" >
    </td>
    <td>
    <input type="Button" value="New" onClick="location.href='http://localhost:8085/NewForm/Form1.jsp'"></td>
    </tr>
    </table>
    </form>
    <%
    stmt.close();
    con.close();
    %>
    </body>
    </html>


    getCity.jsp

    <%@ page import="java.sql.*"%>
    <%@ page import="java.io.*"%>
    <%@ page import="java.lang.*"%>
    <%@ page import="java.text.*"%>
    <%@page contentType="text/html" pageEncoding="UTF-8" language="java"%>

    <%

    String stateId = null;
    Connection con = null;
    PreparedStatement stmt = null;
    ResultSet rs = null;


    try
    {
    DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());

    con = DriverManager.getConnection("jdbcracle:thin:@localhost:1521:xe","distil","distil");


    stateId = request.getParameter("State");

    String query = "select C_ID,CITY from mt2 where S_ID='"+stateId+"'";

    stmt = con.prepareStatement(query);

    rs = stmt.executeQuery();
    String data = null;
    while(rs.next())
    {
    data = ":" + rs.getString(1) + " " + rs.getString(2);
    }

    out.println(data);

    }

    catch (SQLException ex){
    System.err.println(ex.getMessage());
    }
    catch (Exception e){
    e.printStackTrace();
    }
    finally{

    rs.close();
    con.close();
    stmt.close();

    }
    %>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •