Question

I have an interesting problem that i can’t seem to figure out. I am using JSON to grab some data from a datasource and display the information in a form.

What is not happening properly is that i can’t seem to get jQuery to add an attribute of “selected” to the proper option.

My problem is that if I use some static data via a variable it works fine. Here is my code that does what I want it to do: Here’s a quick JS Fiddle of the below code

  <ul>
            <li class="item">
                <label>Name</label>
                <input type="text" id="txtName"></li>
            <li class="item">
                <label>Description</label>
                <input type="text" id="txtDescription"></li>
            <li class="item">
                <label> Unit</label>
              <select id="ddlUnit" >
                    <option value="blank" >Original Stuff</option>
                    <option value="#">#</option>
                    <option value="$">$</option>
                    <option value="%">%</option>
                    <option value="Days">Days</option>
                    <option value="Hrs">Hrs</option>
                    <option value="Mins">Mins</option>
                    <option value="Mths">Mths</option>
                    <option value="Qtrs">Qtrs</option>
                    <option value="Rate">Rate</option>
                    <option value="Wks">Wks</option>
                    <option value="Yrs">Yrs</option>
                </select>
            </li>
        </ul>




    <script type="text/javascript">
         $(document).ready(function() {
                $("#txtName").val('Testing Name!');
                $("#txtDescription").val('Testing The Description!');
                var selectedKPI = '#';
                $("#ddlUnit").find("option[value='"+selectedKPI+"']").attr('selected','selected');
         });
    </script>

That works. It adds “Selected” attribute to the proper option.

However! When I try to grab the data from a data source it doesn’t work. What’s the deal?!

Heres’ my code that does not work. This code loads the data into the “input” fields fine. I can even get the proper data to come across when I use an alert. It just doesn’t add “selected” attribute to the proper option.

 <ul>
            <li class="item">
                <label>
                    Name</label>
                <input type="text" id='txtName' /></li>
            <li class="item">
                <label>
                    Description</label>
                <input type="text" id='txtDescription' /></li>
            <li class="item">
                <label>
                    Unit</label>
                <select id='ddlUnit'>
                    <option value="blank">Select a KPI</option>
                    <option value="#">#</option>
                    <option value="$">$</option>
                    <option value="%">%</option>
                    <option value="Days">Days</option>
                    <option value="Hrs">Hrs</option>
                    <option value="Mins">Mins</option>
                    <option value="Mths">Mths</option>
                    <option value="Qtrs">Qtrs</option>
                    <option value="Rate">Rate</option>
                    <option value="Wks">Wks</option>
                    <option value="Yrs">Yrs</option>
                </select>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
         function LoadKpiCallback(result) {
                var kpi = result.d;              
                $("#txtName").val(kpi.KpiName);
                $("#txtDescription").val(kpi.KpiDescription);
                var selectedKPI = kpi.KpiUnit ;
                alert(selectedKPI + "2");
                $("#ddlUnit").find("option[value='"+selectedKPI+"']").attr("selected","selected");
         }

        function SaveSuccess() {
           //close the window                 
            CloseKendoWindow();            
            //refresh the parent grid
            LoadKpiList(); 
        }

        function AjaxError(){
           alert('There was a problem saving your KPI!');
        }

        function SaveKPI(){
        //load kpi object from controls
        var kpi = {KPI: {
                    KpiID :<%= Me.KpiID %>,
                    KpiName: $("#txtName").val(),
                    KpiDescription :$("#txtDescription").val(),
                    KpiUnit:$("#ddlUnit option:selected").text()
                   }};
                   alert(kendo.stringify(kpi));

                //use ajax to save
                 $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async:true,
                    cache: false,                
                    data: kendo.stringify(kpi),
                    url: "Services/RockService.svc/SaveKPI",
                    success: SaveSuccess,
                    error: AjaxError                    
                });    
            }

        function LoadKpi() {
            $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async:true,
                    cache: false,                
                    data: kendo.stringify({KpiID : <%= Me.KpiID %>}),
                    url: "Services/RockService.svc/GetKPI",
                    success: LoadKpiCallback,
                    error: function (xhr) {
                        alert("Bad");
                        alert(xhr.responseText);
                    }
                });    
            }

            LoadKpi();

    </script>

What on earth could be the problem? Why would it work with local data, and fail with remote data, but only on the select??

Thanks in advance for any help.

Answer 1

$.trim() should remove any additional spaces.