Question

Scenario

I have a input box for post codes. When you put in a postcode it makes a call to a web service and gets all the suburb names back and binds them to a list, like an input dropdown list.

This works when I return a List<string> from the web service for just the names. No problem.

The problem arises when I go to save the values to the db. When it gets saved I cannot save the name of the suburb in the suburb column in the db. I have to save the id of that suburb for the foreign key constraint.

So then I changed the List<> thing slighty and cheated and returned the following.

<ArrayOfString>
<string>8213</string>
<string>BROOKFIELD</string>
<string>8214</string>
<string>CHAPEL HILL</string>
<string>8215</string>
<string>FIG TREE POCKET</string>

etc….

The reason for this is so I can have the value of the item in the drop down as the id and hence can save that in the code behind on save.

To do this, I did the following:

$(result).each(function (index, value) {

            var suburbname;

            var pattern = new RegExp('[0-9*]');
            var m = pattern.exec(value);

            if (m == null) {
                suburbname = value

                var o = new Option(suburbname, suburbid);
                /// jquerify the DOM object 'o' so we can use the html method
                $(o).html(suburbname);
                $(document.getElementById('<%= suburb.ClientID %>')).append($("<option></option>")
                                                                .attr("value", suburbid)
                                                                .text(suburbname));

            }
            else {
                suburbid = value
            }

That works as well… the drop down only has name and the value for those is the number

The problem….?

I am making assumptions above which I don’t like… I.e. that the name never has a number it, that the web service will always return the id first to set the id before running the add to the dropdown for the first time. It just feels wrong…. :S (thoughts?)

So, if I change the web service to return a datatable, to out the following (which is what the whole query returns):

<Suburbs diffgr:id="Suburbs1" msdata:rowOrder="0">
<SuburbID>8213</SuburbID>
<SuburbName>BROOKFIELD</SuburbName>
<StateID>4</StateID>
<StateCode>07</StateCode>
<CountryCode>61</CountryCode>
<TimeZones>10.00</TimeZones>
<Postcode>4069</Postcode>
</Suburbs>

Is there a way of acheiving the same as above in js/jquery. So when the user inputs the postcode the webservice returns the datatable and then binds it to the select with the SuburbID going into the value and the name going into the text???

Any other ways I could return the data from the web service to solve this?

Note: essentially I need the option to look like this:

<option value="8213">BROOKFIELD</option>

I also thought I could make a second call to get just the id on the bind of the text… but I kind of want to only make one call….

Thanks in adance,

Cheers
Robin

.net, C#, js, jquery, web service…..

Solution with guidance from Billy

The adding to the select using the other method below did not work, but my original way did once I had the correct variables so just used that….

The service returns:

<ArrayOfMyClass>
<MyClass>
<ID>8213</ID>
<Name>BROOKFIELD</Name>
</MyClass>

… etc

The js is: (note: it is onchange of the postcode input box. it runs a web service and then on success runs the following)

function OnCompleted(result) {

        var _suburbs = result;
        var i = 0;

        $(_suburbs).each(function () {
            var SuburbName = _suburbs[i].Name;
            var SuburbID = _suburbs[i].ID;

            $(document.getElementById('<%= suburb.ClientID %>')).append($("<option></option>")
                                                               .attr("value", SuburbID)
                                                                .text(SuburbName));
            i = i + 1;
        });

Answer 1

You can get your webservice to return that (or any subset that contains at least the id and the name) :

<Suburbs diffgr:id="Suburbs1" msdata:rowOrder="0">
<SuburbID>8213</SuburbID>
<SuburbName>BROOKFIELD</SuburbName>
<StateID>4</StateID>
<StateCode>07</StateCode>
<CountryCode>61</CountryCode>
<TimeZones>10.00</TimeZones>
<Postcode>4069</Postcode>
</Suburbs>

Than use your javascript foreach like such :

var root = $('#<%= suburb.ClientID %>');

$(result).each(function (index, value) {

    var row = $(value)[0];

    $('<option></option>')
        .attr('value', $('SuburbID', row).text())
        .text($('SuburbName', row).text())
        .appendTo(root);
}​);

EDIT : here is a jsfiddle : http://jsfiddle.net/rRqJa/2/