• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

How to display value in combo box using AJAX

 
Ranch Hand
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
priya pratheepp
Ranch Hand
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Did you read my repsonse? You must format the HTML correctly.
 
priya pratheepp
Ranch Hand
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 1367
18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 1367
18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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 ]
 
Ranch Hand
Posts: 101
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 1367
18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 59
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 1367
18
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
Greenhorn
Posts: 5
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
[Please don't wake the zombies]
[ July 30, 2008: Message edited by: Bear Bibeault ]
 
Consider Paul's rocket mass heater.
reply
    Bookmark Topic Watch Topic
  • New Topic