HTML form to a Excel spreadsheet (database) - html

I would like some help not modifying this code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fillHidTable(){
var htqf; //-- hidden field
var rf; //-- retrieved field
for ( var i = 1; i < 5; i++ ) {
rf = "htqf"+i;
document.getElementById(rf).innerHTML = document.getElementById("Q"+i+"CALC").value;
}
tableToExcel('hidTable', 'Analysis Results');
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
<title>HTML Form Data to Excel</title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css" media="screen">
.divCenMid{font-family:Arial,sans-serif;font-size:14pt;font-style:normal;font-weight:700;text-align:center;vertical-align:middle;margin:0;}
.allbdrCenMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:middle;margin:0;}
.allbdrCenTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:top;margin:0;}
.allbdrLtMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:middle;margin:0;}
.allbdrLtTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:top;margin:0;}
</style>
</head>
<body>
<table width= "565px" cellspacing="0" cellpadding="0" style="border-spacing:0;" id="QMSTable">
<col width="25px"/>
<col width="120px"/>
<col width="360px"/>
<col width="60px"/>
<tr>
<td class="divCenMid" colspan = "4"> QMS Assessment</td>
</tr>
<tr>
<td class="allbdrCenMid"> No</td>
<td class="allbdrCenMid"> Criteria</td>
<td class="allbdrLtMid"> Question</td>
<td class="allbdrCenMid"> Score</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q1</td>
<td class="allbdrLtTop"> Quality Unit Independency</td>
<td class="allbdrLtTop"> Do you have the Quality Unit?</td>
<td class="allbdrCenMid">
<input id="Q1CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q1CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q2</td>
<td class="allbdrLtTop"> Apply PICS GMP</td>
<td class="allbdrLtTop"> Which GMP regulation do you use?</td>
<td class="allbdrCenMid">
<input id="Q2CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q2CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q3</td>
<td class="allbdrLtTop"> Deviation or Non-conformance</td>
<td class="allbdrLtTop"> Do you have a deviation or non-conformance procedure?</td>
<td class="allbdrCenMid">
<input id="Q3CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q3CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q4</td>
<td class="allbdrLtTop"> Complaint</td>
<td class="allbdrLtTop"> Do you have a customer complaint procedure?</td>
<td class="allbdrCenMid">
<input id="Q4CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q4CALC"/>
</td>
</tr>
</table>
<div id="hidTable" style="display: none">
<table id="testTable">
<caption>Supplier Risk Analysis</caption>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>No.</th>
<th>Question</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1</td>
<td>Do you have the Quality Unit?</td>
<td id="htqf1">-</td>
</tr>
<tr>
<td>Q2</td>
<td>Apply PICS GMP?</td>
<td id="htqf2">-</td>
</tr>
<tr>
<td>Q3</td>
<td>Do you have a deviation or non-conformance procedure?</td>
<td id="htqf3">-</td>
</tr>
<tr>
<td>Q4</td>
<td>Do you have a customer complaint procedure?</td>
<td id="htqf4">-</td>
</tr>
</tbody>
</table>
</div>
<input type="button" onclick="fillHidTable()" name=PatientDatabase value="Export Data to Excel">
</body>
</html>
It makes a web based form which I can play with and edit, but is there a way I can just change the last button to save the excel table into cells to make more of a database and is there a way I can save it to a specific file and to have it fill in or append the data.

you can convert HTML div to excel
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()

Related

multiple search from one entry

I populate this table from an API and try to do a multiple lookup filter from one entry separating each entry by a comma.
they load the data correctly but when trying to search it does nothing
Is this code any good or how could I do a multiple search from one input?
View
File ApiControllers.js
<script>
var testApp = angular.module("LogModule", []);
testApp.controller("TransController", function ($scope, $http) {
$http.get('/api/Trans').then(function (response) {
$scope.logTrans = response.data;
$scope.Show = [];
$scope.separator = ""
$scope.buscar = function () {
let search = $scope.separator.split(",");
$scope.Show =
$scope.logTrans
.filter((item) => {
let a = search.map((value) => {
return JSON.stringify(item)
.toUpperCase()
.indexOf(value.toUpperCase()) > -1 ? 1 : 0;
}).reduce((x, y) => x + y);
return a > 0
})
}
$scope.searchInput()
});
});
File html
<!DOCTYPE html>
<html ng-app="LogModule">
<head>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ApiCotrollers.js"></script>
<link />
</head>
<body>
<h1>Consulta de transacciones</h1>
<div ng-app="LogModule" class="table-responsive" ng-controller="TransController">
<input type="text" ng-model="filter" ng-change="searchInput()" class="form-control" placeholder="Buscar documentos" aria-describedby="basic-addon2 ">
<br>
<table class="table table-bordered table-hover" align="center">
<tr class="active">
<th> Registro</th>
<th> FechaInsert</th>
<th> FechaModificacion</th>
<th>Observaciones</th>
<th> IdIntegracion</th>
<th>Integrado</th>
<th> Error</th>
<th>ObjetoIntegracion</th>
<th> Bodega</th>
</tr>
<tr ng-repeat=" p in Show track by $index">
<td class="success"> {{p.Registro}}</td>
<td class="success"> {{p.FechaInsert}} </td>
<td class="success"> {{p.FechaModificacion}} </td>
<td class="danger"> {{p.Observaciones}} </td>
<td class="success">{{p.IdIntegracion}} </td>
<td class="success"> {{p.Integrado}} </td>
<td class="success"> {{p.Error}} </td>
<td class="danger"> {{p.ObjetoIntegracion}}</td>
<td class="success">{{p.Bodega}}</td>
</tr>
</table>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>

Dompdf is not working with more than 2 pages data

When I have 85 rows in a table dompdf is working properly but when I get more than 85 rows in table rows are not displaying in 3rd page instead of rows are overlapping in 2nd page.
I am using dompdf with codeigniter. I have tried to remove all styles in my code. Tried to use page-break-before: always;page-break-before: avoid;page-break-before: auto;
My dompdf code is -
public function load_view_download($html,$fileName)
{
$dompdf = new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'potrait');
$dompdf->render();
$time = time();
$dompdf->stream($fileName.'_'.$time);
}
html code is -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="invoice_main_wrapper" >
<div class="invoice" >
<table >
<tbody>
<tr>
<td>
<table >
<thead >
<tr>
<td >#</td>
<td >item</td>
<td>code</td>
<td >tag</td>
<td >MRP</td>
<td >Qty</td>
<td >Price</td>
<td >AMOUNT</td>
</tr>
</thead>
<tbody class="invoice_bd" >
<?php for($i=1;$i<=100;$i++){?>
<tr class="bb_td">
<td ><?=$i?></td>
<td >gafd</td>
<td >adfa</td>
<td >adfdas</td>
<td >1000</td>
<td >10</td>
<td >100</td>
<td >100</td>
</tr>
<?php }?>
<!-- for total -->
<tr class="bb_td">
<td ></td>
<td ></td>
<td ></td>
<td ></td>
<td >Total</td>
<td >121</td>
<td >100</td>
<td >1000</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td >
<table class="subtotal_invoice" style="border-spacing: 0px; float:right;">
<tr>
<td >Total In Words:</td>
<td >Five hundred</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<div class="note" style="font-weight: 600; width:100%;marign-top: 100px;" >
<h5 style="font-size: 14px;font-weight: 400;">
Hello
</h5>
<div style="border-bottom: 1px solid #AFAFAF;">
<h5 style="margin:0;font-size: 14px;font-weight: 400;line-height: 0;"></h5>
</div>
</div>
<!-- footer -->
</div>
controller code is -
$this->content['data']['title'] = 'pdf'
$html = $this->load->view('testpdf', $this->content, true);
$this->pdf->load_view_download($html,'testpdf');
With more than 85 rows i m getting this issue.please check image
https://ibb.co/gD0x7Js
With less than or equal to 85 rows its working fine. please check image
https://ibb.co/qkX0pBg
It is better to use Mpdf, for multiple files. Mpdf converts the HTML to PDF easily

Knockout: Can't push to observableArray

I've recently started using KnockOut, so I'm very new to this.
I have completed every tutorial on their site, yet can't get this specific thing to work.
I have to arrays, on the left being all the items, on the right being the items you've selected.
Once you click on the item (left table), it should .push to the right table
ViewModel:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
request.done(function (data) {
item.addItem = function () {
alert("item clicked, materiaal id: " + this.MateriaalId);//works
alert(this.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
I'm assuming it's either in this code here, or I'm not showing it correctly in my html (because I'm not getting any console errors)
HTML (right side)
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<table class="orderFormArticlesTable" style="width: 47%;float: right; font-size: 9pt;">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<!--<td><input class="orderedQty" style="max-width: 15%" value="1" />[pieces]</td>-->
<td>Remove</td>
</tr>
</tbody>
</table>
I'm not sure I've understood you right, but I'd solve your task this way:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
function proscessRequest(item) {
item.addItem = function () {
//alert("item clicked, materiaal id: " + this.MateriaalId);//works
//alert(item.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
ko.applyBindings(viewModel);
proscessRequest({MateriaalSku: "M1", MateriaalDescription: "D1", MateriaalId: "1"});
proscessRequest({MateriaalSku: "M2", MateriaalDescription: "D2", MateriaalId: "2"});
proscessRequest({MateriaalSku: "M3", MateriaalDescription: "D3", MateriaalId: "3"});
proscessRequest({MateriaalSku: "M4", MateriaalDescription: "D4", MateriaalId: "4"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<div>Alavilable items:</div>
<div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: addItem">Add</div></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 30px;">
<div>Ordered items:</div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: function() { $parent.orderedItems.remove($data); }">Remove</div></td>
</tr>
</tbody>
</table>
</div>
</form>
Note
I've mocked request with "proscessRequest" function called after bindings have been applied.

Node.js Request - Can`t decode HTML page

I am trying to decode this HTML page using Node.js with Request module: http://www.receita.fazenda.gov.br/PessoaJuridica/CNPJ/cnpjreva/Cnpjreva_Erro.asp
javascript console returns the charset windows-1252:
document.characterSet = "windows-1252";
I tried using all avaliable encodings in iconv-lite but all return the wrong text.
var body = iconv.decode(new Buffer(body), "windows1252");
Anyone have any idea how to decode this page?
Sample code:
request('http://www.receita.fazenda.gov.br/PessoaJuridica/CNPJ/cnpjreva/Cnpjreva_Erro.asp', function (err, res, body) {
var body = iconv.decode(new Buffer(body), "windows1252");
console.log(body);
});
Returns:
...
<td valign="middle" align="left"><b><font face="Arial" size="2">
Acesso n�o permitido.
</td>
...
Decoded string should be:
...
<td valign="middle" align="left"><b><font face="Arial" size="2">
Acesso não permitido.
</td>
...
Thanks.
This code
var request = require('request');
request('http://www.receita.fazenda.gov.br/PessoaJuridica/CNPJ/cnpjreva/Cnpjreva_Erro.asp', function (err, res, body) {
console.log(body);
});
Outputs the page
<script language="JavaScript">
function proxima(link)
{
location.replace(link);
return false;
}
function carrega(vobjeto) {
for (var va = 0 ; va < document.forms[0].elements.length; va++) {
if (document.forms[0].elements[va].name == vobjeto) {
document.forms[0].elements[va].focus();
}
}
return false;
}
function volta(vvolta) {
history.go(vvolta*-1);
return false;
}
function SaltaCampo (campo, prox, tammax, teclapres)
{
var tecla = teclapres.keyCode;
vr = campo.value;
tam = vr.length;
if (tecla != 0 && tecla != 10 && tecla != 24)
if (tam == tammax)
prox.focus();
}
</script>
<html>
<head>
<title>Tela de respostas</title>
</head>
<body background="area_texto_back.jpg">
<table border="0" width="100%">
<tr>
<td valign="middle" align="left">
<table border="0" cellspacing="0" cellpadding="0">
<!-- Inibido tendo em vista novo modelo site da SRF (Luis Carlos-22/11/2003)
<tr>
<td>
<img src="srf.gif" height="48" alt="srf.gif (2074 bytes)" width="184">
</td>
</tr> -->
<tr>
<td>
<font color="#000080" face="Arial">
<b>Acesso indevido</b></font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="middle" align="left"><hr size="1">
</td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td>
</td>
</tr>
<tr>
<td valign="middle" align="left"><b><font face="Arial" size="2">
Contribuinte,
</td>
<td valign="middle" align="right" >
</td>
</tr>
<tr>
</table>
<table border="0" width="100%">
<tr>
<td>
</td>
</tr>
<tr>
<td valign="middle" align="left"><b><font face="Arial" size="2">
Acesso n�o permitido.
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td valign="middle" align="left" colspan="2"><hr size="1">
</td>
</tr>
</table>
</body>
</html>
The encoding the page returns using document.characterSet is wrong, the correct encoding is ISO-8859-1
body = iconv.decode(body, "ISO-8859-1");

How to initialize json data in knockout js

I am new bie on knockout js.i create a crud operation one page app in which you click on add field a form appear you add the data and click on add button it add the data and if you click on save button it show the data in json format but when i am clicking on my save button i just want to save the data which is in form at that time not the whole data.i am able to do this functionality on click of delete but dont know how to perform on click of save here is whole structure
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="knockout-3.1.0.js"></script>
</head>
<body>
<table style="width:100%;" data-bind="visible:showFields">
<tbody>
<tr>
<th style="width:100px;">Branch </th>
<th style="width:100px;">Enter Value</th>
</tr>
</tbody>
<tr>
<td>Branch ID (int):</td>
<td>
<input data-bind="value: BranchId" />
</td> <!--,valueUpdate:'keypress'-->
</tr>
<tr>
<td>Name :</td>
<td>
<input data-bind="value: Name" /></td>
</tr>
<tr>
<td>Description :</td>
<td>
<input data-bind="value: Description" /></td>
</tr>
<tr>
<td>Template :</td>
<td>
<select data-bind="options: Templates, value:
Template, optionsCaption: 'Select Template...'"></select></td>
</tr>
<tr>
<td>MetaKeyword :</td>
<td>
<input data-bind="value: MetaKeyword" /></td>
</tr>
<tr>
<td>MetaDescription :</td>
<td>
<input data-bind="value: MetaDescription" /></td>
</tr>
<tr>
<td>MetaTitle :</td>
<td>
<input data-bind="value: MetaTitle" /></td>
</tr>
<tr>
<td>EnableSearch :</td>
<td>
<select data-bind="options: EnableSearchs, value:
EnableSearch, optionsCaption: 'Select Search...'"></select>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" data-bind="click:
AddBranch">Add Branch</button>
<button type="button" data-bind="click:
SaveBranch">Save Branch</button>
</td>
</tr>
</table>
</div>
<div style="width:70%;float:left;display:inline-block;" data-bind="visible:show">
<h2>List of Branches</h2>
<table style="width:100%;" data-bind="visible: Branches().length > 0" border="0">
<tr>
<th>Branch Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Template</th>
<th>MetaKeyword</th>
<th>MetaDescription</th>
<th>MetaTitle</th>
<th>EnableSearch</th>
</tr>
<tbody data-bind="foreach: Branches">
<tr>
<td><span data-bind="text: BranchId" /></td>
<td>
<span data-bind="text: Name" /></td>
<td>
<span data-bind="text: Description" /></td>
<td>
<select data-bind="options: $root.Templates,
value: Template"></select></td>
<td>
<span data-bind="text: MetaKeyword" /></td>
<td>
<span data-bind="text: MetaDescription" /></td>
<td>
<span data-bind="text: MetaTitle" />
</td>
<td>
<select data-bind="options: $root.EnableSearchs,
value: EnableSearch"></select>
</td>
<td><a href="#" data-bind="click: $root.
DeleteBranch">Delete</a></td>
<td>edit</td>
</tr>
</tbody>
</table>
AddFields
</div>
</body>
<script>
function Branch(data) {
this.BranchId = ko.observable(data.BranchId);
this.Name = ko.observable(data.Name);
this.Description = ko.observable(data.Description);
this.Template = ko.observable(data.Template);
this.MetaKeyword = ko.observable(data.MetaKeyword);
this.MetaDescription = ko.observable(data.MetaDescription);
this.MetaTitle = ko.observable(data.MetaTitle);
this.EnableSearch = ko.observable(data.EnableSearch);
}
function BranchViewModel() {
var self = this;
self.EnableSearchs = ko.observableArray(['Yes', 'No']);
self.Templates = ko.observableArray(['Template1', 'Template2']);
self.Branches = ko.observableArray([]);
self.BranchId = ko.observable();
self.Name = ko.observable();
self.Description = ko.observable();
self.MetaKeyword = ko.observable();
self.MetaDescription = ko.observable();
self.MetaTitle = ko.observable();
self.EnableSearch = ko.observable();
self.Template = ko.observable();
self.editBranch = ko.observable();
self.show = ko.observable(true);
self.showFields = ko.observable(false);
self.flag = ko.observable(false);
self.AddBranch = function () {
if (self.flag()) {
self.editBranch().BranchId(self.BranchId())
self.editBranch().Name(self.Name())
self.editBranch().Description(self.Description())
self.editBranch().EnableSearch(self.EnableSearch())
self.editBranch().MetaKeyword(self.MetaKeyword())
self.editBranch().MetaDescription(self.MetaDescription())
self.editBranch().MetaTitle(self.MetaTitle())
self.editBranch().Template(self.Template())
self.flag(false);
self.show(true);
self.showFields(false);
self.BranchId(""),
self.Name(""),
self.Description(""),
self.EnableSearch(""),
self.MetaKeyword(""),
self.MetaDescription(""),
self.MetaTitle(""),
self.Template("")
}
else{
self.Branches.push(new Branch({
BranchId: self.BranchId(),
Name: self.Name(),
Description: self.Description(),
EnableSearch: self.EnableSearch(),
MetaKeyword: self.MetaKeyword(),
MetaDescription: self.MetaDescription(),
MetaTitle: self.MetaTitle(),
Template: self.Template()
}));
self.BranchId(""),
self.Name(""),
self.Description(""),
self.EnableSearch(""),
self.MetaKeyword(""),
self.MetaDescription(""),
self.MetaTitle(""),
self.Template("")
self.show(true);
self.showFields(false);
}
};
self.AddField = function(){
self.show(false);
self.showFields(true);
}
self.DeleteBranch = function (branch) {
alert(ko.toJSON({ data: branch }));
};
self.edit = function (branch) {
self.editBranch(branch);
self.show(false);
self.showFields(true);
self.BranchId(branch.BranchId());
self.Name(branch.Name());
self.Description(branch.Description());
self.EnableSearch(branch.EnableSearch());
self.MetaKeyword(branch.MetaKeyword());
self.MetaDescription(branch.MetaDescription());
self.MetaTitle(branch.MetaTitle());
self.Template(branch.Template());
self.flag(true);
}
self.SaveBranch = function (branch) {
alert(ko.toJSON( self.Branches));
};
}
$(document).ready(function () {
ko.applyBindings(new BranchViewModel());
});
</script>
</html>
secondly i want to display some json data on my page as my page get load. here is my json data.
[{"BranchId":"1","Name":"us","Description":"united states","Template":"Template1","MetaKeyword":"us","MetaDescription":"us","MetaTitle":"us","EnableSearch":"Yes"},{"BranchId":"2","Name":"europe","Description":"europe","Template":"Template1","MetaKeyword":"euro","MetaDescription":"euro","MetaTitle":"euro","EnableSearch":"Yes"},{"BranchId":"3","Name":"aus","Description":"aus","Template":"Template1","MetaKeyword":"aus","MetaDescription":"aus","MetaTitle":"aus","EnableSearch":"Yes"}]
Here's how you do it.. You need to convert each object from json to Branch. You can use computed for that.
Create new var for the JSON dataset
var dummyData = [{"BranchId":"1","Name":"us","Description":"united states","Template":"Template1","MetaKeyword":"us","MetaDescription":"us","MetaTitle":"us","EnableSearch":"Yes"},{"BranchId":"2","Name":"europe","Description":"europe","Template":"Template1","MetaKeyword":"euro","MetaDescription":"euro","MetaTitle":"euro","EnableSearch":"Yes"},{"BranchId":"3","Name":"aus","Description":"aus","Template":"Template1","MetaKeyword":"aus","MetaDescription":"aus","MetaTitle":"aus","EnableSearch":"Yes"}];
self.PopulateBranches = ko.computed(function(){
ko.utils.arrayForEach(dummyData, function(item){
self.Branches.push(new Branch(item));
});
});
Here's updated JSFiddle for you : http://jsfiddle.net/x2ubuy44/