DropDownList not responding to Knockout when inside an Ajax call

[ghunterMember]

My application will have multiple DropDownLists that interact with other components, so I’m trying to encapsulate a lot of the common functionality. Hopefully others will find my code useful, but I have an issue that needs resolved with the Disabled property (see the bottom)

This function will set up a DropDownList’s observables, and you can pass it either an AJAX URL or a JavaScript Array:

      var DropDownViewModel = function(options){
        var self = this;
        
        self.list = ko.observableArray([]);
        self.index = ko.observable(0);
        self.disabled = ko.observable(true);
        
        self.value =  ko.computed(function() {
          return self.list()[self.index()];
        }, this);
        
        if(options.type === "ajax") {
        
          self.list(["Loading"]);
    
          $.ajax({
            url: options.url,
            method: "GET",
            dataType: "JSON"
          }).done(function(data) {
            self.list(data);
            self.disabled(false);
          }).error(function(){
            
            self.list(["Error"])
            
          });
          
        } else if(options.type === "local") {
          
          self.list(options.list);
          self.disabled(false);
          
        }
        return this;
  
      };

You can set up the View Model quite easily like this:

      var ViewModel = function() {
        
        this.position = new DropDownViewModel({
          type: "ajax",
          url: "someAjaxUrl"
        });
        
        this.rank = new DropDownViewModel({
          type: "local",
          list: ["A", "B", "C"]
        });
        
      };

The HTML then looks like this (Twitter Bootstrap grid code included):

      <div class="row">
        <div class="span3">
          <div data-bind='jqxComboBox: {source: position.list, selectedIndex: position.index, disabled: position.disabled, autoDropDownHeight: true, height: 25, width: 200}'></div>
        </div>
        <div class="span3">
          <div data-bind='jqxComboBox: {source: rank.list, selectedIndex: rank.index, disabled: rank.disabled, autoDropDownHeight: true, height: 25, width: 200}'></div>
        </div>
      </div>      

Here’s the problem – when I set up multiple Ajax DropDowns only the first one to load is re-enabled/dis-disabled. No problems when they are all local, and all of the lists are properly updated via Ajax.

Can anyone see why this might be the case? I’m going to upload a working test to Azure soon.

[ghunterMember]

Here is a page uploaded to my Azure staging area that shows the error:

http://aeb6ea6b6a2d47beacdd168a272ca384.cloudapp.net/knockout.html

None of the three Ajax loaded DropDownLists will be enabled when the Local lists are also on the page. Note that the Ajax lists are indeed being populated properly, it’s just the disabled observable that isn’t working.

[Peter StoevKeymaster]

Hi,

The issue here seems to be not in our widget. The issue is that the Ajax call in the provided sample fails so the “error” callback is called and the disabled observable property is not changed as it is changed in the “done” callback only.

Update: After the page’s update, you may also update the jQWidgets Scripts and CSS files to the latest version. I noticed that you use 2.8.3, but the current one is 2.9.2.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[ghunterMember]

After updating to the latest jqwidgets version this works perfectly! Thank you!

[Author]

Posts