Knockout Click event is not working
947 views
Skip to first unread message
anurag.c...@trignodev.com
Dec 6, 2013, 1:23:22 AM12/6/13
to knock...@googlegroups.com
I have created a page which loads the data into grid and binds some other events now i am getting the problem while binding an event with pager div's next button that its not raising the event name nextdata defined inside javascript highlighted in bold.
Html View :
<section>
<h2 class="page-title" />
<br />
<!-- ==================== ACTIVITIES CONTAINER ==================== -->
<div class="row-fluid">
<div class="span12">
<!-- ==================== ACTIVITIES HEADLINE ==================== -->
<div class="containerHeadline tableHeadline">
<i class="icon-user"></i>
<h2>Products</h2>
<div class="controlButton pull-right"></div>
<span class="controlButton pull-right"><i class="icon-caret-down minimizeElement"></i></span>
<div class="pull-right btn-toolbar">
<a href="#modalProduct" data-toggle="modal">
<button class="btn btn-mini" data-bind="click: loadAddMode">
<i class="icon-plus"></i>Add Item
</button>
</a>
</div>
</div>
<!-- ==================== END OF ACTIVITIES HEADLINE ==================== -->
<!-- ==================== ACTIVITIES FLOATING BOX ==================== -->
<div class="floatingBox table">
<div class="container-fluid">
<table class="tablesorter centerFirstLast tablesorter-default hasFilters" id="membersTable">
<colgroup>
<col style="width: 3.5%;">
<col style="width: 15.0%;">
<col style="width: 15.5%;">
<col style="width: 15.0%;">
<col style="width: 15.0%;">
<col style="width: 15.0%;">
</colgroup>
<thead>
<tr class="tablesorter-headerRow">
<th class="info sorter-false tablesorter-header" data-column="0">
<div class="tablesorter-header-inner"></div>
</th>
<th data-placeholder="search in usernames..." data-column="1" class="tablesorter-header">
<div class="tablesorter-header-inner">Menu Category</div>
</th>
<th data-placeholder="search in dates..." data-column="2" class="tablesorter-header">
<div class="tablesorter-header-inner">Item Name</div>
</th>
<th data-placeholder="search in roles..." data-column="3" class="tablesorter-header">
<div class="tablesorter-header-inner">Item Price</div>
</th>
<th data-placeholder="search in statuses..." data-column="4" class="tablesorter-header">
<div class="tablesorter-header-inner">In Stock</div>
</th>
<th data-placeholder="search in statuses..." data-column="4" class="tablesorter-header">
<div class="tablesorter-header-inner">Active</div>
</th>
<th class="actions sorter-false tablesorter-header" data-column="5">
<div class="tablesorter-header-inner">Actions</div>
</th>
</tr>
<tr class="tablesorter-filter-row hideme">
<td>
<input type="search" placeholder="" class="tablesorter-filter disabled" data-column="0" disabled=""><div class="tableFilterRoller"></div>
</td>
<td>
<input type="search" placeholder="search in usernames..." class="tablesorter-filter" data-column="1"><i class="icon-play-circle moreOptions pull-right"></i></td>
<td>
<input type="search" placeholder="search in dates..." class="tablesorter-filter" data-column="2"><i class="icon-play-circle moreOptions pull-right"></i></td>
<td>
<input type="search" placeholder="search in roles..." class="tablesorter-filter" data-column="3"><i class="icon-play-circle moreOptions pull-right"></i></td>
<td>
<input type="search" placeholder="search in statuses..." class="tablesorter-filter" data-column="4"><i class="icon-play-circle moreOptions pull-right"></i></td>
<td>
<input type="search" placeholder="" class="tablesorter-filter disabled" data-column="5" disabled=""></td>
<td></td>
</tr>
</thead>
<tbody data-bind="foreach: menuProducts">
<tr class="odd" style="">
<td><a href="#modalProduct" data-toggle="modal" data-bind="click: $parent.displayProduct" class="label cyan"><i class="icon-info-sign info"></i></a></td>
<td><a href="#" class="registrationDate editable editable-click"><span>Bear</span></a></td>
<td><a href="#" class="registrationDate editable editable-click"><span data-bind="text: Name"></span></a></td>
<td><a href="#" class="memberGroup editable editable-click"><span data-bind="text: Price"></span></a></td>
<td><span class="label"><a href="#" class="memberStatus editable editable-click">In-stock</a></span></td>
<td><span class="label" data-bind="text: Enable() === 1 ? 'Active' : 'Inactive', css: { 'label-success': Enable() === 1 }"><a href="#" class="memberStatus editable editable-click">active</a></span></td>
<td><a href="#modalProduct" class="label green" data-toggle="modal" data-bind="click: $parent.displayProduct"><i class="icon-pencil edit"></i></a><a class="label red" data-original-title="" title=""><i class="icon-trash delete"></i></a></td>
</tr>
</tbody>
</table>
</div>
<!-- =================== For Editing the products on Info button click =================== -->
<div id="modalProduct" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" data-bind="with: productData">
<div class="modal-header popupMedia">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<div>
<h3 data-bind="text: Name() ? Name() : 'Add Product'"></h3>
</div>
</div>
<div class="modal-body">
<form class="form-horizontal contentForm">
<h4><i class="icon-user"></i>IDENTIFICATION</h4>
<div class="control-group">
<label class="control-label">Item Name*</label>
<div class="controls">
<input type="text" class="span10" data-bind="value: Name() ? Name() : ''">
</div>
<br />
<label class="control-label">Item Price*</label>
<div class="controls">
<input type="text" class="span10" data-bind="value: Price">
</div>
<br />
<label class="control-label">Category</label>
<div class="controls">
<div class="btn-group dropup">
<select id="selectCategory" data-bind="event: { change: $parent.addCategory }">
<option value="">Select Categories</option>
<option value="addcategory">Add Categories</option>
<!-- ko foreach:categories -->
<option data-bind="value: ID, text: Name"></option>
<!-- /ko -->
</select>
</div>
</div>
<br />
<label class="control-label">Active</label>
<div class="controls">
<input type="text" class="span10 phone">
</div>
<br />
<label class="control-label">In-Stock</label>
<div class="controls">
<input type="text" class="span10 phone">
</div>
<br />
</div>
<h4><i class="icon-list"></i>Assign Locations</h4>
<div class="control-group">
<!-- Commented lines are producing the List of checkboxes using the kamarel css,
In which the check and uncheck func. is not working correctly.-->
<!-- <div class="divchk" data-bind="foreach: serviceLocations">
<input class="css-checkbox" type="checkbox" data-bind="value: Name" />
<label class="css-label divchk" data-bind="text: Name"></label>
</div>-->
<div data-bind="foreach: serviceLocations">
<div class="divchk">
<input type="checkbox" data-bind="value: Name" />
<label for="chkActive" data-bind="text: Name"></label>
</div>
</div>
</div>
<h4><i class="icon-lock"></i>Description</h4>
<div class="control-group">
<div class="controls">
<textarea class="span10" data-bind="value: Description"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-bind="click: $parent.saveProduct, visible: editMode">Save changes</button>
<button class="btn btn-primary" data-bind="click: $parent.editProduct, visible: addMode">Save changes</button>
</div>
</div>
<!-- =================== End of Editing the products on Info button click =================== -->
<!-- =================== For Adding the new Categories =================== -->
<div id="modalAddCategory" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
<div class="modal-header popupMedia">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<div>
<h3>Add Category</h3>
</div>
</div>
<div class="modal-body">
<form class="form-horizontal categoryForm" data-validate="parsley">
<div class="control-group">
<label class="control-label">Category Name*</label>
<div class="controls">
<input type="text" class="span10" data-validation-minlength="0" data-trigger="change" data-required="true" placeholder="Please enter category...">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" data-bind="click: $parent.addCategory, visible: editMode">Save changes</button>
</div>
</div>
<!-- =================== End of Adding the new Categories =================== -->
<pre data-bind="text: ko.toJSON($data.nextdata)"></pre>
<div id="pager" class="pager tablesorter-pager">
<form>
<span class="label white first disabled"><i class="icon-double-angle-left"></i>first</span>
<span class="label white prev disabled"><i class="icon-angle-left"></i>prev</span>
<span id="pageNumContainers"></span>
<span class="pagedisplay">1 - 10 / 113 (113)</span><!-- this can be any element, including an input -->
<span class="label white next"><a data-bind="click:nextdata">next</a> <i class="icon-angle-right"></i></span>
<span class="label white last">last <i class="icon-double-angle-right"></i></span>
<div class="perPageSelect">
<select class="pagesize inp-mini" style="display: none;">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select><div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn" data-toggle="dropdown" style="width: auto;">10 <b class="caret"></b></button>
<ul class="dropdown-menu">
<li class="active"><a href="javascript:void(0);" style="padding: 9px 0 1px 5px;">
<input id="radio10" class="css-radio" type="radio" value="10"><label for="radio10" class="css-label radio"> 10</label></a></li>
<li><a href="javascript:void(0);" style="padding: 9px 0 1px 5px;">
<input id="radio20" class="css-radio" type="radio" value="20"><label for="radio20" class="css-label radio"> 20</label></a></li>
<li><a href="javascript:void(0);" style="padding: 9px 0 1px 5px;">
<input id="radio30" class="css-radio" type="radio" value="30"><label for="radio30" class="css-label radio"> 30</label></a></li>
<li><a href="javascript:void(0);" style="padding: 9px 0 1px 5px;">
<input id="radio50" class="css-radio" type="radio" value="50"><label for="radio50" class="css-label radio"> 50</label></a></li>
</ul>
</div>
records per page
</div>
</form>
</div>
</div>
<!-- ==================== END OF ACTIVITIES FLOATING BOX ==================== -->
</div>
</div>
</section>
Javascript View :
define(['services/logger', 'datacontext', 'services/gridPager'], function (logger, datacontext,gridPager) {
var self = this;
var title = 'Products';
var venues = new ko.observableArray();
self.activated = false;
self.displayProduct = new ko.observable();
self.productData = new ko.observable();
self.editMode = new ko.observable();
self.addMode = new ko.observable();
self.modes = new ko.observable();
self.Name = new ko.observable();
self.Price = new ko.observable();
self.CategoryName=new ko.observable();
self.Description = new ko.observable();
self.menuProducts = new ko.observableArray();
self.serviceLocations = new ko.observableArray();
self.categories = new ko.observableArray();
var vm = {
activate: activate,
title: title,
venues: venues,
activated: self.activated,
//#Region Product Entities
menuProducts: self.menuProducts,
menuCategory: ko.observableArray([]),
active: ko.observable(),
inStock: ko.observable(),
description: ko.observable(),
serviceLocations: ko.observableArray([]),
selectedCategory: ko.observable(),
serviceLocations: self.serviceLocations,
categories:self.categories,
editMode: self.editMode,
addMode: self.addMode,
modes: self.modes,
Name: self.Name,
Price: self.Price,
CategoryName:self.CategoryName,
Description:self.Description,
//#Region End Entities
//#Region Methods
saveProduct: function () { },
editProduct: function () { },
removeProduct: function () { },
addCategory: addCategory,
loadProduct: function () { },
displayProduct: displayProduct,
loadLocations: loadServiceLocations,
loadAddMode: loadAddMode,
nextdata: nextdata
//#Region End Methods
};
return vm;
//#region Internal Methods
function activate() {
window._gaq.push(['_trackPageview', '/Products']);
if (self.activated == false) {
return initialize();
}
return true;
}
//Activating the methods which will execute on page load
function initialize() {
self.activated = true;
loadServiceLocations();
loadCategories();
return loadProducts();
}
//For displaying the specific product related data for editing or viewing the record
function displayProduct() {
self.productData(this);
self.editMode(true);
self.addMode(null);
}
//Loaded the product data for displaying onto the items grid
function loadProducts() {
return datacontext.getMenuItems().then(function (data) {
data.results.forEach(function (item) {
debugger;
self.menuProducts.push(item);
});
}).fail(function (data) {
logger.logError('Failed to load Products', null, "", true);
});
}
//loaded the service locations for displaying onto the add new item UI
function loadServiceLocations() {
return datacontext.getServiceLocations().then(function (data) {
data.results.forEach(function (item) {
self.serviceLocations.push(item);
});
});
}
//For loading the categories into the catogory dropdown
function loadCategories() {
return datacontext.getProductCategories().then(function (data) {
data.results.forEach(function (item) {
self.categories.push(item);
});
});
}
//For displaying the addnewcategory Popup
function addCategory() {
return datacontext.addCategory().then(function (data) {
});
//debugger;
//if ($('#selectCategory').val() == 'addcategory') {
// $('#modalAddCategory').modal('show');
// $('#modalProduct').modal('hide');
// var newCategory = datacontext.createEntity("MenuItemCategory");
// newCategory.Name('New Category');
// newCategory.Description('Sample Description');
// newCategory.Price(null);
// newCategory.VenueId('2');
// newCategory.CreatedDate('2012-12-03 17:41:08.880');
// newCategory.ModifiedDate('2012-12-03 17:41:08.880');
// newCategory.CreatedBy(null);
// newCategory.ModifiedBy(null);
// newCategory.IsDeleted('0');
// datacontext.entityManager.addEntity(newCategory);
//}
}
function nextdata() {
debugger;
var abc = gridPager.next(5);
return abc;
}
//For loading the product in Edit Mode
function loadAddMode() {
self.addMode(true);
self.editMode(null);
self.productData([]);
//debugger;
//return datacontext.addCategory().then(function (data) {
// alert(data);
//});
//var newCategory = datacontext.createEntity("MenuItemCategory");
//newCategory.Name('New Category');
//newCategory.Description('Sample Description');
//newCategory.Price(null);
//newCategory.CreatedDate('2012-12-03 17:41:08.880');
//newCategory.ModifiedDate('2012-12-03 17:41:08.880');
//newCategory.CreatedBy(null);
//newCategory.ModifiedBy(null);
////newCategory.VenueId(null);
////newCategory.IsDeleted(null);
//var addCat=newCategory.createEntity
//datacontext.entityManager.addEntity(newCategory);
//datacontext.save();
}
//#endregion
});
$(document).ready(function () {
//Displaying the New Product add popup just after closing the Add Category Popup
$('#modalAddCategory').on('hidden', function () {
$('#modalProduct').modal('show');
})
});
Thanks in Advnace
anurag.c...@trignodev.com
Dec 6, 2013, 1:56:01 AM12/6/13
to knock...@googlegroups.com
Issue is been fixed....
Message has been deleted
Rajesh T
May 28, 2016, 1:51:03 AM5/28/16
to KnockoutJS, anurag.c...@trignodev.com
On Saturday, May 28, 2016 at 11:20:32 AM UTC+5:30, Rajesh T wrote:
I will get same issue. how to fix that issue, please tell meThanks in advance
Reply all
Reply to author
Forward
0 new messages