0

I am fetching some data from database and want to show these values in a combo in javascript but combo box is not populating any value, perhaps i am doing something wrong in json or javascript, can anybody tell me where i am wrong? From db 5 values are coming in while loop 

JSONObject jsonObj= new JSONObject(); 

List<String> myList = new ArrayList<String>();
while(rs.next()){
t1=rs.getString(1);
myList.add(t1);
 jsonObj.put("name",myList.toArray());
}
response.setContentType("application/json");
response.getWriter().write(jsonObj.toString());

want to get above values in javascript

<script type="text/javascript">
  $(document).ready(function() {
$("#combo").change(function() {
$.getJSON('combo.jsp', {count : this.value}, function(responseData) {
$("#combo1").empty().append ("<option>please select</option>");
var json = $.parseJSON(responseData);
var myValues = json.name;
for (var idx in myValues) {
$("#combo1").append(
    $("<option></option>").html(myValues[idx]).val(myValues[idx])
);
}
});
});          
    </script>

Please anybody give me some idea at least, i am not able to find any solution

Improve this question
6
  • put some debugging statements in your code and you'll probably locate the problem. alert() in js and System.err.println() in Java. Commented Feb 13, 2012 at 6:08
  • @jcomeau_ictx i am getting value in server side but i do not know whether jsonObj is keeping values correctly or not? have a look at this: stackoverflow.com/questions/9248383/… Commented Feb 13, 2012 at 6:11
  • @jcomeau_ictx any solution my friend? Commented Feb 13, 2012 at 6:24
  • use firebug to see the returned json object from your ajax call. when you get that, paste into your question to clarify. Commented Feb 13, 2012 at 6:38
  • @DmitryB thanks but can you give me any idea to this question where i have elaborated : please see here Commented Feb 13, 2012 at 6:41

3 Answers 3

Reset to default
2
  1. There was a syntax error
  2. parseJSON is not needed when data is retrieved using getJSON

Assuming the response json is of struture: {name={prop1:value1 , prop2: valu2, prop3:value3 ..... }}

    $(document).ready(function () {
        $("#combo").change(function () {
            $.getJSON('combo.jsp', {
                count: this.value
            }, function (responseData) {
                $("#combo1").empty().append("<option>please select</option>");
                var myValues = responseData.name;
                for (var idx in myValues) {
                    $("#combo1").append(
                    $("<option></option>").html(myValues[idx]).val(myValues[idx]));
                }
            });
        });
    });

Or if the structure is: {name=[value1 , valu2, value3, ..... ]}

    $(document).ready(function () {
        $("#combo").change(function () {
            $.getJSON('combo.jsp', {
                count: this.value
            }, function (responseData) {
                $("#combo1").empty().append("<option>please select</option>");
                var myValues = responseData.name;
                for (var i=0; i < myValues.length; i++) {
                    $("#combo1").append(
                    $("<option></option>").html(myValues[i]).val(myValues[i]));
                }
            });
        });
    });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thanks a lot Diode, it worked like a charm. I just need one more help, that is how to send to a servlet by onchange event like i am sending it to combo.jsp?
0

I don't know which browser you are using. But afaik, insert html directly by using innerHTML is not working on some browser. You should try this way:

$("#combo1")[0].options.add(new Option(label, value));

label indicates the string inner "option" value indicates the attribute "value" of the "option"

In your code:

for (var i = 0, val; val = myValues[i]; i++)
{
    $("#combo1")[0].options.add(new Option(val, val));
}
Improve this answer

5 Comments

thanks kelvin but where to add this code? can you please clarify little bit
$("#combo1").append( $("<option></option>").html(myValues[idx]).val(myValues[idx]) );
thanks kelvin for your suggestion but it is not working have you tested in my friend?
it is showing javascript error, if possible can you please edit my javascript code and add your modified code so that everybody can see it
no friend it is not populating value in combobox, i think some error is there in server side JSON
0

I doubt u are getting values from your getJSON CALL .. Use Firebug to see if you are getting response for your ajax call. And use console.log(responseData); inside $.getJSON('combo.jsp', {count : this.value}, function(responseData) {

console.log(responseData); });

Hi try this:

var options = '';
$.getJSON('combo.jsp', {
    count: this.value
}, function (responseData) {
    $.map(responseData, function (item) {
        console.log(item);
        //alert(item.code);
        options += '<option value="' + item.code + '">' + item.description + '</option>';
    });
}
);
$("#combo").html(options);
Improve this answer

3 Comments

ok i am trying in firebug but if possible provide a solution to this above problem by editing my json or javascript code
var options = ''; $.getJSON('combo.jsp', { count: this.value }, function (responseData) { console.log(responseData); $.map(responseData, function (item) { //alert(item.code); options += '<option value="' + item.code + '">' + item.description + '</option>'; }); } ); $("#combo").html(options);
yeah thanks for your suggestion well above answer worked for me :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.