I am trying to create a javscript method that will allow moving to the next field by hitting the enter key. This mostly works fine, except that when you hit enter to click a button, it creates a new row identical to the previous one (which is normal), but then it doesn't move to the next field straight away. You need to hit tab to go to the next one.
I would really appreciate some help on this, as I cannot get it to move to the next box and go straight to it.
quickAddViewModel.prototype.addItemLine = function() {
var self = this;
var itemLine = {
ItemNumber: ko.observable(''),
ItemQuantity: ko.observable(0),
Error: ko.observable(false)
};
self.itemsToAdd.push(itemLine);
}
ko.bindingHandlers.nextFieldOnEnter = {
init: function(element, valueAccessor, allBindingsAccessor) {
$(element).on('keydown', 'input, select', function(e) {
var self = $(this),
form = $(element),
focusable, next;
if (e.keyCode == 13) {
focusable = form.find('input,a,select,button,textarea').filter(':visible');
var nextIndex = focusable.index(this) == focusable.length - 1 ? 0 : focusable.index(this) + 1;
next = focusable.eq(nextIndex);
next.focus();
this.addItemLine();
return true;
}
});
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="row form-group" data-bind="css: { 'has-error': Error() }, nextFieldOnEnter:true">
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="Eg K000_ASAHI" data-bind="itemCodes: ItemNumber, value: ItemNumber, valueUpdate: 'input'">
</div>
<div class="col-xs-3">
<input type="number" class="form-control" placeholder="0" data-bind="numericInput: ItemQuantity, value: ItemQuantity">
</div>
<div class="col-xs-2">
<button type="button" class="icon-circle-minus" data-bind="visible: $index() + 1 < $parent.itemsToAdd().length, click: function() { $parent.removeItemLine($index()) }, clickBubble: false"></button>
<button type="button" class="icon-circle-plus" data-bind="visible: $index() + 1 == $parent.itemsToAdd().length, click: function() { $parent.addItemLine() }"></button>
</div>
</div>
Related
I am getting some strange behaviour within IE which I was hoping someone might be able to explain. I have a simple form with an address lookup input
<form action="http://localhost:8000/processForm" method="post">
<label for="input_1" class="form-control-label col-xs-12">
Postcode
</label>
<div class="col-xs-12">
<div class="input-group">
<input type="text" name="questions[1]" autocomplete="off" id="input_1" class="form-control address" value="" >
<a class="btn btn-xs input-group-addon address-button" id="input_address_addon" role="button" tabindex="0">
<img src="http://localhost:8000/images/glyphicons-243-map-marker.png">
Search
</a>
</div>
<div class="col-xs-12 col-sm-8 col-sm-offset-4 col-md-7">
<select class="form-control selectpicker addSelect" id="input_address_select" style="display: none;">
<option value="">Enter above</option>
</select>
</div>
</div>
<button type="submit" class="btn submit btn-navigation">
Continue
</button>
</form>
The address is entered into the input, then the search button is clicked. This makes a call to an API to return addresses and populate the a select input with them. This all works fine in all browsers, but noticed something strange with IE. This is the Javascript that handles the API call and populating of the select.
!function ($, window) {
$(function () {
init();
});
var getAddresses = function (postcode, callback) {
var $xhr = $.getJSON('/lookupPostcode/' + postcode);
$xhr.done(function (data) {
callback(data);
});
$xhr.error(function () {
callback([]);
})
};
var init = function () {
$("input.address").each(function () {
var $input = $(this);
var $icon = $input.next('.address-button');
var $select = $input.parents('.row').eq(0).find("select");
$select.css("display", "none");
var onKeyUp = function (e) {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
$icon.trigger("click");
}
};
var onKeyDown = function(e) {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
}
};
$input.on("keyup", onKeyUp);
$input.on("keydown", onKeyDown);
$icon.on("keyup", onKeyUp);
$icon.on("keydown", onKeyDown);
$select.on("keyup", onKeyUp);
$icon.on("click", function () {
getAddresses($input.val(), function (addresses) {
//populate select options with addresses
});
});
$select.on('change', function (event) {
var ua = window.navigator.userAgent;
var is_ie = /MSIE|Trident/.test(ua);
if ( !is_ie ) {
$select.css("display", "none");
}
/*$select.css("display", "none");*/
});
});
};
}(jQuery, window);
So when an address is selected from the select input, I hide the select input. On IE, this hiding of this element seems to make the form submit. You can see above that I have added some code to check that it is not IE and only hide on these devices, and keeping the select in place on IE works fine. Also, if I put an alert at the top of the change event, this also seems to stop the form submitting in IE.
So I was wondering what may be causing this to submit in IE if I hide the select? I have read that IE does not like buttons to be used as form submits, but not sure if this is the issue?
Is there any way to get the select hiding in IE?
Thanks
So I was wondering what may be causing this to submit in IE if I hide
the select? I have read that IE does not like buttons to be used as
form submits, but not sure if this is the issue?
I can't reproduce your problem, everything works well on my side (IE 11.1.17340.0 version).
Please try to use the following code: (based on your code, please note the part of code with comment)
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
!function ($, window) {
$(function () {
init();
});
var getAddresses = function (postcode, callback) {
//var $xhr = $.getJSON('/lookupPostcode/' + postcode);
//$xhr.done(function (data) {
// callback(data);
//});
//$xhr.error(function () {
// callback([]);
//})
//using the following array to populate the select.
var datalist = [{ "ID": "1", "ParentID": "0", "Name": "Parent1" }, { "ID": "2", "ParentID": "0", "Name": "Parent2" },
{ "ID": "3", "ParentID": "1", "Name": "Child 1.1" }, { "ID": "4", "ParentID": "1", "Name": "Child 1.2" },
{ "ID": "5", "ParentID": "3", "Name": "SubChild 1.1.1" }, { "ID": "6", "ParentID": "2", "Name": "Child 2.1" }];
callback(datalist);
};
var init = function () {
$("input.address").each(function () {
var $input = $(this);
var $icon = $input.next('.address-button');
//you are using the .row class to find the select control, but from your form, I can't find this class.
var $select = $input.parents('.row').eq(0).find("select");
//debugger;
$select.css("display", "none");
var onKeyUp = function (e) {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
$icon.trigger("click");
}
};
var onKeyDown = function (e) {
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
}
};
$input.on("keyup", onKeyUp);
$input.on("keydown", onKeyDown);
$icon.on("keyup", onKeyUp);
$icon.on("keydown", onKeyDown);
$select.on("keyup", onKeyUp);
$icon.on("click", function () {
$select.empty();
$select.append("<option value=''>Enter above</option>");
getAddresses($input.val(), function (addresses) {
//populate select options with addresses
$.each(addresses, function (index, item) {
//debugger;
$select.append("<option value='" + item.ID + "'>" + item.Name + "</option>");
});
$select.css("display", "block");
});
});
$select.on('change', function (event) {
var ua = window.navigator.userAgent;
var is_ie = /MSIE|Trident/.test(ua);
//get the selected text and populate the input text.
$input.val($(this).find("option:selected").text());
//hide the select control
if (!is_ie) {
$select.css("display", "none");
}
$select.css("display", "none");
});
});
};
}(jQuery, window);
</script>
</head>
<body>
<form action="http://localhost:8000/processForm" method="post">
<label for="input_1" class="form-control-label col-xs-12">
Postcode
</label>
<div class="col-xs-12 row">
<div class="input-group">
<input type="text" name="questions[1]" autocomplete="off" id="input_1" class="form-control address" value="" />
<a class="btn btn-xs input-group-addon address-button" id="input_address_addon" role="button" tabindex="0">
<img src="http://i.imgur.com/H9FIags.jpg" style="height:10px;width:10px" />
Search
</a>
</div>
<div class="col-xs-12 col-sm-8 col-sm-offset-4 col-md-7">
<select class="form-control selectpicker addSelect" id="input_address_select" >
<option value="">Enter above</option>
</select>
</div>
</div>
<button type="submit" class="btn submit btn-navigation">
Continue
</button>
</form>
</body>
The output as below:
The reason why your form submits is the fact that you have a button of type "submit" in your form.
<button type="submit"...>
Whenever you press enter, this will cause your form to submit.
You need to change your submit button to another type like "button" and add a Javascript event handler to it (for example onClick="submit()").
<button type="button" class="btn submit btn-navigation" onClick="submit(this.form)">
Continue
</button>
function submit(form){
form.submit();
}
I'm busy with David Turnbull's - Your first Meteor Application. Everything works up to the point where I try and add a new player to the list via a form. My problem is that preventDefault is not preventing the form from trying to submit and reloading the page. return false doesn't work either.
Any ideas why this will be happening?
Thanks
PlayersList = new Mongo.Collection('players');
if (Meteor.isClient) {
//Helpers
Template.leaderboard.helpers({
'player': function() {
return PlayersList.find({}, {sort: {score: -1, name: 1}});
},
'playerCount': function() {
return PlayersList.find().count();
},
'selectedClass': function() {
var playerId = this._id;
var selectedPlayer = Session.get('selectedPlayer');
if(playerId == selectedPlayer) {
return 'selected'
}
},
'showSelectedPlayer': function() {
var selectedPlayer = Session.get('selectedPlayer');
return PlayersList.findOne(selectedPlayer);
}
});
//Events
Template.leaderboard.events({
'click .player': function() {
var playerId = this._id;
Session.set('selectedPlayer', playerId);
},
'click .increment': function() {
var selectedPlayer = Session.get('selectedPlayer');
var increaseBy = document.getElementById('increase-by').value;
var isNumber = /^\d+$/.test(increaseBy);
if(increaseBy != '' && isNumber) {
PlayersList.update(selectedPlayer, {$inc: {score: +increaseBy}});
}
},
'click .decrement': function() {
var selectedPlayer = Session.get('selectedPlayer');
var decreaseBy = document.getElementById('decrease-by').value;
PlayersList.update(selectedPlayer, {$inc: {score: -decreaseBy}});
},
'submit #new-player': function(event) {
event.preventDefault();
var playerNameVar = event.target.playerName.value;
if(playerNameVar != '') {
PlayersList.insert({
name: playerNameVar,
score:0
});
}
}
});
}
Template
<template name="addPlayerForm">
<div id="add-player" class="reveal-modal" data-reveal>
<a class="close-reveal-modal">×</a>
<h2>Add a player</h2>
<p class="lead">Add another player to the leaderboard</p>
<div class="row">
<div class="small-8 column small-centered">
<form id="new-player">
<div class="row collapse">
<div class="small-8 column">
<input type="text" placeholder="Player name" name="playerName">
</div>
<div class="small-4 column">
<input type="submit" class="button postfix" value="add player">
</div>
</div>
</form>
</div>
</div>
</div>
</template>
I've never read the book, and I don't know what your template looks like, but the problem is likely due to a selector issue.
Maybe try assigning an id to your form and mapping the submit event to that id:
// html file
<Template name="leaderboard">
<form id="new-player">
<input type="text" name="playerName">
<input type="submit" value="Submit">
</form>
</Template>
// js file
Template.leaderboard.events({
'submit #new-player': function(event) {
event.preventDefault();
...
}
});
Edit
Maybe try changing Template.leaderboard.events to Template.addPlayerForm.events.
Ok, I made the same mistake as the poster and I am putting the correct code here:
In html file:
<template name="addPlayerForm">
<form>
<input type="text" name="playerName">
<input type="submit" value="Add Player">
</form>
</template>
In js file:
Template.addPlayerForm.events({
'submit form': function(event){
event.preventDefault();
console.log("Form submitted");
console.log(event.type);
}
});
$scope seems to be missing binding properties for a text box typeahead and a select list.
Here is a fiddle showing the behavior I want: http://jsfiddle.net/langtonr/h4MKa/1/
You can add and remove salesmen as desired. The $scope is binding correctly to $scope.salesmanEntry (the salesman selected in the typeahead) and $scope.selectedSalesmen (salesmen that have been selected in the list box).
This same code I have copied and pasted into my project and it does not work. I am using all the same library references. It seems scope just doesn't work for these 2 variables. $scope.salesmanEntry and $scope.selectedSalesmen are always undefined. My full controller code is below. What could possibly be interfering with my $scope?
I'm outputting the following on my view:
<div>{{salesmanEntry.id}} {{salesmanEntry.displayName}}</div>
My view always shows these correctly, so when I have typed a salesman, it shows up, yet when I get to my controller code, $scope.salesmanEntry is always undefined. It exhibits the same behavior with $scope.selectedSalesmen. I can output to the screen by using an ng-repeat on selectedSalesmen, yet in my controller $scope.selectedSalesmen is always undefined.
manageProductsModule.controller('productDetailCtrl', [
'productSvc', 'equipmentOptionSvc', 'salesmanSvc', '$scope', function (productSvc, equipmentOptionSvc, salesmanSvc, $scope) {
$scope.loadingProduct = false;
$scope.product = {
secureUsers: [],
options: [],
priceHistory: []
};
$scope.addedSalesmen = [];
$scope.allSalesmen = [
{ id: 1, displayName: "Smith, John" },
{ id: 2, displayName: "Ramsey, Gordon" },
{ id: 3, displayName: "White, Betty" }];
$scope.addSalesman = function (salesman) {
if (!salesman.id) return;
var result = $.grep($scope.addedSalesmen, function (e) { return e.id == salesman.id; });
if (result.length === 0) {
$scope.addedSalesmen.push(salesman);
}
$scope.salesmanEntry = { id: -1, displayName: "" };
};
$scope.removeSalesmen = function () {
$scope.selectedSalesmen.forEach(function (salesman) {
var index = $scope.addedSalesmen.indexOf(salesman);
$scope.addedSalesmen.splice(index, 1);
});
$scope.selectedSalesmen = [];
}
}
]);
template:
<div ng-app="manageProductsModule">
<div class="container" ng-controller="productDetailCtrl">
<h3>Model Details</h3>
<form class="form-horizontal" role="form" ng-if="!loadingProduct">
<div class="form-group">
<label for="addSalesmenInput" class="control-label col-md-2">Add</label>
<div class="col-md-4">
<div class="input-group">
<input name="addSalesmenInput"
class="form-control"
ng-model="salesmanEntry"
typeahead="salesman as salesman.displayName for salesman in allSalesmen | filter:$viewValue" />
<div class="input-group-btn">
<button class="btn" ng-click="addSalesman(salesmanEntry)" ng-disabled="!salesmanEntry">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="salesmenInput" class="control-label col-md-2">Salesmen With Access</label>
<div class="col-md-4">
<select name="salesmenInput" multiple="multiple" size="8" class="form-control" ng-model="selectedSalesmen" ng-options="salesman as salesman.displayName for salesman in addedSalesmen"></select>
<button class="btn" ng-click="removeSalesmen()" ng-disabled="!selectedSalesmen || selectedSalesmen.length === 0">
<i class="glyphicon glyphicon-minus"></i>
</button>
</div>
</div>
</form>
</div>
</div>
So here is what I had to do to get this to work. I am definitely not happy with what seems like a very hacky solution and would like to know why this is necessary. I had to go to $scope.$$childHead to access salesmanEntry and selectedSalesmen as they are apparently being stored on the wrong scope.
$scope.addSalesman = function (salesman) {
if (!salesman.id) return;
var result = $.grep($scope.addedSalesmen, function (e) { return e.id == salesman.id; });
if (result.length === 0) {
$scope.addedSalesmen.push(salesman);
}
$scope.$$childHead.salesmanEntry = { id: -1, displayName: "" };
};
$scope.removeSalesmen = function () {
$scope.$$childHead.selectedSalesmen.forEach(function (salesman) {
var index = $scope.addedSalesmen.indexOf(salesman);
$scope.addedSalesmen.splice(index, 1);
});
$scope.$$childHead.selectedSalesmen = [];
}
I have page when I have input and a button.
<div>
<div class="input-group">
<span class="input-group-addon">Enter test</span>
<input type="Text" class="form-control" data-bind="value:Test, event: { keypress: searchKeyboardCmd}" required />
</div>
</div>
<button data-bind=' event:{click:foo}' class="btn btn-default">Submit</button>
and my code:
var ViewModel = function () {
var self = this;
self.Test = ko.observable();
self.data = ko.observableArray([]);
self.DeviceId = ko.observable();
self.number = ko.observable(1);
self.MeUser = ko.observable(true);
self.searchKeyboardCmd = function (data, event) {
if (event.keyCode == 13)
alert("Znalazlem enter " + ko.toJSON(self));
return true;
};
self.foo = function () {
alert("foo");
}
};
ko.applyBindings(new ViewModel());
});
And I have problems with my code. I catch enter with this code:
self.searchKeyboardCmd = function (data, event) {
if (event.keyCode == 13)
alert("Znalazlem enter " + ko.toJSON(self));
return true;
};
It's catches perfectly but binded object is updated after calling alert. So in the first enter I null in value Test. After second enter I have first value and so on. Can anyone suggest me how to modify this code?
The problem is that the event is executed before the blur event (which is when the value is updated. You can make sure the update gets updated after every keystroke by adding valueupdate: 'afterkeydown' to the input:
<div>
<div class="input-group">
<span class="input-group-addon">Enter test</span>
<input type="Text" class="form-control"
data-bind="valueUpdate: 'afterkeydown', value:Test, event: { keypress: searchKeyboardCmd}" required />
</div>
</div>
<button data-bind=' event:{click:foo}' class="btn btn-default">Submit</button>
I have a form long enough that I want to enable users to save their progress and finish it later. It has multiple Knockout view models (all grids) as well as good old-fashioned inputs.
Here's an example of the code powering one of the grids (they're all basically the same):
/**
* Goals
* #param {string} goal_secondary value of input[name=goal_secondary]
* #param {string} relation_goal_secondary value of textarea[name=relation_goal_secondary]
*/
function Goal(goal_secondary, relation_goal_secondary) {
var self = this;
self.goal_secondary = goal_secondary;
self.relation_goal_secondary = relation_goal_secondary;
}
function GoalsVM() {
var self = this;
// Apparently moves trigger afterAdd, but I don't want it to, so let's pretend it doesn't.
move = false;
self.goals = ko.observableArray([
new Goal('', '')
]);
self.addGoal = function() {
self.goals.push(new Goal('', ''));
}
self.removeGoal = function(goal) {
self.goals.remove(goal);
}
self.afterAdd = function(el) {
// Don't do this stuff on move!
if (el.nodeType === 1 && !move) {
$(el).hide().slideDown();
}
// Reset move in case the user's next action is to add a new goal.
move = false;
}
self.beforeMove = function(el) {
// Tell afterAdd this is a move, not really an add.
move = true;
}
self.beforeRemove = function(el) {
if (el.nodeType === 1) {
$(el).slideUp(function() {
$(el).remove();
})
}
}
}
Here's the associated markup:
<ul class="grid list-unstyled"
data-bind="sortable: {
data: goals,
afterAdd: afterAdd,
beforeRemove: beforeRemove,
beforeMove: beforeMove
}">
<li class="row">
<div class="col-xs-1"><span class="move">≡</span></div>
<div class="col-xs-10">
<input class="form-control"
data-bind="value: goal_secondary,
attr: { name: 'goal_secondary_' + $index() }">
<textarea rows="3" class="form-control"
data-bind="value: relation_goal_secondary,
attr: { name: 'relation_goal_secondary_' + $index() }"></textarea>
</div>
<div class="col-xs-1">
<button class="btn text-danger btn-xs remove" data-bind="click: removeGoal">
×
</button>
</div>
</li>
</ul>
I was trying to follow the Loading and Saving JSON data page in the docs, but ko.toJSON(GoalsVM) returns undefined.
I also tried using var Goal = function(goal_secondary, relation_goal_secondary) {…} and var GoalsVM = function() {…}, but I still got undefined.