CODEWITHSUNDEEP
javascriptknockout.js
Vijay Sisodia
Vijay Sisodia

Reputation: 57

Unable to get property 'subscribe' of undefined or null reference

I am experiencing an issue with Implementing knockout Js while subscribing a dropdown value change in my HTML Page. Here is my HTML

    <div>
      <span>Request Types : </span>
      <select data-bind="options: requestTypes,
                    optionsText: 'Name',
                    optionsCaption: '--Select--',
                   value: selectedRequestType">
       </select>
    </div>

While the ViewModel is as shown below

                        wd.viewModel = function () {
                        var data = {};
                        var self = this;
                        var url = '';
                        var selectedRequestingCountry = ko.observable("");
                        self.optionsProvider = new wd.optionsProvider(self);
                        self.objGenralInfo = new wd.GI_form(data);
                        /* For Requesting Country */
                        url = wd.ConfigObject.baseUrl + wd.ConfigObject.masterServiceUrl + wd.ConfigObject.category.importingCountries;     // Fetch Requesting Countries     
                        self.importingCountries = self.optionsProvider.get("importingCountries", url, {});
                        self.selectedRequestingCountry = ko.observable("");
                        this.requestingCountryArea = ko.observable("");

                        /* For Generic Name*/
                        url = wd.ConfigObject.baseUrl + wd.ConfigObject.masterServiceUrl + wd.ConfigObject.category.genericNames;     // Fetch Generic Names     
                        self.genericNames = self.optionsProvider.get("genericNames", url, {});
                        self.selectedGenericName = ko.observable("");

                        /* Override Requesting Country Address */
                        self.IsOverride = ko.observable(false);

                        /* For Request Types */
                        self.selectedRequestType = ko.observable("");
                        self.selectedTradeName = ko.observable("");
                    };

                    // Whenever the selected Generic Name changes, populate the Request Type
                    var myName = wd.viewModel.selectedGenericName.subscribe(function () {
                        wd.viewModel.url = wd.ConfigObject.baseUrl + wd.ConfigObject.masterServiceUrl + wd.ConfigObject.category.requestTypes + "/" +
                              wd.viewModel.selectedGenericName().Name;
                        wd.viewModel.requestTypes = wd.viewModel.optionsProvider.get("requestTypes", url, '');                                        // Fetch request types based on generic name
                    }, wd.viewModel);

                    $(function () {
                        ko.applyBindings(wd.viewModel);
                    });

Request Type dropdown values are populated only after Generic Name Drop down values are loaded.User has to select the Generic name first. On Page load, it throws an error " Unable to get property 'subscribe' of undefined or null reference".

Any help is much appreciated as I am new to knockout javascript MVVM framework.

Upvotes: 3

Views: 3140

Answers (1)

omerio
omerio

Reputation: 1196

You have declared your viewModel as wd.viewModel = function () {}, this is a constructor function and you need to create a new instance of it before binding or subscribing. If you add something like this:

wd.viewModel = new wd.viewModel();

before this line it should work

var myName = wd.viewModel.selectedGenericName.subscribe(function () {

Upvotes: 3

Related Questions