Bind data to combo from a web service on load

[Venkata Rajesh]

Hi,

I have a combobox that need to have its items populated based on the results from a web service. I did try the below and could not get it working. Help appreciated.

<telerik:RadComboBox ID="radTestCombo" runat="server"  EnableLoadOnDemand="true"
     EnableItemCaching="true" WebServiceSettings-UseHttpGet="true" OnClientLoad="GetServers" Label="Servers">
</telerik:RadComboBox>

Below is the javascript i use to get the information from a web service.

function GetServers(sender, eventArgs) {
                combo = sender;
                combo.trackChanges();
                $.ajax({
                    url: "http://localhost/sampleservice/sample.svc/GetAll",
                    dataType: 'json',
                    type: "GET",
                    success: function (data) {
                        alert('success');
                        $.each(data, function (i, val) {
                            var comboItem = new Telerik.Web.UI.RadComboBoxItem();
                            alert(comboItem);
                            comboItem.set_text(val.toString());
                            combo.get_items().add(comboItem);
                        });
                    }
                });
                combo.commitChanges();
                alert(combo.get_items().get_count());
            }

The alert with "success" message is never called but from fiddler i get a 200 Http status code. The WCF service method returns a list of string. Below is the raw response from fiddler:

HTTP/1.1 200 OK
Content-Length: 602
Content-Type: application/json; charset=utf-8
Date: Thu, 12 Jul 2012 15:34:46 GMT

["John","Smith","Charlie","DAVID","James","Bond"]

Additionally i did remove the dataType setting in the ajax call and resulted in the same. Also  i did add an error setting with an alert and have this popup on my screen even though Fiddler reported a 200 OK status with the data.

[Jerry T.]

What is the error being returned in your alert then?

You'll have to investigate that and see why it's not returning as a success.

[Venkata Rajesh]

I modified the error function to have 3 parameters jqXHR, textStatus and errorThrown and when i try to see what error is being sent back i do not get anything in the errorThrown but the textStatus just has the text "error".

When i checked the developer tools i had the below error:

XMLHttpRequest cannot load http://localhost:1234/Sampleservice/Sample.svc/GetAll. Origin http://localhost:1234 is not allowed by Access-Control-Allow-Origin.

Is it possible to add the AccessControl allow origin header via jquery.

[Jerry T.]

Venkata,

Is that port 1234 a different port # from your application?

These links might be of help to you:

http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin


For more info re: the error:
https://developer.mozilla.org/En/HTTP_Access_Control

Jerry