Hi,
I'm new jQuery and JSON. I'm trying to use it to populate a dropdown
list through a web service and jQuery. So far I've succeeded in
calling the web service and receiving the list of items in a JSON
format. However, now I'm stuck adding these items to the dropdown
list.

my web service returns a list of projects (Items) for a customer:
-----------------------------------------------------------------
http://localhost:3797/Test.asmx/GetProjectsForCustomer

POST /Test.asmx/GetProjectsForCustomer HTTP/1.1

Host: localhost:3797
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:
1.9.0.4) Gecko/2008102920 Firefox/3.0.4 (.NET CLR 3.5.30729)
Accept: application/json, text/javascript, */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Content-Type: application/json; charset=utf-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:3797/Default.aspx
Content-Length: 19
Pragma: no-cache
Cache-Control: no-cache
{'CustomerId':'39'}

HTTP/1.x 200 OK
Server: ASP.NET Development Server/9.0.0.0
Date: Sat, 06 Dec 2008 18:40:12 GMT
X-AspNet-Version: 2.0.50727
Cache-Control: private, max-age=0
Content-Type: application/json; charset=utf-8
Content-Length: 117
Connection: Close
------------------------------------------------------------
result:

[{"CustomerId":18,"Items":[{"Text":"Sample Project","Value":6},
{"Text":"Tickets","Value":17}]}]

I'm calling the webservice like this:

        function LoadProjects(customerId) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Test.asmx/GetProjectsForCustomer",
                data: "{'CustomerId':'" + customerId + "'}",
                dataType: "json",
                success: function(msg) {
                    $("#ProjectList").fillSelect(msg.d);
                }
            });
        }

and then try to use the result in a function, like done in the
following sample:
http://geekswithblogs.net/michelotti/archive/2008/06/28/mvc-json---jsonresult-and-jquery.aspx

$.fn.fillSelect = function(data) {
    return this.clearSelect().each(function() {
        if (this.tagName == 'SELECT') {
            var dropdownList = this;
            $.each(data, function(index, item) {
                var option = new Option(item.Text,
item.Value);      //  <---- this row throws an error

                if ($.browser.msie) {
                    dropdownList.add(option);
                }
                else {
                    dropdownList.add(option, null);
                }
            });
        }
    });
}

When I run it I receive the error "Text is null or no object"
Through debugging I found out, that data looks like a plain string,
content:
[{"CustomerId":18,"Items":[{"Text":"Sample Project","Value":6},
{"Text":"Tickets","Value":17}]}]

Any ideas, what I'm doing wrong? I'm not sure right now whether it's
the web service, or the way I try to access the elements in the
result.

So, any help / hints would be greatly appreciated.

Thanks,
Nina

Reply via email to