Ok, I have a weird behavior issue on an mvc view that I am working on. The form is for employee onboarding, so it collects information about the new employee. I have a dropdown list of job titles that is strongly typed.
The weird part of this is that this does not work upon the first change of the Job Title dropdown. It does everything but show the checked box. It does work fine though for subsequent change events. I have tracked the firing events using alert boxes. When those alerts show, it all works. When I comment out the alerts, the weird behavior returns.
The logic is as follows:
A job title is selected; jquery detects the change event.
A call to the controller is made and the controller returns a partial view comprised of one field (SelectedAppsList).
Jquery function clears the Application(s) Checkboxes
Jquery is called to check checkboxes of Applications based upon the returned values in SelectedAppsList.
Wizard View:
$("#JobId").change(function () {
//alert($("#JobId").val());
// Check the Apps Based Upon the Job Title
var jobId = $("#JobId").val();
$("#dvApps").load('#(Url.Action("GetApps", "ESRWizards", null, Request.Url.Scheme))?jobId=' + jobId);
AutoCheckSelectedApps();
}));
function AutoCheckSelectedApps() {
ClearSelectedApps();
//alert("Selecting Apps...");
var apps = $("#SelectedAppsList").val().split('|');
for (var i = 0; i < apps.length; i++) {
//alert(apps[i]);
if (apps[i] != "") {
$('input[type="checkbox"][id="SelectedApps_' + apps[i] + '"]').attr('checked', true);
}
}
};
function ClearSelectedApps() {
//alert("Cleared...");
$('input[type="checkbox"][id^="SelectedApps_"]').attr('checked', false);
}
Wizard View Form Controls Involved:
`#Html.DropDownList("JobId", String.Empty)`
`<input type="checkbox" name="SelectedApps_#item.Id" id="SelectedApps_#item.Id" value="#item.Id" />`
and partial view below.
Controller:
[HttpGet]
[OutputCache(Duration = 0)]
public ActionResult GetApps(int jobId)
{
ViewBag.SelectedAppsList = null;
var AppList = db.JobApps.Where(m => m.JobId == jobId).OrderBy(v => v.AppId);
foreach (var item in AppList)
{
ViewBag.SelectedAppsList += item.AppId.ToString() + "|";
}
return PartialView("_Apps");
}
Partial View _Apps
#model ECSR.Models.ESRWizard
#if(ViewBag.SelectedAppsList != null)
{
#Html.TextBox("SelectedAppsList", (string)ViewBag.SelectedAppsList)
}
else
{
#Html.TextBoxFor(m => m.SelectedAppsList)
}
I am guessing that this is a possible refresh issue, so I tried various refresh commands on the checkboxes to no avail. This is a long form so I stripped out the non-related form fields. Any ideas?
Problem: My json object is updating, but the slider does not update for all resorts. It should be updating as the json object changes but sometimes does not.
For the resorts (image collections) that do not update, it gives me an error: "cannot read property 'element' of undefined and breaks on angular-flexslider.js line 104. I cannot find any relation with the resorts that are giving me this error vs the ones that do not.
Summary of my script: I'm using angular-flexslider with a slider sync. I have a service that grabs image data and sends it to the controller. The controller picks it up and runs reorganize(), which takes the object it is given and reformats it into an array that flexslider supports.
This object needs to be updated as the images are updated. I have a dropdown that allows users to change the resort and I want the slider to reflect those changes.
Here is my code
JS:
resortModule.controller('galleryController', ['$scope', 'locaService', function($scope, locaService) {
//object to receive images
$scope.images;
//object used for image slider
$scope.imagePaths = [];
//variable that gives me resort ID
$scope.resort;
//restructures images array to work better with image slider
$scope.reorganize= function(){
$scope.imagePaths.length= 0;
for(var i = 0; i < $scope.images.length; i++) {
var obj= {custom: "assets/images/resorts/" + $scope.images[i].resort + "/gallery/" + $scope.images[i].file_name, thumbnail:"assets/images/resorts/" + $scope.images[i].resort + "/thumbnail/" + $scope.images[i].file_name}
$scope.imagePaths.push(obj);
}
}
//watches factory for updates to objects/ variables
$scope.$on('imagesUpdated', function() {
$scope.images = locaService.images;
$scope.reorganize();
});
$scope.$on('resortUpdated', function() {
$scope.resort = locaService.resort;
});
}]);
HTML:
<flex-slider slider-id="slider" flex-slide="image in imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" prev-text="" next-text="" init-delay="100">
<li>
<img ng-src="{{image.custom}}" alt="Luxury Resort Rental Image">
</li>
</flex-slider>
<flex-slider class="slides hide-tablet-down" slider-id="carousel" flex-slide="image in imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" prev-text="" next-text="" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}" alt="Luxury Resort Rental Image">
</li>
</flex-slider>
Does anyone have any insight on this error? Or what I might be doing wrong? I've been researching it all day but have only found this:
https://github.com/thenikso/angular-flexslider/issues/53
and this:
https://github.com/thenikso/angular-flexslider/pull/63
Which did nothing for me, but I might not have understood them entirely. I'm not a seasoned angular developer and I'm learning as I go along. Thanks in advance for your help.
I commented out the following lines in the angular-flexslider.js and it seemed to fix the problem. Let me know if you have a better solution:
if ((toAdd.length === 1 && toRemove.length === 0) || toAdd.length === 0) {
...
return $scope.$evalAsync(function() { return slider.addSlide(item.element, idx); }); }); } return; }`
I have an app where I want to display different RSS feeds on one page, when the corresponding team is clicked.
For example, when I click "Aberdeen" I want the page to show the RSS for Aberdeen.
When I click "Celtic", i want the same page to display the RSS for Celtic.
I will attach my code in one section - basically when the page #feed loads, I need to run the getFeed() function.
I am using jQuery Mobile.
HTML for "feed" page
<div data-role="page" id="feed">
<div data-role="header">
<h1 id="fheader">Header</h1>
</div>
<div data-role="content">
Add to My Teams
<ul data-role="listview" class="list" data-inset="true" >
</ul>
</div>
</div>
Function to getFeed
var feedURL="http://www.football365.com/arsenal/rss";
var n = 12;
function getFeed(url, success, n){
url= feedURL.replace("??", n.toString());
if(window.navigator.onLine) {
$.jGFeed(url, function(feeds) {
// Check for errors
if(!feeds){
// there was an error
return;
} else {
localStorage.setItem(url, JSON.stringify(feeds));
success(feeds.title, feeds.entries);
}
},n );
} else {
// Get the fall-back...
var feed = JSON.parse(localStorage.getItem(url));
if(feed && feed.length > 0) {
success(feed.title, feed.entries);
}
}
}
$(document).on('pagebeforeshow',function(){
getFeed(feedURL,function(title,items){
$("#title").text(title);
for(var index=0; index<items.length; index+=1){
$("#list").append(formatItem(items[index]));
}
$("#list").listview('refresh');
},20);
} );
Function to find RSS URL based on team
function getIndex(teamlist, teamname){
for(var i = 0; i<teamlist.length; i++){
if(teamlist[i].teamname == teamname){
return i; // if found index will return
}
}
return -1; // if not found -1 will return
}
var a = getIndex(teamlist,name); // will give a as 0
console.log(a);
feedURL = teamlist[a].rss_url;
console.log(feedURL);
As you can see, the RSS URL for a specific team is found via index in array. Once it has found the array, it assigns it to the feedURL variable. This part works fine
However, when the page opens, it does not take into consideration the change in variable. I need to refresh or rerun the getFeed() function to take into account the new value of feedURL.
Hope this clears things up :) Thanks :)
If you want to run your function when the page has loaded just use:
$(document).ready(function(){
getFeed();
};
This will run your function when the page has fully rendered and the #feed element is available.
I'm looking for tutorial or example on how to implement a simple input text for searching
in the grid.
My attempt (but ng-keyup require angularjs > 1.1.3 and I've got
1.0.7)
<input type="text" ng-keyup="mySearch()" ng-model="searchText">
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('largeLoad.json?q='+encodeURIComponent(ft)).success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
} else {
$http.get('largeLoad.json').success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
}
}, 100);
};
$scope.mySearch = function(){
console.log($scope.searchText);
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage,$scope.searchText);
}
Bye
NB its a fake request against a json file just to make the example.
Update: I'm using ng-grid-1.3.2
Basically to solve this problem I think you can use a solution similar to what I've done below where I'm just watching the property of the model for changes and firing a function to do the filtering on the data set at that point.
The HTML for the text input
<input type="text" placeholder="Type to filter" ng-model="gardenModel.externalFilterText"/>
The JavaScript that filters the data set (also included the part I had a watch on a service to update the data in the first place too or if the data is refreshed to reapply the filter).
//This function is called every time the data is updated from the service or the filter text changes
$scope.filterGardens = function(filterText) {
//Basically everything in this function is custom filtering specific
//to the data set I was looking at if you want something closer to the
//real implementation you'll probably have to dig through the source (I believe they separated the search filter code into it's own file in the original project)
//Creating a temporary array so changes don't cause a bunch of firing of watchers
var tempToShow = [];
//doing case insensitive search so lower case the filter text
filterText = filterText.toLowerCase();
//If the filter text is blank just use the whole data set
if(!filterText || filterText == "")
{
$scope.gardenModel.shownGardens = $scope.gardenModel.gardens;
return;
}
//step through each entry in the main list and add any gardens that match
for (var i = 0; i < $scope.gardenModel.gardens.length; i++) {
var curEntry = $scope.gardenModel.gardens[i];
var curGarden = curEntry.curGarden;
if(curGarden["Garden Name"] && curGarden["Garden Name"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
tempToShow.push(curEntry);
else if(curGarden["Address"] && curGarden["Address"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
tempToShow.push(curEntry);
else if(curGarden["Ownership"] && curGarden["Ownership"].answer.toString().toLowerCase().indexOf(filterText)!=-1)
tempToShow.push(curEntry);
else if(curGarden.gardenId && curGarden.gardenId == filterText)
tempToShow.push(curEntry);
};
$scope.gardenModel.shownGardens = tempToShow;
}
//Watch for any changes to the filter text (this is bound to the input in the HTML)
$scope.$watch('gardenModel.externalFilterText', function(value) {
$scope.filterGardens(value);
});
//Watch for any changes on the service (this way if addition/edit are made and
//refresh happens in the service things stay up to date in this view, and the filter stays)
$scope.$watch( function () { return gardenService.gardens; }, function ( gardens ) {
$scope.gardenModel.gardens = gardens;
$scope.filterGardens($scope.gardenModel.externalFilterText);
});
Edit Cleaned up the code formatting a bit and added some comments.
I have a div that is setup to bind to a observeableArray ,but I only want to show at most 50 items from that observeableArray at any given time. I want to handle this with pagination with a previous and next button along with indices on the page to allow users to cycle through pages of items from the collection. I know I could probably do this with a computedObservable and a custom data binding but I'm not sure how to do it (I'm still a Knockout neophyte). Can anyone point me in the right direction?
Here is my code (the JS is in TypeScript):
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<%=
if params[:q]
render 'active_search.html.erb'
else
render 'passive_search.html.erb'
end
%>
<%= form_tag("/search", method: "get", :class => "form-search form-inline") do %>
<%= label_tag(:q, "Search for:") %>
<%= text_field_tag(:q, nil, class:"input-medium search-query") %>
<%= submit_tag("Search", :class=>"btn") %>
<% end %>
<div class="media" data-bind="foreach: tweetsArray">
<%= image_tag('twitter-icon.svg', :class=>"tweet_img", :style=>"display:inline;") %>
<div class="media-body" style="display:inline;">
<h4 class="media-heading" data-bind="text: user.screen_name" style="display:inline;"></h4>
<span data-bind="text:text" style="display:inline;"></span> <br />
<span data-bind="text:'Created at '+created_at"></span> <br />
</div>
</div>
<div class="pagination pagination-centered">
<ul>
<li>
Prev
</li>
<li>
1
</li>
<li>
Next
</li>
</ul>
</div>
</div>
</div>
</div>
<script>
var viewModel = new twitterResearch.TweetViewModel();
ko.applyBindings(viewModel);
//TODO: notes to self, use custom binding for pagination along with a computed observable to determine where at in the list you are
//document.onReady callback function
$(function() {
$.getJSON('twitter', {}, function(data) {
viewModel.pushTweet(data);
console.log(data.user);
});
});
</script>
declare var $: any;
declare var ko: any;
module twitterResearch {
class Tweet {
text: string;
created_at: string;
coordinates: string;
user: string;
entities: string;
id: number;
id_str: string;
constructor(_text: string, _created_at: string, _coordinates: any, _user: any,
_entities: any, _id_str: string, _id: number){
this.text = _text;
this.created_at = _created_at;
this.coordinates = _coordinates;
this.user = _user;
this.entities = _entities;
this.id_str = _id_str;
this.id = _id;
}
}
export class TweetViewModel{
tweetsArray: any;
constructor()
{
this.tweetsArray = ko.observableArray([]);
}
//tweet is going to be the JSON tweet we return
//from the server
pushTweet(tweet)
{
var _tweet = new Tweet(tweet.text, tweet.created_at, tweet.coordinates,
tweet.user, tweet.entities, tweet.id_str, tweet.id);
this.tweetsArray.push(_tweet);
this.tweetsArray.valueHasMutated();
}
}
}
Pagination is quite simple with Knockout. I would personally achieve it this way:
Have an observableArray containing all your elements
Have an observable containing the current page (initialized to 0)
Have a variable declaring the number of elements per page
Have a computed that returns the number of pages, calculated thanks to the number of elements per page and the total number of elements.
Finally, add a computed that slices the array containing all the elements.
Given that, you can now add a function that increments (next) or decrements (previous) the current page.
Here is a quick example:
var Model = function() {
var self = this;
this.all = ko.observableArray([]);
this.pageNumber = ko.observable(0);
this.nbPerPage = 25;
this.totalPages = ko.computed(function() {
var div = Math.floor(self.all().length / self.nbPerPage);
div += self.all().length % self.nbPerPage > 0 ? 1 : 0;
return div - 1;
});
this.paginated = ko.computed(function() {
var first = self.pageNumber() * self.nbPerPage;
return self.all.slice(first, first + self.nbPerPage);
});
this.hasPrevious = ko.computed(function() {
return self.pageNumber() !== 0;
});
this.hasNext = ko.computed(function() {
return self.pageNumber() !== self.totalPages();
});
this.next = function() {
if(self.pageNumber() < self.totalPages()) {
self.pageNumber(self.pageNumber() + 1);
}
}
this.previous = function() {
if(self.pageNumber() != 0) {
self.pageNumber(self.pageNumber() - 1);
}
}
}
You'll find a simple and complete example here: http://jsfiddle.net/LAbCv/ (might be a bit buggy, but the idea is there).
Actually I am working on a website, which has a lot of tables (most of them need paging).So actually, I needed some reusable-component for paging to use it in all the cases which I need paging.
Also, I needed more advanced features than which provided in the accepted answer to this question.
So I developed my own component to solving this issue, here it is.
Now on Github
JsFiddle
And for more details, continue reading (Please consider to take the code from GitHub, not from here, as the GitHub code was updated and enhanced since I put it here)
JavaScript
function PagingVM(options) {
var self = this;
self.PageSize = ko.observable(options.pageSize);
self.CurrentPage = ko.observable(1);
self.TotalCount = ko.observable(options.totalCount);
self.PageCount = ko.pureComputed(function () {
return Math.ceil(self.TotalCount() / self.PageSize());
});
self.SetCurrentPage = function (page) {
if (page < self.FirstPage)
page = self.FirstPage;
if (page > self.LastPage())
page = self.LastPage();
self.CurrentPage(page);
};
self.FirstPage = 1;
self.LastPage = ko.pureComputed(function () {
return self.PageCount();
});
self.NextPage = ko.pureComputed(function () {
var next = self.CurrentPage() + 1;
if (next > self.LastPage())
return null;
return next;
});
self.PreviousPage = ko.pureComputed(function () {
var previous = self.CurrentPage() - 1;
if (previous < self.FirstPage)
return null;
return previous;
});
self.NeedPaging = ko.pureComputed(function () {
return self.PageCount() > 1;
});
self.NextPageActive = ko.pureComputed(function () {
return self.NextPage() != null;
});
self.PreviousPageActive = ko.pureComputed(function () {
return self.PreviousPage() != null;
});
self.LastPageActive = ko.pureComputed(function () {
return (self.LastPage() != self.CurrentPage());
});
self.FirstPageActive = ko.pureComputed(function () {
return (self.FirstPage != self.CurrentPage());
});
// this should be odd number always
var maxPageCount = 7;
self.generateAllPages = function () {
var pages = [];
for (var i = self.FirstPage; i <= self.LastPage() ; i++)
pages.push(i);
return pages;
};
self.generateMaxPage = function () {
var current = self.CurrentPage();
var pageCount = self.PageCount();
var first = self.FirstPage;
var upperLimit = current + parseInt((maxPageCount - 1) / 2);
var downLimit = current - parseInt((maxPageCount - 1) / 2);
while (upperLimit > pageCount) {
upperLimit--;
if (downLimit > first)
downLimit--;
}
while (downLimit < first) {
downLimit++;
if (upperLimit < pageCount)
upperLimit++;
}
var pages = [];
for (var i = downLimit; i <= upperLimit; i++) {
pages.push(i);
}
return pages;
};
self.GetPages = ko.pureComputed(function () {
self.CurrentPage();
self.TotalCount();
if (self.PageCount() <= maxPageCount) {
return ko.observableArray(self.generateAllPages());
} else {
return ko.observableArray(self.generateMaxPage());
}
});
self.Update = function (e) {
self.TotalCount(e.TotalCount);
self.PageSize(e.PageSize);
self.SetCurrentPage(e.CurrentPage);
};
self.GoToPage = function (page) {
if (page >= self.FirstPage && page <= self.LastPage())
self.SetCurrentPage(page);
}
self.GoToFirst = function () {
self.SetCurrentPage(self.FirstPage);
};
self.GoToPrevious = function () {
var previous = self.PreviousPage();
if (previous != null)
self.SetCurrentPage(previous);
};
self.GoToNext = function () {
var next = self.NextPage();
if (next != null)
self.SetCurrentPage(next);
};
self.GoToLast = function () {
self.SetCurrentPage(self.LastPage());
};
}
HTML
<ul data-bind="visible: NeedPaging" class="pagination pagination-sm">
<li data-bind="css: { disabled: !FirstPageActive() }">
<a data-bind="click: GoToFirst">First</a>
</li>
<li data-bind="css: { disabled: !PreviousPageActive() }">
<a data-bind="click: GoToPrevious">Previous</a>
</li>
<!-- ko foreach: GetPages() -->
<li data-bind="css: { active: $parent.CurrentPage() === $data }">
<a data-bind="click: $parent.GoToPage, text: $data"></a>
</li>
<!-- /ko -->
<li data-bind="css: { disabled: !NextPageActive() }">
<a data-bind="click: GoToNext">Next</a>
</li>
<li data-bind="css: { disabled: !LastPageActive() }">
<a data-bind="click: GoToLast">Last</a>
</li>
</ul>
Features
Show on need When there is no need for paging at all (for example the items which need to display less than the page size) then the HTML component will disappear.
This will be established by statementdata-bind="visible: NeedPaging".
Disable on need
for example, if you are already selected the last page, why the last page or the Next button should be available to press?
I am handling this and in that case I am disabling those buttons by applying the following binding data-bind="css: { disabled: !PreviousPageActive() }"
Distinguish the Selected page
a special class (in this case called active class) is applied on the selected page, to make the user know in which page he/she is right now. This is established by the binding data-bind="css: { active: $parent.CurrentPage() === $data }"
Last & First
going to the first and last page is also available by simple buttons dedicated to this.
Limits for displayed buttons
suppose you have a lot of pages, for example, 1000 pages, then what will happen? would you display them all for the user? absolutely not you have to display just a few of them according to the current page. for example, showing 3 pages before and other 3 pages after the selected page.
This case has been handled here <!-- ko foreach: GetPages() -->
the GetPages function applying a simple algorithm to determine if we need to show all the pages (the page count is under the threshold, which could be determined easily), or to show just some of the buttons.
you can determine the threshold by changing the value of the maxPageCount variable
Right now I assigned it as the following var maxPageCount = 7; which mean that no more than 7 buttons could be displayed for the user (3 before the SelectedPage, and 3 after the Selected Page) and the Selected Page itself.
You may wonder, what if there were not enough pages after OR before the current page to display? do not worry I am handling this in the algorithm for example, if you have 11 pages and you have maxPageCount = 7 and the current selected page is 10, Then the following pages will be shown
5,6,7,8,9,10(selected page),11
so we always stratifying the maxPageCount, in the previous example showing 5 pages before the selected page and just 1 page after the selected page.
Selected Page Validation
All set operation for the CurrentPage observable which determine the selected page by the user, is going through the function SetCurrentPage. In only this function we set this observable, and as you can see from the code, before setting the value we make validation operations to make sure that we will not go beyond the available page of the pages.
Already clean
I use only pureComputed not computed properties, which means you do not need to bother yourself with cleaning and disposing of those properties. Although, as you will see in the example below, you need to dispose of some other subscriptions which are outside of the component itself
NOTE 1
You may notice that I am using some bootstrap classes in this component,
This is suitable for me, but , of course, you can use your own classes instead of the bootstrap classes.
The bootstrap classes which I used here are pagination, pagination-sm, active and disabled
Feel free to change them as you need.
NOTE 2
So I introduced the component for you, It is time to see how it could work.
You would integrate this component into your main ViewModel as like this.
function MainVM() {
var self = this;
self.PagingComponent = ko.observable(new Paging({
pageSize: 10, // how many items you would show in one page
totalCount: 100, // how many ALL the items do you have.
}));
self.currentPageSubscription = self.PagingComponent().CurrentPage.subscribe(function (newPage) {
// here is the code which will be executed when the user changes the page.
// you can handle this in the way you need.
// for example, in my case, I am requesting the data from the server again by making an ajax request
// and then updating the component
var data = /*bring data from server , for example*/
self.PagingComponent().Update({
// we need to set this again, why? because we could apply some other search criteria in the bringing data from the server,
// so the total count of all the items could change, and this will affect the paging
TotalCount: data.TotalCount,
// in most cases we will not change the PageSize after we bring data from the server
// but the component allows us to do that.
PageSize: self.PagingComponent().PageSize(),
// use this statement for now as it is, or you have to made some modifications on the 'Update' function.
CurrentPage: self.PagingComponent().CurrentPage(),
});
});
self.dispose = function () {
// you need to dispose the manual created subscription, you have created before.
self.currentPageSubscription.dispose();
}
}
Last but not least, Sure do not forget to change the binding in the HTML component according to your special viewModel, or wrap all the component with the with binding like this
<div data-bind="with: PagingComponent()">
<!-- put the component here -->
</div>
Cheers
I have created a blogpost with detailed explanation on how to create pagination with the help of a little JQuery plugin (here).
Basically, I have used normal knockout data binding with AJAX and after data has been retrieved from the server, I call the plugin. You can find the plugin here. It's called Simple Pagination.
This question is still one of the top searches for "knockout pagination", so the knockout extension knockout-paging (git) is worth mentioning.
It provides pagination by extending ko.observableArray. It is well documented and easy to use.
The usage example is here.