Knockout Populate Fields On Change Of Dropdown

I'm new at Knockout JS and i am struggling with this issue, need your guidance. Everything works fine i am fable to get ProductID and it's ProductOffers VIA Ajax but when i second

Solution 1:

Why are you declaring ProductOffers as ko.observable("")? It should be declared as an observable array instead: ProductOffers: ko.observableArray([]);

Also, in your JFiddle:

functionGetProductOffers(ProductID) {
    varVal = "[new Offer(1,'Name'),new Offer(2,'Product A'),new Offer(4,'Product B'),new Offer(5,'Product C')]";               
    returnVal;
}

Should be:

functionGetProductOffers(ProductID) {
    varVal = [newOffer(1,'Name'),newOffer(2,'Product A'),newOffer(4,'Product B'),newOffer(5,'Product C')];             
    returnVal;
}

http://jsfiddle.net/sPrVq/2/

EDIT:

Try to modify your setup as follows:

  [WebMethod]
publicstaticstringGetProductOffers(long ProductID)
{   
    List<DMS.ProductOfferDO> offers = ProductOffers.Get(ProductID);

    return JsonConvert.SerializeObject(offers);
}

You need to import: using Newtonsoft.Json; first of course.

And why did you use post? It should be a get:

functionGetProductOffers(ProductID) {

         $.get("testing.aspx/GetProductOffers",
            { ProductID: ko.toJSON(ProductID) }
            )
            .done(function (data) {
                 viewModel.ProductOffers(JSON.parse(data));
            })
            .fail(function (data) { })
            .always(function () { });

}

EDIT2:

viewModel.ProductID.subscribe(function (newValue) {

    viewModel.ProductOffers.removeAll();

    if (newValue) {
        var productOffers = GetProductOffers(newValue);
        viewModel.ProductOffers(productOffers);
    }

});

Let us know how this goes please!

Solution 2:

<td data-bind="with: ProductID"> is incorrect - this would only be necessary if you had a ProductID nested object. You don't so it is not needed. Just bind the second list to ProductOffers not $data.ProductOffers.

If what you are trying to achieve is to not show the second list until there are offers then just change <td data-bind="with: ProductID"> to <td data-bind="if: ProductOffers"> and that should work as expected.

EDIT: I cannot say for sure as I don't know exactly what is returned, but my guess is there is a problem with ProductOffers. The ajax call returns the result and that is what you set ProductOffers to, but is the structure of each ProductOffer the same as what you have set for your select list binding? You have Name and ID as the bound values, are those properties of the items you return from your ajax call (GetProductOffers)?

EDIT 2 Ok, I see from your chat with Diana that your web method returns something like "[new Offer(..)...]". My guess is you have that method coded to simply return a string or something, right? You need to actually create a List<Offer> and then serialize that with something like JavascriptSerializer or JSON.net. You need to return JSON from the web method. It would be helpful if you showed the web method code, then we could help you figure out what is going wrong.

EDIT 3 I would definitely recomment not creating the JSON " by hand" - use either the built-in JavascriptSerializer or, better yet, use JSON.net. While it is not a must, it is cleaner and simpler. PLus, why re-invent the wheel, so to speak? Check Diana's answer out - she has besically outlined precisely what you need to do to get this to work. Good luck! :)