I have the following input control:
<input type="ng-model="someValue" ng-disabled="shouldBeDisabled"/>
and a model with following variables:
someValue - the value that should be displayed in INPUT when shouldBeDisabled==fals
shouldBeDisabled - if the INPUT should be disabled
disabledText - the text that should be displays in INPUT instead of someValue when shouldBeDisabled==true
How should I change the above HTML slipet to implement this with AngularJS?
Is it possible to implement this with build-in AngularJS directives with just these three model variables? Or do I need to introduce another variables (such as someValueForInputBox) and take care to synchonizing it with someValue (when not disabled) or disabledText (when disabled)?
You can do this by the following though you might want to put a watch on shouldBeDisabled;
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.shouldBeDisabled = true;
$scope.toggleIt = function() {
$scope.shouldBeDisabled= ! $scope.shouldBeDisabled;
$scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || "true value"; // modify as required or leave off the true part.
}
});
You could also store the value so when the disabled text comes up and then toggles back you can repopulate it. Here it is with a watch.
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.shouldBeDisabled = true;
$scope.disabledText = 'disabled stuff';
$scope.maintainTrueValue = '';
$scope.$watch('shouldBeDisabled', function() {
if ($scope.shouldBeDisabled)
$scope.maintainTrueValue = $scope.someValue;
$scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || $scope.maintainTrueValue;
});
$scope.toggleIt = function() {
$scope.shouldBeDisabled= ! $scope.shouldBeDisabled;
}
});
Demo with watch: http://plnkr.co/edit/8KAJc9JXvi2rffsjPXF5?p=preview
You could use ng-show/ng-hide to swap out the input like so:
<input ng-model="disabledText" ng-show="shouldBeDisabled" disabled/>
<input ng-model="someValue" ng-hide="shouldBeDisabled"/>
Here is a fiddle: http://jsfiddle.net/SVxCe/
Related
I wanted to give some form visual validation cues, so I tried using class binding to do just that. If I use the ternary inline, it doesn't really meet my requirements of what should happen, but when I tried using computed prop, it made all the other components disappear.
If i tried doing it like this: v-bind:class="[(!validation.hasError('form.fullName'))?'has-success':'has-danger noValid']"
It just triggers the animation and the classes once and they stays there. I want to trigger the noValid animation everytime the user clicks my submit button if there's errors in validation.
I'm using simple-vue-validator btw.
Here's the godforsaken component, I use vue now-ui-kit template from Creative Tim as a base and customize my way from there. This is their Form Group Input component, docs here
<fg-input
class="input-lg"
:label="validation.firstError('form.fullName')"
placeholder="Full Name..."
v-model="form.fullName"
addon-left-icon="now-ui-icons users_circle-08"
v-bind:class="{ visualValidation }"
></fg-input>
Button Component: bootstrap-vue, cause their customized button doesn't really serve my purpose
<b-button type="submit" block pill variant="info" #click="submit">Submit Form</b-button>
My computation: noValid is the shaking animation class, has-success and has-danger just changes their appearances.
computed: {
visualValidation: function() {
const successClass = "has-success";
const errorBoi = "has-danger";
const shakeBoi = "noValid";
if (validation.firstError("form.fullName")) {
return errorBoi + " " + shakeBoi;
} else if (!validation.hasError("form.fullName")) {
return successClass;
}
}
}
I thought the variables that i returned would be binded as classes to the form.fullName Model but it's not doing anything, better yet, it made all my other components not rendering.
What should i do here? i'm just starting to learn Vue.js so i don't really understand what's going on here.
Edit from here:
I rewrote the logic to my class binding, and just use method to remove the class on click the components.
here is the updated component:
<fg-input
class="input-lg"
:label="validation.firstError('form.email')"
placeholder="Email Here..."
v-model="form.email"
addon-left-icon="now-ui-icons ui-1_email-85"
v-bind:class=" {'has-success' : isSuccEmail, 'has-danger' : isFailEmail, 'noValid': validNoEmail} "
#click="removeShake()"
></fg-input>
data:
isSuccEmail: false,
isFailEmail: false,
validNoEmail: false
method:
removeShake: function() {
let vm = this;
vm.validNoName = false;
vm.validNoEmail = false;
console.log(vm.validNoEmail);
console.log(vm.validNoName);
},
However, there's currently a bug, where the validator don't validate separately. It gave the class has-success to email even though it was full-name that was successful.
valEmail: function() {
let vm = this;
vm.$validate("form.email").then(function(success) {
if (success) {
vm.isFailEmail = false;
vm.isSuccEmail = true;
} else if (!success) {
vm.isSuccEmail = false;
vm.isFailEmail = true;
vm.validNoEmail = true;
} else {
alert("Fatal Error");
}
});
},
valName: function() {
let vm = this;
vm.$validate("form.fullName").then(function(success) {
if (success) {
vm.isFailName = false;
vm.isSuccName = true;
} else if (!success) {
vm.isSuccName = false;
vm.isFailName = true;
vm.validNoName = true;
console.log(vm);
} else {
alert("Fatal Error");
}
});
}
The $validate is a function of simple-vue-validator, the docs.
Submit function is just calling those two functions above.
I think this because of the promise call, is there a way to call the $validate() without promise?
There are a few problems here.
Firstly, while templates don't require you to use this. you still need to use it within your JS code. You should be seeing an error in the console, or maybe even at compile time depending on how you have linting configured.
if (validation.firstError("form.fullName")) {
What is validation? I assume that should be this.validation. Likewise a couple of lines further down.
Your next problem is here:
v-bind:class="{ visualValidation }"
The braces here are creating an object literal, so it's equivalent to this:
v-bind:class="{ visualValidation: visualValidation }"
This will be conditionally adding the string 'visualValidation' as a class , which isn't what you want. Get rid of the braces:
v-bind:class="visualValidation"
The PlainClipboard shown in the doc is very useful when we want Quill to clear all formats when content is pasted (e.g., copied from webpages). But if we register this module as 'modules/clipboard', any formats in the initial editor container will be wiped out as well:
<div id="editor-container">
<ol><li>1</li><li>2</li><li>3</li></ol>
</div>
because the initial content is also processed by the convert() function when the editor is initialized. To workaround this, I used a flag to indicate whether it's editor initialization or normal user pasting:
var quill_initializing = true;
class PlainClipboard extends Clipboard {
convert(html = null) {
if (quill_initializing) {
quill_initializing = false;
return super.convert(html);
} else {
if (typeof html === 'string') {
this.container.innerHTML = html;
}
let text = this.container.innerText;
this.container.innerHTML = '';
return new Delta().insert(text);
}
}
}
This works for Quill 1.3.1 but after I updated to Quill 1.3.2, this approach stops working.
Is there a way to fix this?
I have this function in javascript
function save(){
//$("#complex").submit();
//Complex List
$(document).ready(function(){
var proofer_filter = document.getElementById('proofer').value;
var proofer_filter = proofer_filter.split(' ').join('_')
var status_filter = document.getElementById('status_filter').value;
var status_filter = status_filter.split(' ').join('_');
var cstart = document.getElementById('cstart').value;
var cstart = cstart.split(' ').join('_');
var cend = document.getElementById('cend').value;
var cend = cend.split(' ').join('_');
$("#complex_list").load("pages/complexlist.php?proofer="+proofer_filter+"&status_filter="+status_filter+"&start="+cstart+"&end="+cend+"&dept=<?php echo str_replace(" ","_",$department)?>");
}
);
//Complex Form
var account_type = document.getElementById('account_type').value;
var account_type = account_type.split(' ').join('_');
var log_id = document.getElementById('complexid').value;
$(document).ready(function(){
$("#show_form").load("pages/complexform.php?refno="+log_id+"&dept="+account_type+"&user=<?php echo str_replace(" ","_",$user)?>&save=y");
}
);
}
It is a page with two divs wherein each div loads a remote page. One of this divs is a form which has a submit button. When clicking it the form values does not post. Thus I could not use it as a php variable. Can anyone help?
split out your javascript into 2 sections
<script>
$(document).ready(function(){
$("#complex_list").load("pages/complexlist.php?proofer="+proofer_filter+"&status_filter="+status_filter+"&start="+cstart+"&end="+cend+"&dept=<?php echo str_replace(" ","_",$department)?>");
$("#show_form").load("pages/complexform.php?refno="+log_id+"&dept="+account_type+"&user=<?php echo str_replace(" ","_",$user)?>&save=y");
saveForm.init();
});
you will also need to create the function to save the form and an event listener for when someone clicks on your save button.
var saveForm= {
init: function () {
$('#submit-button').on('click', function () {
//only set all of your values if you are planning to submit an ajax form otherwise just submit the form with the last line of the event listener.
var proofer_filter = document.getElementById('proofer').value;
var proofer_filter = proofer_filter.split(' ').join('_')
var status_filter = document.getElementById('status_filter').value;
....
etc
//make sure to put your submit form in here too.
$( "#form" ).submit();
//if you are using ajax to submit the form, use the variables above to pass into the ajax call.
});
}
}
</script>
If you do not know where you are going wrong, use the Developer tools (F12) in Chrome when you are developing
For a quick view of my problem I have made a working jsFiddle here:
In KnockoutJS I have made a custom extender validator to test if the input format is in the HHMM format. If it is it returns the new value, if it doesn't it will set it back to the old value this is currently working.
ko.extenders.acValidTimeHHMM = function (target, options) {
var result = ko.computed({
read: target,
write: function (newValue) {
var re = /^([0-9]|0[0-9]|1[0-9]|2[0-3])[0-5][0-9]$/;
if (!re.test(newValue)) {
target.notifySubscribers(target());
//Time not in correct format return old time
return;
}
target(newValue);
}
}).extend({ notify: 'always' });
result(target());
return result;
};
The problem I am having is that I update my database when the value changes using a computed. However this is also firing when I reset the value back to its original using my validator. (Method based on Ryan Rahlf dirty flag technique here )
self.update = ko.computed(function () {
self.timeOne();
self.timeTwo();
alert("Fired");
});
The problem is obviously the line target.notifySubscribers(target()); in my validator. However without this line I can't reset the value to its old value and I can't find another way to do this.
So this only fires when a value actually changes rather then the validator resetting it. The jsFiddle demonstrates my problem exactly and can be used to make a working version (hopefully) I know its currently firing on page load too.
The problem I am having is that I update my database when the value changes using a computed.
I don't know all your logic, but I don't think this is a good idea to update the db each time your knockout view model has updated. May be you should look at knockout validation plugin. Using this plugin you can build the same custom validation rule and update the db only on form submit event.
About your problem...
The simplest solution I'm found is to send a success callback function to the validation extension like an option.
Something like this.
JS:
var ViewModel = function() {
var update = function () {
alert("value was successfully changed");
};
var cancel = function () {
alert("validation failed. previous value was returned");
};
var timeOne = ko.observable("1100").
extend({
acValidTimeHHMM: {
success: update,
fail: cancel
}
});
var timeTwo = ko.observable("1248").
extend({ acValidTimeHHMM: { success: update } });
return {
timeOne: timeOne,
timeTwo: timeTwo
};
};
ko.extenders.acValidTimeHHMM = function(target, option) {
var baseOptions = {
success: null,
fail: null
};
$.extend(baseOptions, option);
var result = ko.computed({
read: target,
write: function (newValue) {
var oldValue = target();
if(newValue == oldValue) return;
var re = /^([0-9]|0[0-9]|1[0-9]|2[0-3])[0-5][0-9]$/;
if (!re.test(newValue)) {
target.notifySubscribers(oldValue);
if(typeof(baseOptions.fail) == "function")
baseOptions.fail();
return;
}
target(newValue);
if(typeof(baseOptions.success) == "function")
baseOptions.success()
}
}).extend({ notify: 'always' });
result(target());
return result;
};
ko.applyBindings(new ViewModel());
HTML:
<p>Time One<input data-bind='value: timeOne' /></p>
<p>Time Two<input data-bind='value: timeTwo' /></p>
The only type of documentation I can find referencing to "drop zone" is
localization.dropFilesHere String(default: "drop files here to upload")
Sets the drop zone hint.
Now how can I set the dropzone to the whole page like Blueimp?
Why not just override the default dropzone size? You can increase the size using basic css.
var $dropzone = $("div.k-dropzone");
$dropzone.css("height", "mycustomHeight");
$dropzone.css("width", "mycustomWidth");
Good luck.
This should delegate the drop event from "largedroparea" to kendo upload
<div id="largedroparea"></div>
<input type="file" name="files" id="photos" />
<script>
$("#photos").kendoUpload({
async: {
saveUrl: "save",
removeUrl: "remove"
}
});
// Setup the dnd
$('#largedroparea').on('dragenter', handleDragEnter);
$('#largedroparea').on('dragover', handleDragOver);
$('#largedroparea').on('dragleave', handleDragLeave);
$('#largedroparea').on('drop', handleDrop);
function handleDragEnter(e) {
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
// Explicitly show this is a copy.
e.originalEvent.dataTransfer.dropEffect = 'copy';
}
function handleDragLeave(e) {
}
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var event = jQuery.Event("drop");
event.originalEvent = e.originalEvent;
$('#photos em').trigger(event);
}
</script>
With the current version of Kendo UI Uploader it's not possible to increase the dropzone size.
Possible alternatives :
Create a div surrounding your page , whenever the files are dropped in this div create a List like filesToUpload of the dropped files and then assign this list to the files option of kendo upload.
files: filesToUpload,
Steps to grab the dropped files:
Stop the default behaviour in the drop event of your dropzone div
$("#yourDropzoneDiv").on("dragover", function (event) {
event.preventDefault();
event.stopPropagation();
});
$("#yourDropzoneDiv").on("dragleave", function (event) {
event.preventDefault();
event.stopPropagation();
});
$("#yourDropzoneDiv").on("drop", function (e) {
e.preventDefault();
e.stopPropagation();
var filesToUpload = [];
for (var i = 0; i < e.originalEvent.dataTransfer.files.length; i++) {
var objDroppedFiles = {};
objDroppedFiles['name'] = e.originalEvent.dataTransfer.files[i].name
objDroppedFiles['size'] = e.originalEvent.dataTransfer.files[i].size
objDroppedFiles['extension'] = e.originalEvent.dataTransfer.files[i].type.split('/')[1]
filesToUpload.push(objDroppedFiles);
}
$("#droppedUploader").kendoUpload({
multiple: true,
async: {
saveUrl: "Upload.aspx",
autoUpload: true
},
files: filesToUpload,
upload: fileUploadDropped,
template: kendo.template($('#droppedFileTemplate').html())
});
}
This way you will be able to see the dropped files in your kendo uploader.
Have you tried using CSS to accomplish that? Simply:
div.k-dropzone {
height:150px;
}
This will make your dropzone bigger. Please do not that it pushes the file list downward.
Hope it helps.