How to pass javascript value as json object for controller in ruby ​​on rails?

Question

I have a task to make knockout.js using ruby ​​on rails. I want to send javascript value to controller. My index.html.erb

<%= javascript_include_tag "knockout-2.2.0","country-state" %> <table> <thead> <tr> <th>Country</th> <th>State</th> <th> </th> </tr> </thead> <tbody data-bind='foreach: lines'> <tr> <td> <select data-bind='options: sampleProductCategories, optionsText: "country", optionsCaption: "Select...", value: category'> </select> </td> <td data-bind="with: category"> <select data-bind='options: products, optionsText: "country", optionsCaption: "Select...", value: $parent.product'> </select> </td> <td> <a href='#' data-bind='click: $parent.removeLine'>Remove</a> </td> </tr> </tbody> </table> <button data-bind='click: addLine'>Add</button> <button data-bind='click: save'>Submit</button> <script> $(document).ready(function() { function formatCurrency(value) { return "$" + value.toFixed(2); } var CartLine = function() { var self = this; self.category = ko.observable(); self.product = ko.observable(); self.subtotal = ko.computed(function() { return self.product() ? self.product().price * parseInt("0" + self.quantity(), 10) : 0; }); // Whenever the category changes, reset the product selection self.category.subscribe(function() { self.product(undefined); }); }; var Cart = function() { // Stores an array of lines, and from these, can work out the grandTotal var self = this; self.lines = ko.observableArray([new CartLine()]); // Put one line in by default self.grandTotal = ko.computed(function() { var total = 0; $.each(self.lines(), function() { total += this.subtotal() }) return total; }); // Operations self.addLine = function() { self.lines.push(new CartLine()) }; self.removeLine = function(line) { self.lines.remove(line) }; self.save = function() { var dataToSave = $.map(self.lines(), function(line) { return line.product() ? { state: line.product().country } : undefined }); alert("Could now send this to server: " + JSON.stringify(dataToSave)); $.ajax({ url: '/employees/<% =@employee.id %>', dataType: 'json', async: false, method:'PUT', data:dataToSave, success: function(data) { } }); }; }; ko.applyBindings(new Cart()); }); </script> 

In the terminal, it looks like

 Started GET "/employees/1?undefined=undefined" for 127.0.0.1 at Mon Jan 21 13:36:15 +0530 2013 Processing by EmployeesController#show as JSON Parameters: {"id"=>"1", "undefined"=>"undefined"} 

How to send selected state and country to controller as json object?

Answer 1

Just try this one.

  $.ajax({ url:'/employees/<% =@employee.id %>', dataType: 'json', data: { passval: dataToSave}, success: function(msg) { } }); 

you can use passval variable on ajax page to get dataTosave value,
and the msg variable will return a response from ajax.

Answer 2

Any ajax http call will do.

 $.ajax({ url: myUrl, dataType: 'json', async: false, data: myData, success: function(data) { //stuff } }); 

or

  $.getJSON(muUrl, myData, function(data) { //stuff });