I have a div bound to an observable array like so:
<div data-bind="foreach: currentSelected().Tags " contenteditable="true">
<span data-bind="text:$data"></span>
</div>
I made the div's content editable so that any changes (user input) get reflected in the Tags array, but that isn't working as I assumed. There seems to be no automatic push for observable arrays. My question is, how do I get new values inside the Tags array using binding?
Here is how I am setting currentSelected:
var newBlogEntry = new NewBlogEntry();
var newBlogEntryObservable = new NewBlogEntryObservable(newBlogEntry);
self.currentSelected(newBlogEntryObservable);
The function for NewBlogEntry is as follows:
function NewBlogEntry()
{
return { "Id": 0, "Title": "Title", "Description": "Description", "Tags": [] };
}
I managed to solve the problem by adding an extra input field:
<input type="text" placeholder="new tag" data-bind="value:newTag, valueUpdate: 'afterkeydown', enterkey: addNewTag" id="addTag" />
The binding for the enter key is as follows:
ko.bindingHandlers.enterkey = {
init: function (element, valueAccessor, allBindings, viewModel) {
var callback = valueAccessor();
$(element).keypress(function (event) {
var keyCode = (event.which ? event.which : event.keyCode);
if (keyCode === 13) {
callback.call(viewModel);
return false;
}
return true;
});
}
};
And this is the observable for the newTag:
self.newTag = ko.observable();
self.addNewTag = function () {
if (self.newTag() == '')
alert("Enter something in input field");
else {
var tag = self.newTag();
self.currentSelected().Tags.push(tag);
$("#addTag").val("");
}
}
Related
I've many forms on one page. Each of the forms should have a phone number field. Those fields are driven by JS plug-in.
So I'm getting a big number of fields which should be properly initialized.
If I will do it manually I will get:
forms * phone input fields = number of initializations.
At this moment I only have the very first field working. Other doesn't initialize.
My markup looks like:
<input type="tel" class="phone_flag" name="phone_tab1[main]" required="">
<input type="tel" class="phone_flag" name="phone_tab2[main]" required="">
<input type="tel" class="phone_flag" name="phone_tab3[main]" required="">
xxx
...
I got a piece of advice: in order to make in properly work, I should have querySelectorAll with forEach loop. Then I should call PhoneDisplay function, don't pass the class name, instead pass in the element itself. Afterward, initialize the plugin on that element directly.
I only came to this solution, but it only inits the first element.
JS init code:
document.querySelectorAll('.phone_flag').forEach(el => {
PhoneDisplay(el.className);
});
function PhoneDisplay(ClassName){
var input = document.querySelector('.' + `${ClassName}`);
var iti = window.intlTelInput(input, {
hiddenInput: "full",
initialCountry: "auto",
geoIpLookup: function(callback) {
$.get('proxy.php', function() {}).always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "";
callback(countryCode);
});
},
hiddenInput: "full_phone",
utilsScript: "intlTelInput/js/utils.js"
});
var reset = function() {
input.classList.remove("error");
errorMsg.innerHTML = "";
errorMsg.classList.add("hide");
validMsg.classList.add("hide");
};
input.addEventListener('blur', function() {
reset();
if (input.value.trim()) {
if (iti.isValidNumber()) {
validMsg.classList.remove("hide");
} else {
input.classList.add("error");
var errorCode = iti.getValidationError();
errorMsg.innerHTML = errorMap[errorCode];
errorMsg.classList.remove("hide");
}
}
});
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
}
document.querySelector returns the first query, so var input is always the first input. You should just pass in the element itself in the forEach loop: PhoneDisplay(el); and then function PhoneDisplay(input) and remove the 'var input=' line.
jQuery(document).ready(function($) {
var input = $("input[name=phone]");
input.each(function() {
intlTelInput($(this)[0], {
initialCountry: "auto",
nationalMode: false,
separateDialCode: true,
preferredCountries: ["ua", "pl", "us"],
geoIpLookup: function(success, failure) {
$.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
var countryCode = (resp && resp.country) ? resp.country : "us";
success(countryCode);
});
},
});
});
});
I have a Table using Knockout to fill in data and to select the rows. The challenge right now is I can select the row and it's details I can see. But when I click on paging or if on any particular search box I wish to deselect the Row.
Here is the Fiddle which will explain More
Below is the Model Code for the HTML Page
var RowModel = function(id, name, status) {
this.ID = ko.observable(id);
this.Name = ko.observable(name);
this.Status = ko.observable(status);
};
RowModel.fromRawDataPoint = function(dataPoint) {
return new RowModel(dataPoint.id, dataPoint.name, dataPoint.status);
};
From the fiddle, I can see that you are implementing deselect by calling self.selected(null) and self.enableEdit(false).
So you can simply call these again whenever the page is changed or when a search is done.
self.deselect = function(){
self.selected(null);
self.enableEdit(false);
};
this.next = function() {
self.deselect();
if(self.pageNumber() < self.totalPages()) {
self.pageNumber(self.pageNumber() + 1);
}
}
this.lastpage = function() {
self.deselect();
if(self.pageNumber() < self.totalPages()) {
self.pageNumber(self.totalPages());
}
}
this.firstpage = function() {
self.deselect();
if(self.pageNumber() != 0) {
self.pageNumber(self.pageNumber()-self.pageNumber());
alert(self.pageNumber());
}
}
this.previous = function() {
self.deselect();
if(self.pageNumber() != 0) {
self.pageNumber(self.pageNumber() - 1);
}
}
Edit: After your comment about the ID, Name and Status not getting updated, I added 3 new observables selectedName, selectedID and selectedStatus. I am using these observables in HTML so that they can be updated whenever selected is changed. This is done by using a subscribe function on selected.
HTML
<input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" />
<br>Name :
<input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" />
<br>Status :
<input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" />
JS
self.selected = ko.observable(self.items()[0]);
self.selectedID=ko.observable(self.items()[0].ID());
self.selectedName=ko.observable(self.items()[0].Name());
self.selectedStatus=ko.observable(self.items()[0].Status());
self.selected.subscribe(function(newValue){
if (newValue === null){
self.selectedID(null);
self.selectedName(null);
self.selectedStatus(null);
return;
}
if (typeof newValue !== 'undefined'){
self.selectedID(newValue.ID());
self.selectedName(newValue.Name());
self.selectedStatus(newValue.Status());
}
});
I want to get the answers to a form upon submission and parse them to JSON.
This works quite good but I want some validation before sending the data.
I tried a lot of variations of the snippet down below but am still stuck.
Steps:
Prevent default event on "send"
Get Form
Iterate through the elements of the form
Eliminate empty items and their value
If checkbox is checked: value = true
Store correct items in data
Return data
Somehow I can't get to work steps 4 and 5 work at the same time, every time I get one of them to work I screw over the other one.
In this snippet, the checkbox works as intented but the textfield doesn't:
If anybody can point me in the right direction with the if/else statements or something like that it would be greatly appreciated.
document.addEventListener('DOMContentLoaded', function(){
var data = {};
var formToJSON = function formToJSON(form) {
var data = {};
for (var i = 0; i < form.length; i++) {
var item = form[i];
//looking for checkbox
if (item.value =="") {
continue;
}
else {
if (item.checked == false) {
data[item.name] = false;
}
else {
data[item.name] = item.value;
}
}
}
return data; };
var dataContainer = document.getElementsByClassName('results__display')[0];
form = document.getElementById('formular').querySelectorAll('input,select,textarea');
butt = document.getElementById('knopfabsenden');
butt.addEventListener('click', function (event) {
event.preventDefault();
handleFormSubmit(form = form);
});
var handleFormSubmit = function handleFormSubmit(event) {
var data = formToJSON(form);
dataContainer.textContent = JSON.stringify(data, null, " ");
}
}, false);
<div id="formular">
<label class="formular__label" for="machineName">Textfield Test</label>
<input class="formular__input formular__input--text" id="machineNumber" name="machineNumber" type="text"/>
<br>
<input class="formular__input formular__input--checkbox" id="checkTest" name="checkTest" type="checkbox" value="true"/>
<label class="formular__label formular__label--checkbox" for="checkTest">Checkbox Test</label>
<br>
<button class="formular__button" id="knopfabsenden" type="submit">Submit</button>
</div>
<div class="results">
<h2 class="results__heading">Form Data</h2>
<pre class="results__display-wrapper"><code class="results__display"></code></pre>
</div>
The problem is .checked will always be false if it doesn't exist. So the text field gets the value false.
for (var i = 0; i < form.length; i++) {
var item = form[i];
//looking for checkbox
if (item.value ==="") {
continue;
}
else {
if (item.type === "text") {
data[item.name] = item.value;
}
else if (item.type === "checkbox"){
data[item.name] = item.checked;
}
}
}
In this code snippet I check the type of the input and handle it accordingly. also notice I use the === operator and not the == operator as a best practice (Difference between == and === in JavaScript)
I use knockout framework. I have an observable array that can be filtered using ko.utils.arrayFilter
Now, I want to add a button to reset the array.
As the array gets reset when the input field is emptied using keystrokes, I wanted to simulate it with emptying the input field and then pressing the enter key
self.resetFilter = function (){
$('#filter').val('');
var e = $Event("keypress");
e.which = 13;
$("#filter").trigger(e);
};
Not sure, if the code is wrong. Or if this is a problem with Knockout, as I am not using Knockout to reset.
Below the entire code for the filtering function and the data binding in the HTML
Javascript
self.stringStartsWith = function(string, startsWith) {
string = string || "";
if (startsWith.length > string.length)
return false;
return string.substring(0, startsWith.length) === startsWith;
};
self.filter = ko.observable('');
self.filteredItems = ko.computed(function() {
var filter = self.filter().toLowerCase();
self.resetFilter = function() {
$('#filter').val('');
var e = $Event("keypress");
e.which = 13;
$("#filter").trigger(e);
};
if (!filter) {
return self.venueList();
} else {
return ko.utils.arrayFilter(self.venueList(), function(venue) {
console.log(venue);
return self.stringStartsWith(venue.name.toLowerCase(), filter);
console.log(venue);
});
}
}, self.venueList);
};
HTML
<li>
<input placeholder="Search" id="filter" type="text" data-bind="value: filter, valueUpdate: 'afterkeydown'" autocomplete="off">
<button data-bind="click: function(){resetFilter();}">Reset</button>
</li>
The beauty of knockout is that you can use data-bindings to accomplish what you want to do. While it plays nicely with other libraries like jQuery, you can probably find a more elegant knockout-only solution. You mentioned that you're not using knockout to reset. Is there a reason for that?
Further, you can use the textInput binding instead of using valueUpdate: 'afterkeydown' I'm not sure what your desired result is in terms of the flow of your search, but based on what you've provided in your question I put this example together. Pressing enter resets your filter - I'm not sure if that is your intended behavior as it seems a little strange from a UX perspective, but there it is nonetheless
var ViewModel = function() {
var self = this;
self.filter = ko.observable();
self.list = ko.observableArray([
"fruit",
"bread",
"dad",
"zoo",
"keyboard",
"monkey",
"tiger",
"apple",
"bicycle",
"father",
"mother",
"test",
"computer",
"programming",
"ninja",
"love",
"earth",
"nothing",
"money"
]);
self.filteredList = ko.computed(function() {
return ko.utils.arrayFilter(self.list(), function(item) {
return item.toLowerCase().indexOf(self.filter()) > -1;
});
});
self.clearFilter = function() {
self.filter('');
}
self.onEnter = function(d, e) {
if (e.keyCode === 13) {
//alert("You want to search for: " + self.filter());
self.clearFilter();
}
return true;
}
}
ko.applyBindings(new ViewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" placeholder="Search" data-bind="textInput: filter, event: { keypress: onEnter }" />
<input type="button" data-bind="click: clearFilter" value="Reset" />
<ul data-bind="foreach: filteredList">
<li data-bind="text: $data"></li>
</ul>
Using just jQuery (not validation plugin) I have devised a way to do a "if one, then all" requirement, but it's not at all elegant.
I'm wondering if someone can come up with a more elegant solution? This one uses some loop nesting and I'm really not pleased with it.
if ($("[data-group]")) {
//Store a simple array of objects, each representing one group.
var groups = [];
$("[data-group]").each(function () {
//This function removes an '*' that is placed before the field to validate
removeCurError($(this));
var groupName = $(this).attr('data-group');
//If this group is already in the array, don't add it again
var exists = false;
groups.forEach(function (group) {
if (group.name === groupName)
exists = true;
});
if (!exists) {
var groupElements = $("[data-group='" + groupName + "']");
var group = {
name: groupName,
elements: groupElements,
trigger: false
}
group.elements.each(function () {
if (!group.trigger) {
group.trigger = $(this).val().length !== 0;
}
});
groups.push(group);
}
});
//Now apply the validation and alert the user
groups.forEach(function (group) {
if (group.trigger) {
group.elements.each(function () {
//Make sure it's not the one that's already been filled out
if ($(this).val().length === 0)
// This function adds an '*' to field and puts it into a
// a sting that can be alerted
appendError($(this));
});
}
});
You don't have to store the groups in an array, just call the validateGroups function whenever you want to validate the $elements. Here is a working example http://jsfiddle.net/BBcvk/2/.
HTML
<h2>Group 1</h2>
<div>
<input data-group="group-1" />
</div>
<div>
<input data-group="group-1" />
</div>
<h2>Group 2</h2>
<div>
<input data-group="group-2" value="not empty" />
</div>
<div>
<input data-group="group-2" />
</div>
<div>
<input data-group="group-2" />
</div>
<button>Validate</button>
Javascript
function validateGroups($elements) {
$elements.removeClass('validated');
$elements.each(function() {
// Return if the current element has already been validated.
var $element = $(this);
if ($element.hasClass('validated')) {
return;
}
// Get all elements in the same group.
var groupName = $element.attr('data-group');
var $groupElements = $('[data-group=' + groupName + ']');
var hasOne = false;
// Check to see if any of the elements in the group is not empty.
$groupElements.each(function() {
if ($(this).val().length > 0) {
hasOne = true;
return false;
}
});
// Add an error to each empty element if the group
// has a non-empty element, otherwise remove the error.
$groupElements.each(function() {
var $groupElement = $(this);
if (hasOne && $groupElement.val().length < 1) {
appendError($groupElement);
} else {
removeCurError($groupElement);
}
$groupElement.addClass('validated');
});
});
}
function appendError($element) {
if ($element.next('span.error').length > 0) {
return;
}
$element.after('<span class="error">*</span>');
}
function removeCurError($element) {
$element.next().remove();
}
$(document).ready(function() {
$('button').on('click', function() {
validateGroups($("[data-group]"));
});
});
You might get some milage out of this solution. Basically, simplify and test your solution on submit click before sending the form (which this doesn't do). In this case, I simply test value of the first checkbox for truth, and then alert or check the required boxes. These can be anything you like. Good luck.
http://jsfiddle.net/YD6nW/1/
<form>
<input type="button" onclick="return checkTest()" value="test"/>
</form>
and with jquery:
checkTest = function(){
var isChecked = $('input')[0].checked;
if(isChecked){
alert('form is ready: input 0 is: '+isChecked);
}else{
$('input')[1].checked = true;
$('input')[2].checked = true;
}
};
//create a bunch of checkboxes
$('<input/>', {
type: 'checkbox',
html: 'tick'
}).prependTo('form');
$('<input/>', {
type: 'checkbox',
html: 'tick'
}).prependTo('form');
$('<input/>', {
type: 'checkbox',
html: 'tick'
}).prependTo('form');