|
This Validation only use Update Mode. How can i use new record add mode. please explain
|
|
|
|
|
On Saving and updating both below code works:
self.create = function () {
self.CandidateDetail().showErrors(true);
if (self.CandidateDetail().isValid()) {
};
};
and for showing validations below line works:
self.CandidateDetail().showErrors(true);
So, it is written and working both for save and update. Otherwise please send me ur used code i will do changes in that..
|
|
|
|
|
.validationMessage { color: Red; }
.customMessage { color: Orange; }
Manage Portal Subscription
Add New Subscription
Subscription Name
Amount
Months
Expiry Date
@* *@
@* Delete
Edit*@
Sorry... No Records found
Update - Subscription Details
Subscription Name*
Amount*
Months*
Expiry Date*
Update Cancel
@Html.ValidationSummary()
Add - Subscription Details
Subscription Name*
Amount*
Months*
Expiry Date*
Save Cancel
@Html.ValidationSummary()
// var SubscriptionViewModel = function () {
function SubscriptionViewModel(){
var self = this;
self.SubscriptionLIST = ko.observableArray();
self.SubscriptionServices = ko.observable("");
self.createPortalSubscription = function () {
SubscriptionServices.ExpiryDate = $("[id$=ExpiryDate]").val();
var myURL = '@Url.Action("CreatePortalSubscription", "Subscription")';
if (self.SubscriptionServices()) {
alert("Edit");
self.errors = ko.validation.group(self.SubscriptionServices);
}
else {
alert("Add");
self.errors = ko.validation.group(self);
alert(self.errors().length);
}
if (self.errors().length == 0) {
$.ajax({
type: "POST",
url: myURL,
data: ko.toJSON(SubscriptionServices),
contentType: "application/json",
success: function (data) {
alert("Record Added Successfully");
fnLoadGrid();
self.SubscriptionServices(null);
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
});
});
},
error: function () {
alert("Failed.. Add Subscription");
}
});
}
else { self.errors.showAllMessages(); }
};
self.UpdatePortalSubscription = function () {
var SubscriptionServices = self.SubscriptionServices();
SubscriptionServices.ExpiryDate = $("[id$=EditExpiryDate]").val();
SubscriptionServices.CreateID = '@UserInfo.UserID';
var myURL = '@Url.Action("CreatePortalSubscription", "Subscription")';
if (self.SubscriptionServices()) {
alert("Edit");
debugger;
self.SubscriptionServices().errors = ko.validation.group(self.SubscriptionServices, { deep: true });
alert(self.SubscriptionServices().errors().length);
}
else {
alert("Add");
self.errors = ko.validation.group(myViewModel);
}
if (self.SubscriptionServices().errors().length == 0) {
$.ajax({
type: "POST",
url: myURL,
data: ko.toJSON(SubscriptionServices),
contentType: "application/json",
success: function (data) {
alert("Record Updated Successfully");
fnLoadGrid();
self.SubscriptionServices(null);
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
});
});
},
error: function () {
alert("Failed.. Update Subscription");
}
});
}
else { self.errors.showAllMessages(); }
};
};///end var PersonViewModel
function fnLoadGrid() {
ko.validation.rules.pattern.message = 'Invalid.';
ko.validation.init({
messageTemplate: 'customMessageTemplate',
registerExtenders: true,
messagesOnModified: true,
insertMessages: true,
parseInputAttributes: true,
// grouping: { deep: true },
decorateElement: true
});
var myViewModel = new SubscriptionViewModel();
$.ajax({
url: '@Url.Action("GetPortalSubscriptionDDL", "Subscription")',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
var SubscriptionData1 = new SubscriptionData(data);
myViewModel.SubscriptionLIST(SubscriptionData1);
ko.applyBindings(myViewModel, document.getElementById('gridPanel'));
}
});
};
function SubscriptionData(data) {
var self = this;
self.SubscriptionName = ko.observable(data.SubscriptionName).extend(
{
required: {
params: true,
message: "Subscription Name is required"
}
});
self.Amount = ko.observable(data.Amount).extend(
{
required: {
params: true,
message: "Amount is required"
}
});
self.Months = ko.observable(data.Months).extend(
{
required: {
params: true,
message: "Months is required"
}
});
self.ExpiryDate = ko.observable(data.ExpiryDate).extend(
{
required: {
params: true,
date: true,
message: "Expiry Date is required"
}
});
self.PortalSubID = ko.observable(data.PortalSubID);
self.PortalID = ko.observable(data.PortalID);
};
function SubscriptionData(data) {
var self = this;
self.SubscriptionName = ko.observable(data.SubscriptionName).extend(
{
required: {
params: true,
message: "Subscription Name is required"
}
});
self.Amount = ko.observable(data.Amount).extend(
{
required: {
params: true,
message: "Amount is required"
}
});
self.Months = ko.observable(data.Months).extend(
{
required: {
params: true,
message: "Months is required"
}
});
self.ExpiryDate = ko.observable(data.ExpiryDate).extend(
{
required: {
params: true,
date: true,
message: "Expiry Date is required"
}
});
self.PortalSubID = ko.observable(data.PortalSubID);
self.PortalID = ko.observable(data.PortalID);
};
$("#btnAddService").click(function () {
$("#gridPanel").hide("slide", function () {
$("#addServicePanel").show("slide", function () {
$(function () {
$("[id$=ExpiryDate]").datepicker(
{
changeMonth: true,
changeYear: true,
autoclose: true,
showOn: "button",
buttonImage: "../Images/calendar.gif",
buttonImageOnly: true,
// yearRange: '-90:+0',
onClose: function (dateText, inst) {
this.focus(); this.blur()
}
});
});
});
});
});
$("#btnSaveServices").click(function () {
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
//$("#loginName").focus();
});
});
});
$(document).ready(function () {
$(function () {
$("[id$=ExpiryDate]").datepicker({
changeMonth: true,
changeYear: true,
autoclose: true,
showOn: "button",
buttonImage: "../Images/calendar.gif",
buttonImageOnly: true,
// yearRange: '-90:+0',
onClose: function (dateText, inst) {
this.focus(); this.blur()
}
});
});
// var myViewModel = new SubscriptionViewModel();
fnLoadGrid();
});
this is my code pl solve problem . my code work in SPA Concept.
|
|
|
|
|
Hi,
Why are u using two html template section for same purpose (save/update). u can use same html for save and update operation and implement the same using primary key. Below is the sample code for SPA concept for the same save and edit functionality, please use the same concept and let me know in case of any difficulty in getting the same:
Regarding your code, update html sections parent model is missing in the binding (i.e.
<label>Amount*</label><input id="txtamount" data-bind='value: Amount' />
should be
<label>Amount*</label><input id="txtamount" data-bind='value: SubscriptionServices().Amount />')
cshtml file:
<div id="KinDetails">
<div class="row">
<div class="large-12 medium-12 small-12">
<h2>Next of Kin</h2>
</div>
</div>
<div class="row">
<div class="large-4 medium-6 small-12 columns">
<div class="panel">
<div>
<label>Name*</label>
<input data-bind="value: KinDetail().Name, css:{'required-field':KinDetail().showerror(KinDetail().Name)}, valueUpdate: 'afterkeydown'" type="text" title="KDName" maxlength="50" />
</div>
<div>
<label>Relationship*</label>
<input data-bind="value: KinDetail().Relationship, css:{'required-field':KinDetail().showerror(KinDetail().Relationship)}, valueUpdate: 'afterkeydown'" type="text" title="KDRelationship" maxlength="50" />
</div>
<div style="display: none;">
<label>Qualification</label>
@Html.DropDownList("ddlQualification", (IEnumerable<SelectListItem>)ViewBag.Qualification, "", new { data_bind = "value: KinDetail().Qualification" })
</div>
</div>
</div>
<div class="large-4 medium-6 small-12 columns">
<div class="panel">
<div>
<label>Telephone Number*</label>
<input data-bind="numeric: KinDetail().TelephoneNo,value: KinDetail().TelephoneNo, css:{'required-field':KinDetail().showerror(KinDetail().TelephoneNo)}, valueUpdate: 'afterkeydown'" type="text" title="KDTNo" maxlength="12" />
</div>
<div>
<label>Email Address</label>
<input data-bind="value: KinDetail().EmailAddress, css:{'required-field':KinDetail().showerror(KinDetail().EmailAddress)}, valueUpdate: 'afterkeydown'" type="text" title="KDEAddress" maxlength="50" />
</div>
<div style="display: none;">
<label>Skill Set</label>
<input data-bind="value: KinDetail().Skills" type="text" title="KDSkill" maxlength="100" />
</div>
</div>
</div>
<div class="large-4 medium-12 small-12 columns">
<div class="panel">
<div>
<label>Address</label>
<input data-bind="value: KinDetail().Address" type="text" title="KDAddress" maxlength="100" />
</div>
<div>
<label>Town / City</label>
<input data-bind="value: KinDetail().City" type="text" title="KDCity" maxlength="50" />
</div>
<div>
<label>County / State</label>
<input data-bind="value: KinDetail().State" type="text" title="KDState" maxlength="50" />
</div>
<div>
<label>Post Code</label>
<input data-bind="Alphanumeric: KinDetail().PostCode,value: KinDetail().PostCode" type="text" title="KDCode" maxlength="10" />
</div>
<div>
<label>Country</label>
@Html.DropDownList("ddlCountry", (IEnumerable<SelectListItem>)ViewBag.Country, "", new { data_bind = "value: KinDetail().Country" })
</div>
<div class="alignright">
<input id="btnSave" data-bind="event:{click: create}" type="button" class="button" value="Save" />
<input id="btnCancel" data-bind="event:{click: reset}" class="button" type="button" value="Reset" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<div class="panel" style="height: 200px !important; overflow: auto !Important;">
<table>
<thead>
<tr id="tableHeader">
<th style="display: none;"></th>
<th>Name
</th>
<th class="show-for-large-up">Relationship
</th>
<th>Address
</th>
<th class="show-for-large-up">City
</th>
<th>State
</th>
<th class="show-for-large-up">Email Address
</th>
<th class="show-for-large-up">Telephone Number
</th>
<th>
</th>
</tr>
</thead>
<tbody data-bind="foreach: KinDetails">
<tr>
<td data-bind="text: Id" style="display: none;"></td>
<td style="max-width: 50px; overflow: hidden;" data-bind="text: Name"></td>
<td style="max-width: 100px; overflow: hidden;" data-bind="text: Relationship"></td>
<td style="max-width: 100px; overflow: hidden;" data-bind="text: Address"></td>
<td style="max-width: 100px; overflow: hidden;" data-bind="text: City"></td>
<td style="max-width: 100px; overflow: hidden;" data-bind="text: State"></td>
<td style="max-width: 100px; overflow: hidden;" data-bind="text: EmailAddress"></td>
<td style="max-width: 100px; overflow: hidden;" data-bind="text: TelephoneNo"></td>
<td>
<a href="javascript:void(0);" data-bind="click: $root.edit">
<img src="~/Images/silk/page_edit.png" alt="" /></a>
<a href="javascript:void(0);" data-bind="click: $root.delete">
<img src="~/Images/silk/cross.png" alt="" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div id="insideModal" style="width:305px;height:130px;margin-left: -10%;" class="reveal-modal small" data-reveal="">
<div id="message" style="text-align:center;"></div>
<br/> <br/>
<div style="text-align:center;">
<input type="button" value="Yes" name="YesDelete" id="YesDelete" class="button" style="padding-top:7px;height:2.3125rem;" data-bind="click: $root.Yes">
<input type="button" value="No" name="NoDelete" id="NoDelete" class="button" style="padding-top:7px;height:2.3125rem;" data-bind="click: $root.No">
</div>
</div>
</div>
<div class="popoverfooter">
<div class="row">
<div class="large-12 medium-12 small-12 columns">
<div class="alignright">
@*<input type="button" class="button close-reveal-modal" style="width:72px !Important; height: 24px !Important; font-size:small; font-weight:400; color:white; margin-top:-7px; padding-top:7px; padding-left:20px;" value="Close" />*@
</div>
</div>
</div>
</div>
</div>
JS file:
var checkK = 0;
$(document).ready(function () {
if (checkK == 0) {
checkK++;
if ($('#myModal').find('h2').html() != null) {
if ($('#myModal').find('h2').html().toString().toLowerCase().indexOf('next of kin') != -1) {
fillKinDetails();
$('#successBoxContent').parent('div').hide();
$('#alertBoxContent').parent('div').hide();
}
}
};
});
function fillKinDetails() {
if (window.location.href.toString().toLowerCase().indexOf('employeepersonaldetails') != '-1') {
var emptyVal = '';
var candidateID = getCandidateID();
var viewModel = new KinViewModel();
var kinData = [];
$.ajax({
url: '../../api/KinApi/GetAll?CandidateId=' + candidateID,
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
var init = [];
for (var i = 0; i < data.length; i++) {
kinData.push(new KinData(data[i].Id, data[i].Name, data[i].Address, data[i].City, data[i].PostCode, data[i].TelephoneNo, data[i].CandidateId, data[i].Relationship, data[i].Qualification, data[i].State, data[i].Country, data[i].EmailAddress, data[i].CreatedBy, data[i].CreatedOn, data[i].ModifiedBy, data[i].ModifiedOn, data[i].Skills));;
}
var kin = new KinData(0, '', '', '', '', '', '', '', 0, '', 0, '', '', '', '', '', '');
viewModel.KinDetail(kin);
viewModel.KinDetails(kinData);
try {
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false
});
ko.applyBindings(viewModel, document.getElementById('KinDetails'));
}
catch (e) {
}
},
error: function (err) {
}
});
};
}
function KinViewModel() {
var self = this;
var emptyVal = '';
self.KinDetails = ko.observableArray([]);
self.KinDetail = ko.observable("");
self.create = function () {
self.KinDetail().showErrors(true);
var CId = getCandidateID();
if (self.KinDetail().isValid()) {
self.KinDetail().CandidateId(CId);
$.ajax({
url: '../../api/KinApi/Create',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(self.KinDetail),
success: function (data) {
self.KinDetails.removeAll();
var init = [];
for (var i = 0; i < data.length; i++) {
init.push(new KinData(data[i].Id, data[i].Name, data[i].Address, data[i].City, data[i].PostCode, data[i].TelephoneNo, data[i].CandidateId, data[i].Relationship, data[i].Qualification, data[i].State, data[i].Country, data[i].EmailAddress, data[i].CreatedBy, data[i].CreatedOn, data[i].ModifiedBy, data[i].ModifiedOn, data[i].Skills));;
}
self.KinDetails(init);
self.KinDetail(new KinData(0, '', '', '', '', '', '', '', 0, '', 0, '', '', '', '', '', ''));
$('#successBoxContentP').html(kinSucessMsg).parent('div').show();
$('#alertBoxContentP').parent('div').hide();
getAudit();
}
}).fail(
function (xhr, textStatus, err) {
$('#alertBoxContentP').html(kinErrorMsg).parent('div').show();
$('#successBoxContentP').parent('div').hide();
});
};
};
self.closeKinpopup = function () {
$('#dialog').dialog('close');
};
self.edit = function (kin) {
HideMessages();
self.KinDetail(new KinData(kin.Id(), kin.Name(), kin.Address(), kin.City(), kin.PostCode(), kin.TelephoneNo(), kin.CandidateId(), kin.Relationship(), kin.Qualification(), kin.State(), kin.Country(), kin.EmailAddress(), kin.CreatedBy(), kin.CreatedOn(), kin.ModifiedBy(), kin.ModifiedOn(), kin.Skills()));
};
var deleteData = '';
self.delete = function (d) {
HideMessages();
deleteData = d;
self.OpenConfirmMessage();
};
self.OpenConfirmMessage = function () {
$("#message").html('Are you sure you wish to delete?');
$("#insideModal").foundation('reveal', 'open');
};
self.CloseConfirmMessage = function () {
$("#insideModal").foundation('reveal', 'close');
$("#myModal").foundation('reveal', 'open');
};
self.No = function () {
self.CloseConfirmMessage();
};
self.Yes = function () {
self.CloseConfirmMessage();
$.ajax({
url: '../../api/KinApi/DeleteKin',
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(deleteData),
success: function (data) {
self.KinDetails.removeAll();
var init = [];
for (var i = 0; i < data.length; i++) {
init.push(new KinData(data[i].Id, data[i].Name, data[i].Address, data[i].City, data[i].PostCode, data[i].TelephoneNo, data[i].CandidateId, data[i].Relationship, data[i].Qualification, data[i].State, data[i].Country, data[i].EmailAddress, data[i].CreatedBy, data[i].CreatedOn, data[i].ModifiedBy, data[i].ModifiedOn, data[i].Skills));;
}
self.KinDetails(init);
self.KinDetail(new KinData(0, '', '', '', '', '', '', '', 0, '', 0, '', '', '', '', ''));
$('#successBoxContentP').html(kinDeleteMsg).parent('div').show();
$('#alertBoxContentP').parent('div').hide();
getAudit();
}
}).fail(
function (xhr, textStatus, err) {
$('#alertBoxContentP').html(kinErrorMsg).parent('div').show();
$('#successBoxContentP').parent('div').hide();
});
};
self.reset = function () {
HideMessages();
var kinData = new KinData(0, '', '', '', '', '', '', '', 0, '', 0, '', '', '', '', '','');
self.KinDetail(kinData);
}
};
function KinData(Id, Name, Address, City, PostCode, TelephoneNo, CandidateId, Relationship, Qualification, State, Country, EmailAddress, CreatedBy, CreatedOn, ModifiedBy, ModifiedOn, Skills) {
ko.bindingHandlers.numeric = {
init: function (element) {
$(element).on("keydown", function (event) {
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
(event.keyCode == 88 && event.ctrlKey === true) ||
(event.keyCode == 67 && event.ctrlKey === true) ||
(event.keyCode >= 35 && event.keyCode <= 39)) {
return;
}
else {
if (event.keyCode == 107 || event.keyCode == 109 || event.keyCode == 110 || event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105) || (event.ctrlKey && event.altKey)) {
event.preventDefault();
}
}
});
}
};
ko.bindingHandlers.Alphanumeric = {
init: function (element) {
$(element).on("keydown", function (event) {
var specialKeys = new Array();
specialKeys.push(8);
specialKeys.push(9);
specialKeys.push(46);
specialKeys.push(36);
specialKeys.push(35);
specialKeys.push(37);
specialKeys.push(39);
var keyCode = event.keyCode == 0 ? event.charCode : event.keyCode;
if ((event.keyCode == 86 && event.ctrlKey === false) || (keyCode >= 48 && keyCode <= 58 && event.shiftKey === false) || (keyCode >= 65 && keyCode <= 90 && event.keyCode != 86) || (keyCode >= 97 && keyCode <= 122 && keyCode != 110 && keyCode != 111 && keyCode != 106 && keyCode != 109 && keyCode != 107) || (specialKeys.indexOf(event.keyCode) != -1 && event.charCode != event.keyCode)) {
return;
}
else {
event.preventDefault();
}
});
}
};
var self = this;
self.Id = ko.observable(Id);
self.Name = ko.observable(Name).extend({ required: true });
self.Address = ko.observable(Address);
self.City = ko.observable(City);
self.PostCode = ko.observable(PostCode);
self.TelephoneNo = ko.observable(TelephoneNo).extend({ required: true });
self.CandidateId = ko.observable(CandidateId);
self.Relationship = ko.observable(Relationship).extend({ required: true });
self.Qualification = ko.observable(Qualification);
self.State = ko.observable(State);
self.Country = ko.observable(Country);
self.EmailAddress = ko.observable(EmailAddress).extend({ email: true });
self.Skills = ko.observable(Skills);
self.CreatedBy = ko.observable(CreatedBy);
self.CreatedOn = ko.observable(CreatedOn);
self.ModifiedBy = ko.observable(ModifiedBy);
self.ModifiedOn = ko.observable(ModifiedOn);
self.showErrors = ko.observable(false);
self.showerror = function (item) {
if (!item.isValid() && self.showErrors()) {
return true;
}
else
return false;
};
self.errors = ko.validation.group(self);
};
modified 28-Jan-15 5:39am.
|
|
|
|
|
I Following ur code but not working . pl fix this issue.
@{
ViewBag.PageHeader = "Manage - Portal Subscription";
}
@{
var UserInfo = (PetShopUI.Models.UserProfileModel)null;
if (Session["UserInfo"]!=null)
{
UserInfo = (PetShopUI.Models.UserProfileModel)Session["UserInfo"];
}
else
{
WebSecurity.Logout();
Response.Redirect("~/Home/SessExp");
}
}
<script src="~/Scripts/jquery-1.8.2.js" type="text/javascript"></script>
@*<script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.js")"></script>*@
<script src="~/Scripts/knockout-2.2.0.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.validation.debug.js"></script>
@*<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>*@
<script src="~/Scripts/sweet-alert.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
</script>
<style>
.date
{
}
.required-field{
background:red;
}
</style>
<div id="SubscriptionServices" class="gridpanelsouter">
<h2>Manage Portal Subscription</h2>
<div style="float:right;"><button id="btnAddService" class="btngr">Add New Subscription</button></div>
<div style="clear:both"> </div>
<div id="gridPanel" style="float:right">
@model IEnumerable< PetShopUI.Models.ManageSubscriptionModels>
@using (Html.BeginForm("ManageSubscription", "Subscription", FormMethod.Post, null))
{
@Html.ValidationSummary();
<table>
<tr>
@* <td style="float:left;width:150px">
<br />
@Html.Label("Subscription Name")
</td>*@
<td style="float:left;width:100px">
@Html.TextBox("txtsearchsub","",new { @class = "reset",placeholder = "Subscription Name" })
</td>
<td style="width:200px">
<input type="submit" value="Search" class="btngr" id ="search"/>
</td>
</tr>
</table>
}
<div style="clear:both"> </div>
@* <div data-bind="if: SubscriptionLIST()">
<input id="txtsearchsub" type="text" data-bind='value: SearchName'/>
<button id ="search" type="button" title="Search" class="btngr" data-bind="click:$root.Search">Search</button>
</div>*@
@* <table class="tbl" data-bind="visible: currentPage().length > 0">*@
<table class="tbl" data-bind="visible: SubscriptionLIST().length > 0">
<thead>
<tr data-bind="click: sortTable">
<th width="25%" data-column="SubscriptionName">Subscription Name
<span data-bind="attr: { class: currentColumn() == 'SubscriptionName' ? 'isVisible' : 'isHidden' }">
<i data-bind="attr: { class: iconType }"></i>
</span>
</th>
<th width="15%">Amount</th>
<th width="15%">Months</th>
<th width="15%">Expiry Date</th>
<th width="10%"> </th>
</tr>
</thead>
<tbody data-bind="foreach: SubscriptionLIST">
<tr>
<td>
@* <span data-bind="text: SubscriptionName"></span> *@
<a href='#' data-bind='click: $root.edit, text: SubscriptionName'></a>
</td>
<td data-bind="text: Amount">
<span data-bind="text: Amount"></span>
</td>
<td>
<span data-bind="text: Months"></span>
</td>
<td>
<span data-bind="text: ExpiryDate"></span>
</td>
<td>
<button class="btn1" value="text: PortalSubID">Delete</button>
@* <button class="btn1" data-bind="click: $root.edit" value="text: PortalSubID">Edit</button>*@
</td>
</tr>
</tbody>
@*<tfoot>
<tr>
<td colspan="2">
Number of items per page:
<select id="pageSizeSelector" data-bind="value: pageSize">
<option value="2">2</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<td colspan="6" style="text-align:right;">
<button data-bind="click: previousPage" class="btn"><i class="icon-step-backward"></i></button>
Page <label data-bind="text: currentPageIndex() + 1" class="badge"></label>
<button data-bind="click: nextPage" class="btn"><i class="icon-step-forward"></i></button>
</td>
</tr>
</tfoot>*@
</table>
@* <div data-bind="visible: currentPage().length <= 0" style="font-size:14px; color:#f00;">
Sorry... No Records found
</div>*@
</div>
<div class="addServicePanelnew" id="addServicePanel" >
<div >
<h2>Update - Subscription Details</h2>
<div id="colL" class="addupdatecol">
<ul>
<li><label>Subscription Name<span class="asterick">*</span></label><input id="txtEditsubname" type="text" data-bind="value: SubscriptionServices().SubscriptionName, css: { 'required-field': SubscriptionServices().showerror(SubscriptionServices().SubscriptionName) }, valueUpdate: 'afterkeydown'" /></li>
<li><label>Amount<span class="asterick">*</span></label><input id="txtEditAmount" type="text" data-bind='value: SubscriptionServices().Amount' /></li>
</ul>
</div>
<div id="colR" class="addupdatecol">
<ul>
<li><label>Months<span class="asterick">*</span></label><input id="txtEditMonths" type="text" data-bind="value: SubscriptionServices().Months"/> </li>
<li><label>Expiry Date<span class="asterick">*</span></label><input id="EditExpiryDate" type="text" name="EditExpiryDate" data-bind="value: SubscriptionServices().ExpiryDate"/> </li>
</ul>
</div>
<div id="btn" class="btnrow">
<button data-bind='click: UpdatePortalSubscription' class="btngr">Update</button> <button data-bind='click: CancelPortalSubscription' class="btngr">Cancel</button>
</div>
</div>
</div>
<script type="text/javascript">
// var SubscriptionViewModel = function () {
function SubscriptionViewModel(){
var self = this;
//self.SubscriptionName =ko.observable("");
//self.Amount = ko.observable("");
//self.Months = ko.observable("");
//self.ExpiryDate = ko.observable("");
//self.PortalSubID = ko.observable("");
//self.PortalID = ko.observable("");
self.SubscriptionLIST = ko.observableArray();
self.SearchName = ko.observable("");
self.currentPage = ko.observable();
self.pageSize = ko.observable(10);
self.currentPageIndex = ko.observable(0);
self.sortType = "ascending";
self.currentColumn = ko.observable("");
self.iconType = ko.observable("");
self.recordCount = ko.observable(1);
self.totalPages = ko.observable(1);
self.currentPage = ko.computed(function () {
var pagesize = parseInt(self.pageSize(), 10),
startIndex = pagesize * self.currentPageIndex(),
endIndex = startIndex + pagesize;
return self.SubscriptionLIST.slice(startIndex, endIndex);
});
self.nextPage = function () {
if (((self.currentPageIndex() + 1) * self.pageSize()) < self.SubscriptionLIST().length) {
self.currentPageIndex(self.currentPageIndex() + 1);
}
else {
self.currentPageIndex(0);
}
};
self.previousPage = function () {
if (self.currentPageIndex() > 0) {
self.currentPageIndex(self.currentPageIndex() - 1);
}
else {
self.currentPageIndex((Math.ceil(self.SubscriptionLIST().length / self.pageSize())) - 1);
}
};
self.sortTable = function (SubscriptionViewModel, e) {
var orderProp = $(e.target).attr("data-column")
self.currentColumn(orderProp);
self.SubscriptionLIST.sort(function (left, right) {
leftVal = left[orderProp];
rightVal = right[orderProp];
if (self.sortType == "ascending") {
return leftVal < rightVal ? 1 : -1;
}
else {
return leftVal > rightVal ? 1 : -1;
}
});
self.sortType = (self.sortType == "ascending") ? "descending" : "ascending";
self.iconType((self.sortType == "ascending") ? "icon-chevron-up" : "icon-chevron-down");
};
self.SubscriptionServices = ko.observable();
self.createPortalSubscription = function () {
SubscriptionServices.ExpiryDate = $("[id$=ExpiryDate]").val();
@* // SubscriptionServices.CreateID = '@UserInfo.UserID';*@
@*// alert(@UserInfo.UserID);*@
var myURL = '@Url.Action("CreatePortalSubscription", "Subscription")';
if (SubscriptionValidation()) {
$.ajax({
type: "POST",
// url: "/Subscription/CreatePortalSubscription",
url: myURL,
data: ko.toJSON(SubscriptionServices),
contentType: "application/json",
success: function (data) {
swal({
title: "",
text: "Record Added Successfully",
timer: 1000
});
// alert("Record Added Successfully");
fnLoadGrid();
self.SubscriptionServices(null);
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
});
});
},
error: function () {
swal({
title: "",
text: "Failed. Added Subscription",
timer: 1000
});
}
});
}
};
self.UpdatePortalSubscription = function () {
var SubscriptionServices = self.SubscriptionServices();
SubscriptionServices.ExpiryDate = $("[id$=EditExpiryDate]").val();
SubscriptionServices.CreateID = '@UserInfo.UserID';
@*//alert(@UserInfo.UserID);*@
var myURL = '@Url.Action("CreatePortalSubscription", "Subscription")';
//if (EditSubscriptionValidation()) {
self.SubscriptionServices().showErrors(true);
alert(self.SubscriptionServices().isValid());
if (self.SubscriptionServices().errors().length == 0) {
$.ajax({
type: "POST",
url: myURL,
data: ko.toJSON(SubscriptionServices),
contentType: "application/json",
success: function (data) {
swal({
title: "",
text: "Record Updated Successfully",
timer: 1000
});
self.SubscriptionLIST.removeAll();
txtsearchsub = $("[id$=txtsearchsub]").val();
var myViewModel = new SubscriptionViewModel();
var link = '@Url.Action("GetPortalSubscriptionDDL", "Subscription", new { txtsearchsub = -1 })'
link = link.replace('-1', txtsearchsub);
var URL = link;
$.ajax({
url: URL,
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
var SubscriptionAllData = [];
for (var i = 0; i < data.length; i++) {
SubscriptionAllData.push(new SubscriptionData(data[i].PortalSubID, data[i].SubscriptionName, data[i].Amount, data[i].Months, data[i].IsActive, data[i].ExpiryDate, data[i].CreatedBy, data[i].ModifiedBy));
}
var SubscriptionInitData = new SubscriptionData(0, '', '', '', '', '', '', '');
// debugger;
self.SubscriptionServices(SubscriptionInitData);
self.SubscriptionLIST(SubscriptionAllData);
},
error: function (err) {
}
});
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
});
});
},
error: function () {
swal({
title: "",
text: "Failed. Updated Subscription",
timer: 1000
});
}
});
}
else {
self.SubscriptionServices().errors.showAllMessages();
}
}
self.Search = function () {
@* $.ajax({
url: '@Url.Action("GetPortalSubscriptionDDL", "Subscription")',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
self.SubscriptionLIST(data);
}
});*@
SubscriptionServices.SearchName = $("[id$=txtsearchsub]").val();
fnLoadGrid();
};
self.CancelPortalSubscription = function () {
//self.SubscriptionLIST.removeAll();
// fnLoadGrid();
var SubscriptionInitData = new SubscriptionData(0, '', '', '', '', '', '', '');
self.SubscriptionServices(SubscriptionInitData);
// $("#addServicePanel input").val('');
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
});
});
};
$("#btnAddService").click(function () {
var SubscriptionInitData = new SubscriptionData(0, '', '', '', '', '', '', '');
self.SubscriptionServices(SubscriptionInitData);
$("#gridPanel").hide("slide", function () {
$("#addServicePanel").show("slide", function () {
$(function () {
$("[id$=EditExpiryDate]").datepicker(
{
changeMonth: true,
changeYear: true,
autoclose: true,
showOn: "button",
buttonImage: "../Images/calendar.gif",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.focus(); this.blur()
}
});
});
});
});
});
self.edit = function (SubscriptionInitData) {
$("#gridPanel").hide("slide", function () {
$("#addServicePanel").show("slide", function () {
$(function () {
$("[id$=EditExpiryDate]").datepicker(
{
changeMonth: true,
changeYear: true,
autoclose: true,
showOn: "button",
buttonImage: "../Images/calendar.gif",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.focus(); this.blur()
}
});
});
self.SubscriptionServices(new SubscriptionData(SubscriptionInitData.PortalSubID(), SubscriptionInitData.SubscriptionName(), SubscriptionInitData.Amount(), SubscriptionInitData.Months(), SubscriptionInitData.IsActive(), SubscriptionInitData.ExpiryDate(), SubscriptionInitData.CreatedBy(), SubscriptionInitData.ModifiedBy()));
// self.KinDetail(new KinData(kin.Id(), kin.Name(), kin.Address(), kin.City(), kin.PostCode(), kin.TelephoneNo());
});
});
// self.SubscriptionServices(SubscriptionServices);
};//end self.edit end
//fnLoadGrid();
};
function fnLoadGrid() {
txtsearchsub = $("[id$=txtsearchsub]").val();
var myViewModel = new SubscriptionViewModel();
var link = '@Url.Action("GetPortalSubscriptionDDL", "Subscription", new { txtsearchsub = -1 })'
link = link.replace('-1', txtsearchsub);
var URL = link;
$.ajax({
url: URL,
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (data) {
var SubscriptionAllData = [];
for (var i = 0; i < data.length; i++) {
SubscriptionAllData.push(new SubscriptionData(data[i].PortalSubID, data[i].SubscriptionName, data[i].Amount, data[i].Months, data[i].IsActive, data[i].ExpiryDate, data[i].CreatedBy, data[i].ModifiedBy));
}
var SubscriptionInitData = new SubscriptionData(0, '', '', '', '', '', '', '');
// debugger;
myViewModel.SubscriptionServices(SubscriptionInitData);
myViewModel.SubscriptionLIST(SubscriptionAllData);
try {
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
decorateElement: true,
messageTemplate: null
});
ko.applyBindings(myViewModel, document.getElementById('SubscriptionServices'));
}
catch (e) {
}
},
error: function (err) {
}
});
}
function SubscriptionData(PortalSubID, SubscriptionName, Amount, Months,IsActive, ExpiryDate, CreatedBy, ModifiedBy) {
ko.bindingHandlers.numeric = {
init: function (element) {
$(element).on("keydown", function (event) {
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
(event.keyCode == 88 && event.ctrlKey === true) ||
(event.keyCode == 67 && event.ctrlKey === true) ||
(event.keyCode >= 35 && event.keyCode <= 39)) {
return;
}
else {
if (event.keyCode == 107 || event.keyCode == 109 || event.keyCode == 110 || event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105) || (event.ctrlKey && event.altKey)) {
event.preventDefault();
}
}
});
}
};
ko.bindingHandlers.Alphanumeric = {
init: function (element) {
$(element).on("keydown", function (event) {
var specialKeys = new Array();
specialKeys.push(8); //Backspace
specialKeys.push(9); //Tab
specialKeys.push(46); //Delete
specialKeys.push(36); //Home
specialKeys.push(35); //End
specialKeys.push(37); //Left
specialKeys.push(39); //Right
var keyCode = event.keyCode == 0 ? event.charCode : event.keyCode;
if ((event.keyCode == 86 && event.ctrlKey === false) || (keyCode >= 48 && keyCode <= 58 && event.shiftKey === false) || (keyCode >= 65 && keyCode <= 90 && event.keyCode != 86) || (keyCode >= 97 && keyCode <= 122 && keyCode != 110 && keyCode != 111 && keyCode != 106 && keyCode != 109 && keyCode != 107) || (specialKeys.indexOf(event.keyCode) != -1 && event.charCode != event.keyCode)) {
return;
}
else {
event.preventDefault();
}
});
}
};
var self = this;
self.PortalSubID = ko.observable(PortalSubID);
self.SubscriptionName = ko.observable(SubscriptionName).extend({
required: {
params: true,
message: "Subscription Name is required"
}
}
);
self.Amount = ko.observable(Amount).extend({
required: {
params: true,
message: "Amount is required"
}
});
self.Months = ko.observable(Months).extend({ required: true });
self.ExpiryDate = ko.observable(ExpiryDate).extend({ required: true });
self.IsActive = ko.observable(IsActive);
self.CreatedBy = ko.observable(CreatedBy);
self.ModifiedBy = ko.observable(ModifiedBy);
self.showErrors = ko.observable(false);
self.showerror = function (item) {
if (!item.isValid() && self.showErrors()) { return true; } else { return false; }
};
self.errors = ko.validation.group(self);
};
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
//$("#btnAddService").click(function () {
// //$("#addServicePanel input").val('');
// // self.SubscriptionServices(null);
// $("#gridPanel").hide("slide", function () {
// $("#addServicePanel").show("slide", function () {
// $(function () {
// $("[id$=ExpiryDate]").datepicker(
// {
// changeMonth: true,
// changeYear: true,
// autoclose: true,
// showOn: "button",
// buttonImage: "../Images/calendar.gif",
// buttonImageOnly: true,
// // yearRange: '-90:+0',
// onClose: function (dateText, inst) {
// this.focus(); this.blur()
// }
// });
// });
// //$("#loginName").focus();
// });
// });
//});
$("#btnSaveServices").click(function () {
$("#addServicePanel").hide("slide", function () {
$("#gridPanel").show("slide", function () {
//$("#loginName").focus();
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
//$(function () {
// $("[id$=ExpiryDate]").datepicker({
// changeMonth: true,
// changeYear: true,
// autoclose: true,
// showOn: "button",
// buttonImage: "../Images/calendar.gif",
// buttonImageOnly: true,
// // yearRange: '-90:+0',
// onClose: function (dateText, inst) {
// this.focus(); this.blur()
// }
// });
//});
fnLoadGrid();
//var myViewModel = new SubscriptionViewModel();
//ko.applyBindings(myViewModel);
});
</script>
|
|
|
|
|
Hi Ashish,
Plz help me...i am getting error "undefined is not a function" on this line viewModel.CandidateDetails(CandidateData);
Thanks
Ranjeet Kumar
|
|
|
|
|
Hello Ranjeet,
Please initialize candidatedata first by below line:
var CandidateData = new CandidateData(0, '', '', '', '', '', '', '', 0, '', 0, '', '', '', '', '', '');
Otherwise push the data to observable array like below:
var CandidateData = new CandidateData(0, '', '', '', '', '', '', '', 0, '', 0, '', '', '', '', '', '');
viewModel.CandidateDetails([]);
viewModel.CandidateDetails.push(CandidateData);
Thanks
Ashish
|
|
|
|
|