How to pass Knockout JS attr binding value to ajax post method as variable

Question

I have 2 knockout view models in my page. I want to send a value of my first view model to an ajax post which get's data and adds it to my second view model based on the value I pass through from my first view model.

What I am trying to do Is pass through an Order ID as a Variable to my second Ajax post so that I can get the Order Details for the Specific Order Number.

I data bind an tag like this:

<a data-bind="attr: { href: Url, title: Detail }, text: OrderNumber"></a>

Here is part of the First ViewModel:

      var OrderDS = function (data) {
      var self = this;
      self.OrderNumber = ko.observable(data.OrderNumber);
      self.Url = ko.observable("#");
      self.Detail = ko.observable("Product Details For This Order");
     }

I want To pass the Observable OrderNumber to my secondary Ajax Post as the variable:

 $.ajax({
            url: "AccountsReceivible.aspx/GetOrderDetails",
            data: '{}', //How Do I ADD the Selected Value Here???
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "JSON",
            timeout: 10000,
            success: function (Result) {
                var MappedDetail =
              $.map(Result.d,
             function (item) {
                 return new OrderDetailDS(item);
             }
               );
                self.OrderDetail(MappedDetail);

            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });

Fabian Schmengler Fabian Schmengler · Accepted Answer · 2013-01-23T11:04:47

You don't have to write your JSON as a string, just provide a real JS object:

data : { orderNumber : self.OrderNumber() }

(assuming that self is the view model)

Edit:

For associations between view models you will have to care yourself. In your case:

var OrderDetailViewModel = function (OrderDetail) {
    var self = this;
    var orderViewModel = OrderViewmodel;

Now replace self with orderViewModel in my first code snippet.

How to pass Knockout JS attr binding value to ajax post method as variable

1 Answers