select/dropdown in ajax

Question

brr 0 Light Poster

16 Years Ago

plz help me how to do select/dropdown
iam new to ajax
i followed the example select/dropdown from sourceforge net
but its not possible how to do it using jsp

plzzzzzzzzzzzz
help me in this, send me the code how to do it in jsp

javascript

4 Contributors
6 Replies
259 Views
1 Day Discussion Span
Latest Post 16 Years Ago Latest Post by MattEvans

DangerDev 107 Posting Pro in Training

16 Years Ago

what do you mean by select/dropdown ?
ajax is client side technology, any server side language will work well.
here is an example

aravelli 0 Newbie Poster

16 Years Ago

In the below 3 programs
In getcustomer.jsp iam getting details from database according to the selected item in listbox in customer.html
now i want to put those result values in second listbox in customer.html
how is it possible tell me
if possible provide related code to the below example

customer.html
<html>
<head>
<script src="selectcustomer.js"></script>
</head><body><form>
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="BS101">BS101
<option value="BS102">BS102
<option value="BS103">BS103
</select>
<select>
<option>--select--</select>
</select>
</form><p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p></body>
</html>
selectcustomer.js
var xmlHttp
function showCustomer(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="getcustomer.jsp";
url=url+"?q="+str;
//url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
alert(document.getElementById("txtHint").innerHTML=xmlHttp.responseText);
}
}
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;
}

getcustomer.jsp
<%
Connection con;
con=dcon.getCon();

String q=request.getParameter("q");
System.out.println("q");
Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from PHR_FIN_MST_BS where BS_CODE='"+q+"'");
%>
<table>
<%
System.out.println("hi1");
while(rs.next()){
System.out.println("hi2");
%>
<tr><td><b><%
System.out.println("hi3"+rs.getString(1));
%></b></td></tr>
<tr><td><b><%=(rs.getString(2))%></b></td></tr>
<tr><td><b><%=(rs.getString(3))%></b></td></tr>
<tr><td><b><%=(rs.getString(4))%></b></td></tr>
<tr><td><b><%=(rs.getString(5))%></b></td></tr>
<tr><td><b><%=(rs.getString(6))%></b></td></tr>
<tr><td><b><%=(rs.getString(7))%></b></td></tr>
<tr><td><b><%=(rs.getString(8))%></b></td></tr>
<%
}//while
st.close();
rs.close();
con.close();
%>
</table>
</body>
</html>

change this into customer.html

this may help you

<html>
<head>
<script src="selectcustomer.js"></script>
<script language="javascript">
function moveOver()  
{
var boxLength = document.choiceForm.SubCat.length;
var selectedItem = document.choiceForm.customers.selectedIndex;
var selectedText = document.choiceForm.customers.options[selectedItem].text;
var selectedValue = document.choiceForm.customers.options[selectedItem].value;
var i;
var isNew = true;
if (boxLength != 0) {
for (i = 0; i < boxLength; i++) {
thisitem = document.choiceForm.SubCat.options[i].text;
if (thisitem == selectedText) {
isNew = false;
break;
      }
   }
} 
if (isNew) {
newoption = new Option(selectedText, selectedValue, false, false);
document.choiceForm.SubCat.options[boxLength] = newoption;
}
document.choiceForm.customers.selectedIndex=-1;
}

</script>
</head><body><form name="choiceForm">
Select a Customer:
<select name="customers" onchange="moveOver()">
<option value="BS101">BS101
<option value="BS102">BS102
<option value="BS103">BS103
</select>
<select id="SubCat" name="SubCat"></select>
</form>
</body></html>

Reply to this topic

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.

brr 0 Light Poster · Answer 1 · 2008-02-26T16:59:59+00:00

In the below 3 programs
In getcustomer.jsp iam getting details from database according to the selected item in listbox in customer.html

now i want to put those result values in second listbox in customer.html

how is it possible tell me
if possible provide related code to the below example

customer.html

<html>
<head>
<script src="selectcustomer.js"></script>
</head><body><form> 
Select a Customer:
<select name="customers" onchange="showCustomer(this.value)">
<option value="BS101">BS101
<option value="BS102">BS102
<option value="BS103">BS103
</select>
<select>
<option>--select--</select>
</select>
</form><p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p></body>
</html>

selectcustomer.js

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
} 
var url="getcustomer.jsp";
url=url+"?q="+str;
//url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4)
{ 
alert(document.getElementById("txtHint").innerHTML=xmlHttp.responseText);
}
}

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;
}

getcustomer.jsp

<% 

Connection con;
con=dcon.getCon();


String q=request.getParameter("q");
System.out.println("q");

Statement st=con.createStatement();
ResultSet rs=st.executeQuery("select * from PHR_FIN_MST_BS where BS_CODE='"+q+"'");

%>
<table>
<%
System.out.println("hi1");
while(rs.next()){
System.out.println("hi2");

%>
<tr><td><b><%

System.out.println("hi3"+rs.getString(1));
%></b></td></tr>
<tr><td><b><%=(rs.getString(2))%></b></td></tr>
<tr><td><b><%=(rs.getString(3))%></b></td></tr>
<tr><td><b><%=(rs.getString(4))%></b></td></tr>
<tr><td><b><%=(rs.getString(5))%></b></td></tr>
<tr><td><b><%=(rs.getString(6))%></b></td></tr>
<tr><td><b><%=(rs.getString(7))%></b></td></tr>
<tr><td><b><%=(rs.getString(8))%></b></td></tr>
<%
}//while
st.close();
rs.close();
con.close();
%>

</table>
</body>
</html>

brr 0 Light Poster · Answer 2 · 2008-02-26T18:47:25+00:00

hai thanks for u help
but
iam asking abt what ever result items iam getting getcustomer.jsp by selecting one of item(BS101,BS102,BS103) IN customer.html THOSE ITEMS I HAVE TO PUT IN SECOND SELECT BOX

DangerDev 107 Posting Pro in Training · Answer 3 · 2008-02-26T20:01:34+00:00

hi
here i will give one example:
suppose you are getting three value from database- val1, val2, val3
you want to make a list box out of this then you need to return a list box from server side.

now form a string like this:

string retStr;
retStr="<select name='list_name' onchange='function_name(this.value)'>
<option value=' "+val1+" '>"+val1+"
<option value=' "+val1+" '>"+val1+"
<option value=' "+val1+" '>"+val1+"
</select>"
System.out.println(retStr);

you should write System.ont.println() only once.
-idea is that whatever you will return from server, you will get from xmlHttp.responseText at client side in ajax.
you can do same for table also.
i hope this will help you.

Have a nice time !

MattEvans 473 Veteran Poster Team Colleague Featured Poster · Answer 4 · 2008-02-27T01:17:56+00:00

This thread has been merged and re-named. The original merge sources were 'can anyone help' and 'To the second listbox'. Replies are now in chronological order as posted in both original threads.