GeeCON Prague 2014*
The moose likes HTML, CSS and JavaScript and the fly likes How to display value in combo box using AJAX Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to display value in combo box using AJAX" Watch "How to display value in combo box using AJAX" New topic
Author

How to display value in combo box using AJAX

priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
Hi friends,

I am new to AJAX.In my project I want to use AJAX to populate data into combobox .

My code is

In main page
<Select name="staff_grade1" >
<option value=""+<span id="txtHint"></span> +"" "+">
</option>
</select>

In jsp page
for (int i = 0; i < b.length; i++)
if(b[i] != 0)
{
out.println(b[i]);
}

Here I am returning array b's value into compo box.Here values are displaying in combo box but all are in one line.I want to disply one by one in combo box
please help
thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61314
    
  66

Firstly, there's no such thing as a ComboBox on the web. Please read this for more information.

I'm sure that you are talking about a <select> element, and so you would create multiple <option> elements just as with any other HTML page.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
thank you for your replay..

I am inserting the values as a single line..I want to display this one by one .

in my select box values are displayed as 1 2 3 4 5 6 7 8 9
but I want
1
2
3
4
5
Any way to take that value of txtHint (in my above program)and store it in a variable?
[ April 22, 2008: Message edited by: priya pratheepp ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61314
    
  66

Did you read my repsonse? You must format the HTML correctly.
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
can you please tell me how to format or how to store these values in string..so that i can take one by one from that string...

or even how to return that array also
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61314
    
  66

You know, you mention Ajax in the subject, but your code and your posts don't seem to have anything to do with Ajax, but with just JSP and HTML.

Perhaps it's time for you to put in a little more effort and clearly explain what it is that you are trying to accomplish.
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
thanks a lot for your reply....


<html>
<head>
<script type="text/javascript">
var xmlHttp

function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="GetHint.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)
{
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;
}
</script>

This is my ajax code
Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1362
    
  17
Hi Priya,

The JavaScript that you've posted looks like it will do what you tell it to do, but it doesn't help us understand what you are trying to accomplish on the other end.

If I've understood correctly, you would like to loop through and place the values from the array into your select box. Then, when the values are placed correctly, you wish something to happen when someone selects something from your select box. That is where AJAX enters into the picture.

From your posts, you don't say what you would like to happen - that is "what are you trying to accomplish?".

If the difficulty you are facing is getting the values into the select box, then AJAX shouldn't be involved yet.

If this is the case, then I would suggest trying the following



That is to say, don't write the loop to the page and use AJAX to put it into your select box - rather, use JSP and HTML to write the select box, and then use AJAX to respond to the user's selection once the select box is the way you want it.
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
Hi Katrina,

Thank you for your valualble suggestions.....

You are correct.I want to populate data into the second drop down box based on the first drop down box.

This is the common thing in ajaz.I am new to Ajax and it is urgent work i don't have much time to learn..First i am planning to do this work and after that i am planning to learn....

Most of the examples in net are using php.I am doing with jsp,ajax

If i use without looping values are populating in a single line like 1 2 3 4 5 like that ...I want values should disply one by one which we generally use in drop down box

thanks in advance
priya
Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1362
    
  17
Dear Priya,

I'm not much of a fan of doing urgent work first and then learning afterwards. Doing the work is, in my experience, the way to learn.

I am happy to help you figure out how to do it, but I won't do it for you, since then you wouldn't learn much from it.

I'd suggest that instead of trying to accomplish everything at once, you start by just getting the first select box to display correctly.

I already gave you a hint on how to do that - now it is your turn. When you have a suggestion for the code, post it here, along with any detailed explanations of what is or is not happening the way you expect/want.

Regards,
Katrina
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
Dear Katrina,
I struck with the first line itself.

I am getting all values but all are in one line in drop down box.
My code is

First calling page

**************************************************************

when i select 5

output should be 6
7
8
9
10
etc

but i am getting
6 7 8 9 10 etc

Is it possible to take the value
<span id="txtHint"></span> in a string

please suggest

thanks
[ April 29, 2008: Message edited by: priya pratheepp ]
kranthi chamarthi
Ranch Hand

Joined: May 08, 2007
Posts: 95
Hi,
If I am not wrong, your problem is that you are able to get the list of values from the server but you are not able to show it in a drop down. I suggest you declare a div tag inside the form like
<div id="some name"></div> and in the
function callback(response XML) where in you get the response ,
set the div tag to a combo box and populate the values.
for example: if you have to populate a text box with value from server(using AJAX), in the form you declare
<form><div id="message"></div></form>
and in

In place of "Invalid User Id" you have to declare the ht ml code for combo box. I hope this may solve your problem.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61314
    
  66

priya pratheepp, Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extermely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
I can able to disply in a drop down box but all are in one line.

Below is the url of my program
I want to display the numbers one by one


http://203.116.109.81:8080/clientHint11.jsp
[ April 29, 2008: Message edited by: priya pratheepp ]
Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1362
    
  17
Kranthi, there is no such thing as a ComboBox in HTML.
Please read this for more information.

Priya, if you want to place the values as separate options, then you need to populate multiple option tags, not a single span or div.



Of course, you will need to add your values and the name of the select element, and the call to your javascript function to the first select element.

For the second select element, you may want to place the values you receive back from your Ajax call into a javascript array, so that you can loop through in a similar fashion.

The key point that I am trying to make, is that if you want each value on its own line, you need to wrap each value in its own <option> element.
priya pratheepp
Ranch Hand

Joined: Apr 02, 2008
Posts: 59
Dear Katrina

Thank you for your reply

I declared array in javascripts as
var s = new Array(50);

copy in the function
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
s=xmlHttp.responseText;}
}

In the drop down box i gave as


What should i give at the line
out.println("----");
to get that array variable in javascript one by one

thanks
priya
Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1362
    
  17
Priya, as far as I know, putting a span inside the value attribute of an option tag the way you have is invalid HTML.

Why don't you simplify your requirements just long enough to understand what you need to in order to work with, and then build up complexity when you have something which works?
Subhash Chandran
Greenhorn

Joined: Jul 05, 2008
Posts: 5
[Please don't wake the zombies]
[ July 30, 2008: Message edited by: Bear Bibeault ]
 
GeeCON Prague 2014
 
subject: How to display value in combo box using AJAX