I was trying to generate a Owl Carousel using a ViewPort. But it only loops the items and not actually making it as carousel.
This is how I call the Data from Sql then transfer it to ViewPort after that, it should show in html just like a normal carousel
$(document).ready(function () {
$.ajax({
url: "/Home/Automatic1",
contentType: "application/html; charset=utf-8",
type: 'GET',
dataType: "html",
success: (function (result) {
$('#owl-carousel-2').html(result);
}),
error: (function (xhr, status) {
alert(status);
})
})
$('#owl-carousel-2').owlCarousel({
loop: true,
nav: true,
dots: false,
autoplay: false,
margin: 10,
responsive: {
0: {
items: 2
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
})
These is how my HTML looks like:
<div class="owl-carousel owl-theme" id="owl-carousel-2">
</div>
On my ViewPort:
#if (Model != null && Model.Rows.Count != 0)
{
#for (int i = 0, x = 1; i < Model.Rows.Count; i++, x++)
{
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
#*<div class="item">
<div class="text-center">
<div class="card">
<div class="card-img-top">
<img src="~/images/acce-image/#Model.Rows[i][0]" />
</div>
<div class="card-title">
#Model.Rows[i][1]
</div>
<div class="card-price">
#Model.Rows[i][2]
</div>
</div>
</div>
</div>*#
}
}
It tried to comment first the main project so I can see what's going on. But still the same.
These is the output of the code.
After trying alot of trial and error, I just need to put the owl-carousel function inside of the ajax success function
$(document).ready(function () {
$.ajax({
url: "/Home/Automatic1",
contentType: "application/html; charset=utf-8",
type: 'GET',
dataType: "html",
success: (function (result) {
$('#owl-carousel-2').html(result);
$('#owl-carousel-2').owlCarousel({
loop: true,
nav: true,
dots: false,
autoplay: false,
margin: 10,
responsive: {
0: {
items: 2
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
}),
error: (function (xhr, status) {
alert(status);
})
})
Related
I has a popup block with code:
<div class="popup_block" id="open-voucher">
<div class="dialog-modal tech-support">
<div style="color: #fff;background: #232323;padding: 25px;text-align: center;">
<div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
<input class="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE-FFFFF">
</div>
<div style=""><button class="btn-yellow free-coins-btn btn-get-daily-bonus" type="submit">Activate</button></div>
</div>
</div>
</div>
But when i press Activate button, my browser console thay error: Uncaught TypeError: Cannot read property 'trim' of undefined.
My JS code:
var el = $(this).parents('.popup_block').find('.btn-get-daily-bonus');
var code = el.val().trim();
$.ajax({
url: '/promocode',
type: 'POST',
dataType: 'json',
data: {code: code},
success: function (data) {
showmessages(data.status, data.message);
},
error: function (err) {
showmessages(err.status, err.message);
console.log(err.responseText);
}
});
});
How i can fix it?
EDIT:
I try edit code:
<div class="dialog-modal tech-support">
<div style="color: #fff;background: #232323;padding: 25px;text-align: center;">
<div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
<input class="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE">
</div>
<div style=""><button class="btn-yellow activate-voucher-btn">Activate</button></div>
</div>
</div>
</div>
And
$(document).on("click", "activate-voucher-btn", function (t) {
$.ajax({
type: 'POST',
url: '/promocode',
data: {
voucher: $(".activate-voucher-input").val()
},
success: data => {
$this.notify(data.type, data.message);
}
});
});
But such a call also does not work, nothing happens. The console does not swear and the action is not performed.
function onActivate() {
var el = $('#activate-voucher-input');
var code = el.val().trim();
$.ajax({
url: '/promocode',
type: 'POST',
dataType: 'json',
data: {code: code},
success: function (data) {
showmessages(data.status, data.message);
},
error: function (err) {
showmessages(err.status, err.message);
console.log(err.responseText);
}
});
}
function showmessages(status, message) {
console.log(status, message);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup_block" id="open-voucher">
<div class="dialog-modal tech-support">
<div style="color: #fff;background: #232323;padding: 25px;text-align: center;">
<div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
<input id="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE-FFFFF">
</div>
<div style=""><button onclick="onActivate()" class="btn-yellow free-coins-btn btn-get-daily-bonus" type="submit">Activate</button></div>
</div>
</div>
</div>
You need to find element by ID. Actually $('.class-name') will return array of elements with that class-name and el.val() could be undefined.
I guess that is what you were trying to do
$('button').click(function() {
var el = $(this).parents('.popup_block').find('.activate-voucher-input')[0];
var code = $(el).val().trim();
console.log(code);
$.ajax({
url: '/promocode',
type: 'POST',
dataType: 'json',
data: {code: code},
success: function (data) {
showmessages(data.status, data.message);
},
error: function (err) {
showmessages(err.status, err.message);
console.log(err.responseText);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup_block" id="open-voucher">
<div class="dialog-modal tech-support">
<div style="color: #fff;background: #232323;padding: 25px;text-align: center;">
<div class="wrap-input" style="margin: 0 auto 15px;width: 253px;">
<input class="activate-voucher-input" type="text" placeholder="AAAAA-BBBBB-CCCCC-DDDDD-EEEEE-FFFFF">
</div>
<div style="">
<button class="btn-yellow free-coins-btn btn-get-daily-bonus" type="submit">Activate</button>
</div>
</div>
</div>
</div>
when i click on check-document The ajax request runs But I do not know why this request is repeated, and whenever I close the modal, it opens again
ajax code:
var id;
$('.check-document').click(function(e) {
id = $(this).attr("id-document");
var block = $(this).closest('.card');
e.preventDefault();
$(block).block({
message: '<span class="font-weight-semibold"><i class="icon-spinner4 spinner mr-2"></i> please wait...</span>',
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8,
cursor: 'wait'
},
css: {
border: 0,
padding: '10px 15px',
color: '#fff',
width: 'auto',
'-webkit-border-radius': 3,
'-moz-border-radius': 3,
backgroundColor: '#333'
}
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{route('admin.auth.document.show')}}",
type: 'POST',
dataType: 'json',
data: {
id: id,
},
success: function(result) {
if (result.type == 'success') {
$(".card").unblock();
$('#check-document').modal('show');
} else {
$(".card").unblock();
Swal({
title: "error !!",
confirmButtonText: "خب",
buttonsStyling: true,
type: "error"
});
}
},
error: function(xhr) {
//the status is in xhr.status;
//the message if any is in xhr.statusText;
}
});
});
modal :
<div id="check-document" class="modal fade check-document" data-backdrop="false" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">edit card</h5>
<button type="button" class="close close-modal" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-warning border-0 alert-dismissible any-errors" id="any-errors"
style="display:none">
</div>
</div>
</div>
</div>
</div>
and button:
see
So I am creating a div with an input text dynamically. and I am applying touchSpin() like this.
$(".commission").TouchSpin({
min: 0,
max: 2,
step: 0.0001,
decimals: 4,
boostat: 5,
maxboostedstep: 10,
buttondown_class: 'btn btn-white',
buttonup_class: 'btn btn-white'
});
This same code was working when Ithe content was static but now its loading using ajax call , and the plugin doesnot work
<div class="col-md-12">
<div class="col-md-9 col-sm-9 col-xs-9 pad">
<input class="commission" type="text" value="0">
</div>
<div class="col-md-3 col-sm-3 col-xs-3 pad">
<button class="btn btn-primary btn-sm pull-right view_btn1" data-toggle="modal" data-target="#view_details" type="button"><i class="fa fa-eye"></i></button>
</div>
<div class="clearfix"></div>
</div>
Can any one suggest something.
you can write TouchSpin code inside ajax success function. like this:
$.ajax({
url: "/productos/fillItemView",
type:"GET",
data: {datos: JSON.stringify(data)},
dataType: "html",
contentType: "application/json; charset=UTF-8",
success: function(result){
$("#initTr").after(result); //insert dynamic input with inputClass class in view
$(".inputClass").TouchSpin({
min: 0,
max: 100,
step: 1,
decimals: 0,
}).on('change', function(){
//maybe optional
});
},
error : function(xhr, status) {
console.log(xhr.responseText);
console.log(status);
},
})
.done(function(result){
});
Regards.
It says my function is undefined yet it is clearly defined below the body of the program's content.
<button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
#*Add*#
function CmdBranchAdd_OnClick() {
alert('Hi');
#*$('#BranchEdit').modal({
show: true,
backdrop: false
});
document.getElementById('BranchEdit-BranchCode').value = "";
document.getElementById('BranchEdit-Branch').value = "";
document.getElementById('BranchEdit-CompanyID').value = "";*#
}
at the moment, the main body of the function has been commented out to test if it can connect to the function. but when run and pressed, it return a javarscript runtime error stating that the function in the button in undefined.
Edit #1:
Sorry, copied wrong line of code xD Forgive me
<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
while I'm at it, here are the loaded scripts - the function was originally supposed to call for a modal but It should just alert for now. But it's doesn't.
<script src="~/js/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"> </script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
Edit #2: Here's the entire code block to see if it has any problems.
#{
ViewBag.Title = "Branch";
}
<!-- Script Linkings -->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<script src="~/wijmo/controls/wijmo.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.input.min.js"></script>
<script src="~/wijmo/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="~/wijmo/controls/wijmo.chart.min.js"></script>
<link href="~/wijmo/styles/wijmo.min.css" rel="stylesheet" />
#*<link href="/css/bootstrap.min.css" rel="stylesheet" /> --- this S.O.B will make things white. Big "NO, NO" *#
#*List*#
<div id="DivEvents">
<div class="container">
<div class="row">
<div class="col-lg-11">
<br /><br /><br />
<h2 style="margin-bottom:5px; margin-top:5px;">Branches</h2>
<button style="float:left" id="CmdAddBranch" type="submit" class="btn btn-default" onclick="CmdBranchAdd_OnClick()">Add A Branch</button>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div id="BranchGrid" class="grid"></div>
</div>
</div>
<br />
<div class="row">
<div class="btn-group col-md-7" id="naviagtionPageEvent">
<button type="button" class="btn btn-default" id="btnMoveToFirstPageEvent">
<span class="glyphicon glyphicon-fast-backward"></span>
</button>
<button type="button" class="btn btn-default" id="btnMoveToPreviousPageEvent">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" class="btn btn-default" disabled style="width:100px" id="btnCurrentPageEvent"></button>
<button type="button" class="btn btn-default" id="btnMoveToNextPageEvent">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
<button type="button" class="btn btn-default" id="btnMoveToLastPageEvent">
<span class="glyphicon glyphicon-fast-forward"></span>
</button>
</div>
</div>
</div>
</div>
#*Edit Detail*#
<div class="modal fade" id="BranchEdit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title">Branch Edit</h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Branch Code</dt>
<dd>
<input class="form-control" id="BranchEdit-BranchCode" type="text" />
</dd>
<dt>Branch</dt>
<dd>
<input class="form-control" id="BranchEdit-Branch" type="text" />
</dd>
<dt>Company ID</dt>
<dd>
<input class="form-control" id="BranchEdit-CompanyID" type="text" />
</dd>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="CmdBranchEditOk" onclick="CmdBranchEditOk_OnClick()">
Ok
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" id="CmdBranchEditCancel">
Cancel
</button>
</div>
</div>
</div>
</div>
#*Loading*#
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="Loading..." aria-hidden="true">
<div class="modal-dialog" style="width: 220px;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Loading...</h4>
</div>
<div class="modal-body">
<img src="/img/progress_bar.gif" />
</div>
</div>
</div>
</div>
#*Module*#
<script type="text/javascript">
var Branches;
var BranchGrid;
var btnFirstPageEvent;
var btnPreviousPageEvent;
var btnNextPageEvent;
var btnLastPageEvent;
var btnCurrentPageEvent;
#*Edit*#
function CmdBranchEdit_OnClick() {
Branches.editItem(Branches.currentItem);
$('#BranchEdit').modal({
show: true,
backdrop: false
});
var Branch = Branches.currentEditItem;
document.getElementById('BranchEdit-BranchCode').value = Branch.BranchCode ? Branch.BranchCode : '';
document.getElementById('BranchEdit-Branch').value = Branch.Branch ? Branch.Branch : '';
document.getElementById('BranchEdit-CompanyID').value = Branch.CompanyID ? Branch.CompanyID : '';
}
#*Add*#
$(document).ready(function(){
function CmdBranchAdd_OnClick() {
alert('Hi');
#*$('#BranchEdit').modal({
show: true,
backdrop: false
});
document.getElementById('BranchEdit-BranchCode').value = "";
document.getElementById('BranchEdit-Branch').value = "";
document.getElementById('BranchEdit-CompanyID').value = "";*#
}
}
#*Delete*#
function CmdBranchDelete_OnClick() {
Branches.editItem(Branches.currentItem);
var Id = Branches.currentEditItem.Id;
var BranchDescription = Branches.currentEditItem.Branch;
if (confirm("Delete " + BranchDescription + "?") == true) {
$.ajax({
type: "DELETE",
url: "/api/DeleteEvent/" + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
statusCode: {
200: function () {
window.location.reload();
},
404: function () {
alert("Not found");
},
400: function () {
alert("Bad request");
}
}
});
}
}
#*Save Edit*#
function CmdBranchEditOk_OnClick() {
if (confirm("Save Event?") == true) {
var Branch = new Object();
Branch.BranchCode = document.getElementById('BranchEdit-BranchCode').value;
Branch.Branch = document.getElementById('BranchEdit-Branch').value;
Branch.CompanyID = document.getElementById('BranchEdit-CompanyID').value;
var data = JSON.stringify(Event);
// Add New
if (Branch.Id == 0) {
$.ajax({
type: "POST",
url: "/api/AddEvent",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
success: function (id) {
if (id > 0) {
window.location.reload();
} else {
alert("Not added");
}
}
});
// Edit
} else {
$.ajax({
type: "PUT",
url: "/api/UpdateEvent/" + Branch.Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: data,
statusCode: {
200: function () {
window.location.reload();
},
404: function () {
alert("Not found");
},
400: function () {
alert("Bad request");
}
}
});
}
}
}
#*List Functions*#
function GetBranches() {
var Branches = new wijmo.collections.ObservableArray();
$('#loading').modal('show');
$.ajax({
url: '/api/Event',
cache: false,
type: 'GET',
contentType: 'application/json; charset=utf-8',
data: {},
success: function (Results) {
$('#loading').modal('hide');
if (Results.length > 0) {
for (i = 0; i < Results.length; i++) {
Branches.push({
EditId: "<button class='btn btn-primary btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchEdit_OnClick()'>Edit</button>",
DeleteId: "<button class='btn btn-danger btn-xs' data-toggle='modal' id='CmdBranchEvent' onclick='CmdBranchDelete_OnClick()'>Delete</button>",
Id: Results[i]["Id"],
BranchCode: Results[i]["BranchCode"],
BranchDescription: Results[i]["Branch"],
CompanyID: Results[i]["CompanyID"],
});
}
} else {
alert("No data.");
}
}
}).fail(
function (xhr, textStatus, err) {
alert(err);
}
);
return Branches;
}
#*Delete*#
function DeleteBranch(Id) {
$.ajax({
type: "DELETE",
url: "/api/DeleteEvent/" + Id,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { Id: BranchId },
success: function (response) {
alert("Branch Deleted.");
window.location.reload();
},
failure: function (response) {
alert("Error - " + response.d);
},
error: function (e) { }
});
window.location.reload();
}
function UpdateNavigateButtonsEvent() {
if (Branches.pageSize <= 0) {
document.getElementById('naviagtionPageEvent').style.display = 'none';
return;
}
document.getElementById('naviagtionPageEvent').style.display = 'block';
if (Branches.pageIndex === 0) {
btnFirstPageEvent.setAttribute('disabled', 'disabled');
btnPreviousPageEvent.setAttribute('disabled', 'disabled');
btnNextPageEvent.removeAttribute('disabled');
btnLastPageEvent.removeAttribute('disabled');
}
else if (Branches.pageIndex === (Branches.pageCount - 1)) {
btnFirstPageEvent.removeAttribute('disabled');
btnPreviousPageEvent.removeAttribute('disabled');
btnLastPageEvent.setAttribute('disabled', 'disabled');
btnNextPageEvent.setAttribute('disabled', 'disabled');
}
else {
btnFirstPageEvent.removeAttribute('disabled');
btnPreviousPageEvent.removeAttribute('disabled');
btnNextPageEvent.removeAttribute('disabled');
btnLastPageEvent.removeAttribute('disabled');
}
btnCurrentPageEvent.innerHTML = (Branches.pageIndex + 1) + ' / ' + Branches.pageCount;
}
$(document).ready(function () {
btnFirstPageEvent = document.getElementById('btnMoveToFirstPageEvent');
btnPreviousPageEvent = document.getElementById('btnMoveToPreviousPageEvent');
btnNextPageEvent = document.getElementById('btnMoveToNextPageEvent');
btnLastPageEvent = document.getElementById('btnMoveToLastPageEvent');
btnCurrentPageEvent = document.getElementById('btnCurrentPageEvent');
Branches = new wijmo.collections.CollectionView(GetBranches());
BranchGrid = new wijmo.grid.FlexGrid('#BranchGrid');
BranchGrid.initialize({
columns: [
{
"header": "Edit",
"binding": "EditId",
"width": 60,
"allowSorting": false,
"isContentHtml": true
},
{
"header": "Delete",
"binding": "DeleteId",
"width": 60,
"allowSorting": false,
"isContentHtml": true
},
{
"header": "Branch Code",
"binding": "BranchCode",
"allowSorting": false,
"width": "4*"
},
{
"header": "Company ID",
"binding": "CompanyID",
"allowSorting": false,
"width": 80
},
{
"header": "Branch",
"binding": "BranchDescription",
"allowSorting": false,
"width": "4*"
},
],
autoGenerateColumns: false,
itemsSource: Brances,
isReadOnly: true,
selectionMode: wijmo.grid.SelectionMode.Row
});
BranchGrid.trackChanges = true;
Branches.pageSize = 15;
});
UpdateNavigateButtonsEvent();
// Page Button Events
btnFirstPageEvent.addEventListener('click', function () {
Branches.moveToFirstPage();
UpdateNavigateButtonsEvent();
});
btnPreviousPageEvent.addEventListener('click', function () {
Branches.moveToPreviousPage();
UpdateNavigateButtonsEvent();
});
btnNextPageEvent.addEventListener('click', function () {
Branches.moveToNextPage();
UpdateNavigateButtonsEvent();
});
btnLastPageEvent.addEventListener('click', function () {
Branches.moveToLastPage();
UpdateNavigateButtonsEvent();
});
});
</script>
Tried Rao's suggestion - still nothing :( This is starting to be a pain in the ass..)
You have code for a method called
CmdBranchAdd_OnClick
But the element references a function called
CmdBranchEdit_OnClick
move this line
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
to the top of other js files.
Also you have two jquery.js file included. Only choose one which is the best fixing your application.
<script src="~/js/jquery.js"></script>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
Few Suggestions:
Try wrapping your function inside as below
$(document).ready(function(){
function CmdBranchAdd_OnClick() {
alert('Hi');
}
});
then as #user86745458 said remove either jquery.js or jquery-latest.min.js reference and keep your js files at the top of all other links!!
Try changing type of button from submit to just button.
Jsfiddle. Try to add a subgoal under "Competancy Goal - Sub goal". Nothing will be added. Any Suggestions are welcom.
Javascript (ViewModel and initial data)
var initialData;
var data = [{
"GoalId": 0,
"GoalTitle": "Competancy Goal",
"lstSubGoals": [{ "GoalId": 0, "GoalTitle": "Competancy Goal - Sub goal", "lstSubGoals": null }]
},
{
"GoalId": 0,
"GoalTitle": "Strategy Goal",
"lstSubGoals": null
}];
initialData = data;
//viewModel.goalCollection(data);
//ko.applyBindings(viewModel, document.getElementById("tablebody"));
var GoalsModel = function (goals) {
var self = this;
self.goals = ko.observableArray(ko.utils.arrayMap(goals, function (goal) {
return {
GoalTitle: goal.GoalTitle,
Weightage: goal.Weightage,
StartDate: goal.StartDate,
EndDate: goal.EndDate,
Status: goal.Status,
editing: ko.observable(false),
lstSubGoals: ko.observableArray(goal.lstSubGoals)
};
}));
self.addGoal = function () {
self.goals.push({
GoalTitle: "",
Weightage: "",
StartDate: "",
EndDate: "",
Status: "",
lstSubGoals: ko.observableArray(),
editing: ko.observable(false)
});
};
self.removeGoal = function (goal) {
self.goals.remove(goal);
};
self.editGoal = function (goal) {
self.goals.editing = ko.observable(true);
};
self.addSubgoal = function (goal) {
goal.lstSubGoals.push({
GoalTitle: "",
Weightage: "",
StartDate: "",
EndDate: "",
Status: "",
lstSubGoals: ko.observableArray(),
editing: ko.observable(false)
});
};
self.removeSubgoal = function (subgoal) {
$.each(self.goals(), function () { this.lstSubGoals.remove(subgoal) })
};
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.goals), null, 2));
var finalresult = JSON.stringify(ko.toJS(self.goals), null, 2);
$.ajax({
url: '/performance/assigngoal',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: finalresult,
success: function (result) {
},
error: function (result) {
alert("Failed");
}
});
};
self.lastSavedJson = ko.observable("")
};
ko.applyBindings(new GoalsModel(initialData));
HTML
<div id="goaldetailsdiv" style="display: block; width: 100%;">
<div id="header">
<div class="divtableheader data" style="width: 25%;">Goal</div>
<div class="divtableheader data" style="width: 15%;">Actions</div>
</div>
<div style="clear: both;"></div>
<div id="body" style="text-align: left;">
<div data-bind="template: { name: 'goals_template', foreach: $data.goals }" id="tablebody">
</div>
<script type="text/html" id="goals_template">
<div class="category_header">
<div>
<div style="float: left; width: 25%; text-align: left;" class="divtablebody data">
<span data-bind="text: GoalTitle"></span>
<input type="text" data-bind="value: GoalTitle" />
</div>
<div style="float: left; width: 15%;" class="divtablebody data">
<button data-bind='click: $root.addSubgoal'>Add</button>
<button data-bind='click: $root.removeGoal'>Del</button>
<button data-bind='click: $root.editGoal'>Edit</button>
</div>
</div>
<div style="clear: both;"></div>
<div data-bind='template: { name: "goals_template", foreach: $data.lstSubGoals }'>
</div>
</div>
</script>
</div>
<button data-bind='click: save, enable: goals().length > 0'>Save to JSON</button>
<input type="submit" />
</div>