Im new to using Knockout for data-binding and MVC, I can retrieve data just fine returning in a Json object, but when I attempt to return user data back and selections to save my values are null. If I separate remove saveContent div and place the save button control in the searchAudio div then I the user input data is returned but I need to return all the form data that the user selects and inputs.
<form action="AudioLookup" method="get" enctype="multipart/form-data">
<div id="saveContent" data-bind="with: saveContent">
<div id="allAudio" data-bind="with: $root.allAudio">
<h3>Audio Playback</h3>
<table>
<thead>
<tr>
<th>Bind Audio</th>
<th>ID</th>
<th>Text</th>
<th>Url</th>
<th>File Name</th>
<th>Prompt Type</th>
</tr>
</thead>
<tbody data-bind="foreach: AudioResults">
<tr>
<td><input type="radio" name="adgroup"/></td>
<td data-bind="text : _id"></td>
<td ></td>
<td data-bind="text: aUrl"></td>
<td data-bind="text: fileName"></td>
<td data-bind="text: PromptType"></td>
</tr>
</tbody>
</table>
<button data-bind="click: getAllAudio">Get Audio</button>
</div>
<br />
<hr />
<div id="searchAudio" data-bind="with: $root.searchAudio">
<h3>Refine Audio Lookup</h3>
<label for="CallCenterDLL">Choice Call Center: </label>
<select id="CallCenterDLL" data-bind ="value: searchfields.CCCode" name="CallCenterT">
<option value =""></option>
<option value = "11">Kansas City</option>
<option value = "6">Dallas</option>
<option value = "7">Houston</option>
<option value = "8">SanAntonio</option>
<option value = "12">Charlotte</option>
<option value = "9">Raleigh</option>
</select>
<div>
<label for="RBgroup">Choice Prompt Type: </label>
<br/>
<input type="radio" name="RBgroup" value='3' data-bind ="checked: searchfields.searchType"/> Agent<br/>
<input type="radio" name="RBgroup" value='4' data-bind ="checked: searchfields.searchType"/>Office<br/>
</div>
<input type="text" name="serchTxt" placeholder="search string Here" data-bind="value: searchfields.searchVal" onblur="minleng(this.value,25);Minimum(this,3);" onkeypress="minleng(this.value,25)" />
<button data-bind="click: runQuery">Search Data</button>
#* <div id="select-all" data-bind="with: $root.select-all"> *#
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="select-all" id="select-all"/>Select All
</th>
</tr>
</thead>
<tbody data-bind="foreach: dataResult">
<tr>
<td><input data-bind="value: PK" class="selectedPK" type="checkbox" /></td>
<td data-bind="text: PKType"></td>
<td data-bind="text: DisplayVal"></td>
</tr>
</tbody>
</table>
#*</div>*#
</div>
<button data-bind="click: SaveQuery">Save Data</button>
</div>
</form>
function saveViewModel() {
var self = this;
var SviewModel = function (CCCode, PK, PKType, SearchType, SearchVal, Text, fileName, aUrl) {
self.searchfields.CCCode = ko.observable(CCCode);
self.searchfields.searchType = ko.observable(SearchType);
self.searchfields.searchVal = ko.observable(SearchVal);
self.PK = ko.observable(PK);
self.PKType = ko.observable(PKType);
self.Text = ko.observable(Text);
self.fileName = ko.observable(fileName);
self.aUrl = ko.observable(aUrl);
}
self.state = ko.observable();
self.dataResult = ko.observableArray();
self.SaveQuery = function () {
alert(ko.toJSON(SviewModel));
$.ajax(
{
url: "/CallCenter/SaveQuery",
contentType: "application/json",
type: "POST",
dataType: "json",
data: ko.toJSON(self.dataResult),
success: function (data) {
self.SaveResult(data);
}
});
}
}
you alert :-
alert(ko.toJSON(SviewModel));
the data you send :-
data: ko.toJSON(self.dataResult),
and that is :-
self.dataResult = ko.observableArray();
which seems unused.... so not too surprising everything is null
Related
I using ViewModel and I have table with checkboxes, I can only check one by one boxes, but I need check all option but I need my var values to be defined, because I pass that values to controller and do something.
$('.checktip').click(function () {
var idemployee = $('.idemployee').val();
var idtip= $(this).attr('idtip');
var chk = $(this).prop('checked');
$.ajax({
url: UrlSettingsDocument.Books,
data: { idemployee: idemployee, idtip: idtip, chk: chk },
type: "POST",
success: function (result) {
if (result.result == "Redirect") {
window.location = result.url;
}
}
});
});
My .cshtml
<table class="table table-striped grid-table">
<tr>
<th>Samp</th>
<th>Id of Book</th>
<th>
//Button for check all *(NOT IMPLEMENTED)*
<button type="button" class="checkall">Select/Deselect</button>
</th>
</tr>
#foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
{
<tr>
<td>#item.idtip</td>
<td>#item.tipname</td>
<td>
<div class="pure-checkbox">
<input type="checkbox" idtip="#item.idtip" class="checktip" checked="#(item.idemployee == ViewBag.idemployee ? true : false)" name="#item.id.ToString()" id="#item.id.ToString()" />
<label for="#item.id.ToString()"></label>
</div>
</td>
</tr>
}
</table>
<input type="hidden" value="#ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" />
</div>
Use check box to check all checkbox instead of button.
On check change, using the class check/uncheck all checkbox inside the table.
$('#checkall').on('change', function() {
$('.checktip:checkbox').prop('checked', $(this).is(":checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped grid-table">
<tr>
<td><input type="checkbox" id="checkall" />Check All</td>
<td><input type="checkbox" class="checktip" /></td>
</td>
</td>
</td>
<td><input type="checkbox" class="checktip" /></td>
</td>
</td>
<td><input type="checkbox" class="checktip" /></td>
</td>
<td><input type="checkbox" class="checktip" /></td>
</tr>
</table>
Using Knockout JS here.
I have a HTML table and the table has 4 columns. I have button to add a row to table and then remove button against each row to delete it. I also have a dropdown in the first column of this table. The dropdown is populated from the button click event outside the table. Below is my html:
<table class="table table-bordered">
<thead class="mbhead">
<tr class="mbrow">
<th>Input</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td>
<select class="form-control" data-bind="options: $parent.ddl, optionsText: 'name', value: $parent.selectedColumnValue, optionsCaption: '--Select--', event: { change: $parent.ddlChanged }">
</select>
</td>
<td><span class="input-small" data-bind="value: firstName" /></td>
<td><span class="input-small" data-bind="value: lastName" /></td>
<td><span class="input-small" data-bind="value: address" /></td>
<td>
<input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
</td>
</tr>
</tbody>
</table>
<div class="col-xs-12 col-sm-6">
<input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
<input type="submit" value="Get Data" data-bind="click: GetData" class="btn btn-primary" />
</div>
My knockout code can be seen in the jsfiddle link as below.
What I am looking for is:
When the user selects the dropdown the selected dropdown text gets populated to that rows one column and the value gets populated to that rows other columns/cell.
My Issue:
1.) I am not able to get the selected text and selected value from the dropdown
When the dropdown selected index change event is fired the event param has the below value as seen in console:
firstName : ƒ c()
lastName: ƒ c()
address : ƒ c()
proto : Object
2.) Secondly I don't know how I could update other column values based on the dropdown selection.
The json that gets binded to dropdown is like below:
'[{"FirstName":"Alex","LastName":"Sanders","Address":123},{"FirstName":"Sam","LastName":"Billings","Address":"Mahony Street"}]';
Here is my fiddle:
https://jsfiddle.net/aman1981/njbyumrs/12/
Inputs are appreciated.
You've got some parent and level stuff mixed up, and your table was binding on value instead of text. I moved the drop down binding, selectedValue to Item since it's at the row level and not the parent level. I used the KO with binding to show the values inside selectedValue for that part of the HTML.
I also added a <pre> tag with the KO values so you can see what happens as you interact with it and the KO model data changes.
Side note: The three properties in Item don't need to be observable in this demo as the values do not change while on the screen.
var ViewModel = function() {
var self = this;
//Empty Row
self.items = ko.observableArray([new Item()]);
self.ddl = ko.observableArray();
self.addRow = function() {
self.items.push(new Item());
};
self.removeRow = function(data) {
self.items.remove(data);
};
self.GetData = function() {
if (self.ddl().length === 0) {
var item1 = new Item("Alex", "Sanders", "Maple Street");
self.ddl.push(item1);
var item2 = new Item("Sam", "Billings", "Mahony Street");
self.ddl.push(item2);
}
}
}
var Item = function(fname, lname, address) {
var self = this;
self.firstName = ko.observable(fname);
self.lastName = ko.observable(lname);
self.address = ko.observable(address);
self.selectedValue = ko.observable();
};
vm = new ViewModel()
vm.GetData();
ko.applyBindings(vm);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-bordered">
<thead class="mbhead">
<tr class="mbrow">
<th>Input</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td><select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--'"> </select></td>
<td data-bind="with: selectedValue">
<span data-bind="text: firstName"></span>
</td>
<td data-bind="with: selectedValue">
<span data-bind="text: lastName"></span>
</td>
<td data-bind="with: selectedValue">
<span data-bind="text: address"></span>
</td>
<td>
<input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
</td>
</tr>
</tbody>
</table>
<div class="col-xs-12 col-sm-6">
<input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
</div>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
<select class="form-control" name="suppliername" ng-model="suppliername" data-ng-change="supplier_data1(suppliername)" required>
<option value="">Select</option>
<option ng-repeat="custids in supp_nmArray" value="{{custids.Supplier_Id}}" >{{custids.name}}
</option>
</select>
<table class="table table-striped" >
<thead>
<tr>
<th>Product Name</th>
<th>Qty</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products">
<td>{{ p.Product_Name }}
<input type="hidden" class="form-control" name="sname" ng-model="sname" required>
</td>
<td>
<input type="text" class="form-control" name="finalqty" ng-model="p.finalqty" ng-change="change_qty(p.productrate,p.finalqty)"/>
</td>
<td>
<span ng-init="GetProdcutDetails(p.Product_Name,sname,'productrate'+$index)"></span>
<input type="text" class="form-control" name="purches_rate" ng-model="p.purches_rate" id="productrate{{$index}}">
</td>
</tr>
</tbody>
</table>
var app=angular.module("myapp",['ui.bootstrap']);
app.controller("ctrl",function($scope,$http)
{
$scope.supplier_data1 = function(suppliername)
{
$scope.sname=suppliername;
}
$scope.GetProdcutDetails = function(Product_Name,sname,productrate)
{
$http.post("get_prodcut_rate.php",{'Product_Name':Product_Name,'suppliername':$scope.sname})
.success(function(data)
{
var x = document.getElementById(productrate);
document.getElementById(productrate).value = data[0].purches_rate;
});
}
});
I'am getting product rate value in ng repeat by use of javascript(getElementById).
How to assign the document.getElementById to ng-model in ng-repeat ?
I need to pass the value in another function. kinldy help me
Thanks you in Advance.
I want to show hide form fields on the basis of Select Value. e.g my form has 5 text fields and 1 select option field In those fields 4 fields are depended on select value. if i select cloth then cloth type and cloth value remains, lether type and lether value hide. but when i select Bags lether type and lether value remain else hide. i am trying some condition and ng-class="{'hideCheck': isHideCheck}" model but it behaving abnormally.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-class="{'hideCheck': isHideCheck}">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-class="{'hideSave': isHideSave}">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>
use ng-hide to hide the element. ng-class is used to alter css.
I changed your code, it will hide element valus and type when option checking is selected, just an example for you, not implement your feather. you would like to read https://docs.angularjs.org/api/ng/directive/ngHide.
by the way , ng-repeat is a good way to do table things.
var app = angular.module('mainApp', []);
app.controller('appCont', function($scope) {
$scope.ProductTypeChnaged = function () {
$scope.ProductStatus = $scope.ProductValue;
if ($scope.AccountStatus == 'checking') {
$scope.isHideCheck = !$scope.isHideCheck;
} else if ($scope.AccountStatus == 'saving'){
$scope.isHideSave = !$scope.isHideSave;
}
};
});
.hideCheck{display:none}
.hideSave{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="appCont">
<p>Product box status: {{ ProductStatus }}</p>
<form name="frm">
<table>
<tr>
<td>Account Type :
</td>
<td>
<select name="ProductType" ng-model="ProductValue" ng-change="ProductTypeChnaged()">
<option value="checking">Checking</option>
<option value="saving">Saving</option>
</select><br />
</td>
</tr>
<tr>
<td>Amount :
</td>
<td>
<input type="text" name="amount" ng-model="amount" required>
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether value :
</td>
<td>
<input type="text" name="Lethervalue" ng-model="Lethervalue">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Lether Type :
</td>
<td>
<input type="text" name="LetherType" ng-model="LetherType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth Type :
</td>
<td>
<input type="text" name="ClothType" ng-model="ClothType">
</td>
</tr>
<tr ng-hide="ProductStatus == 'checking'">
<td>Cloth value :
</td>
<td>
<input type="text" name="Clothvalue" ng-model="Clothvalue">
</td>
</tr>
<tr>
<td colspan="2" align="right">
<button ng-click="addProduct()" ng-disabled="frm.$invalid">Add Account</button>
</td>
</tr>
</table>
</form>
</div>
When I'm adding new product to a product list its not working. So the products get loaded well but the ng-click function does not getting called. (The alert I put in the addProduct function is not executed).
HTML
<div ng-controller="ProductController as ProductCtrl">
Zoeken <input type="text" ng-model="search" placeholder="Search" />
<div>
Filter Type
<button ng-repeat="cat in categories" ng-click="filterProductsByCategory(cat)">{{cat}}</button>
</div>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>ID</th>
<th>Product</th>
<th>Type</th>
<th>Price</th>
<th>Toevoegen</th>
</tr>
<tr ng-repeat="product in ProductCtrl.products">
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.type}}</td>
<td>{{product.price}}</td>
<td></td>
</tr>
<tr><td></td>
<td><input type="text" name="newProduct.name" ng-model="productCtrl.newProduct.name"></td>
<td><input type="text" name="newProduct.price" ng-model="productCtrl.newProduct.price"></td>
<td><input type="text" name="newProduct.type" ng-model="productCtrl.newProduct.type"></td>
<td><a href ng-click="productCtrl.addProduct()">Product {{productCtrl.newProduct.name}} toevoegen</a></td></tr>
</table>
Any help would appreciated.
The controller:
app.controller('ProductController', function(productService) {
var that = this;
productService.getProducts().success(function(data) {
that.products = data;
});
this.newProduct = "";
this.addProduct = function() {
that.products.push(this.newProduct);
window.alert(that.products);
this.newProduct = "";
};
});
Its a typo, your controller alias name is ProductCtrl not productCtrl, Additionally you need to change your ng-model's to correct the same thing
Replace productCtrl to ProductCtrl will fix your issue.
<tr>
<td>
<input type="text" name="newProduct.name" ng-model="ProductCtrl.newProduct.name"/>
</td>
<td>
<input type="text" name="newProduct.price" ng-model="ProductCtrl.newProduct.price"/>
</td>
<td>
<input type="text" name="newProduct.type" ng-model="ProductCtrl.newProduct.type"/>
</td>
<td>
<a href ng-click="ProductCtrl.addProduct()">
Product {{productCtrl.newProduct.name}} toevoegen
</a>
</td>
</tr>