Essentially, I want to trigger the input button in the page using TypeScript
//its no different than doing it in vanilla JS
let elem = document.getElementById('submitBtn');
let evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
});
elem.dispatchEvent(evt);
Use #ViewChild as follows in .ts
#ViewChild('fileInput') fileInput: ElementRef;
let inputElement: HTMLElement = this.fileInput.nativeElement as HTMLElement;
inputElement.click();
In your .html,
<input #fileInput type="file" ng2FileSelect (onFileSelected)="fileUpload($event)"/>
JS code:
document.getElementById('mat-checkbox-1-input').click();
Happy Coding!!!
Related
I'm trying to open select option using javascript in angular 6
const dropDown = document.getElementById(id);
let event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropDown.dispatchEvent(event);
Also tried like
#ViewChild('select') select: ElementRef;
func() {
this.select.nativeElement.open();
}
but it is not working. I have searched and found results for material and for ionic. But how can I open in angular 6?
I was able to achieve this on an angular app using
document.getElementById('shippingRates').click()
If you're doing some model updates in your app just before you expect the drop down to be opened, then consider delaying this call with something like
window.setTimeout(() => document.getElementById('shippingRates').click(), 100);
I dont think it is possible, but you can achieve this by setting the size of the select and having it float using position:absolute.
<div style="position:relative">.<select style="position:absolute;top:-8px;left:-20px" onClick="onAssign(this)">
<option>a</option>
<option>b</option>
<option>c</option>
</select></div>
function openMySelect(){
document.querySelector(‘#mySelect’).size=YOUR_OPTIONS.length;
}
function onAssign(data,select){
select.size=1
// your logic
}
#ViewChild('select') select: ElementRef;
func() {
this.select.nativeElement.focus();
}
Use focus() it will work.
I'm trying to make a form ADA compliant which requires tabbing over several dropzone fields that need to use the onKeyDown event handler in addition to being clickable.
I tried adding onkeydown to the dropzoneJsConfig like so:
this.dropzoneJsConfig = {
addRemoveLinks: true,
clickable: true,
onkeydown: true,
..., }
But that doesn't seem to work.
I added the tabIndex to a the div encompassing the Dropzone element:
return (
<div tabIndex={0} className={className}
ref={(div) => this.afterRender(div)}
data-help-text={help_text}
data-valid={this.state.valid}
data-processing={this.state.processing}
>
<Dropzone config={this.dropzoneConfig} eventHandlers={this.dropzoneEventHandlers} djsConfig={this.dropzoneJsConfig}>
</Dropzone>
</div>
);
Please help!
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.
I have really weird problem. I am trying to implement "root" view which also works as some namespace structure. Same principle introduced in codeschool.com course part II. In this root view, I want to catch event "click button", but that's the problem. When I click on button nothing happened.
window.App = new (Backbone.View.extend({
el: $("#app"),
Collections: {},
Models: {},
Views: {},
Routers: {},
events: {
'click button' : function(e) {
alert("Thank god!");
}
},
render: function(){
//for test purposes
console.log($("#app").find("button"));
console.log(this.$el.find('button'));
},
start: function(){
this.render();
new App.Routers.PostsRouter();
Backbone.history.start({pushState: true});
}
}))();
$(document).ready(function() { App.start() });
The HTML look like this
<body>
<div id="app">
<div id="posts"></div>
<button>Click me</button>
</div>
</body>
And what's really weird is output from console.log in render function. Both selectors are same, even the context is same, so where is problem?
console.log($("#app").find("button")); //this returns correct button
console.log(this.$el.find('button')); //this returns 0 occurences (WTF?)
EDIT:
After little change at el: "#app", still same problem. Problem was (thanks to #nemesv) in instantiating this class before DOM is loaded. But however, it's not possible to instantiating after DOM is loaded, because then it's not possible to use that namespace structure (eg. App.Model.Post = Backbone.Model.extend() ). But this "main view with namespace structure" is introduced in codeschool.com course as some sort of good practice. Solution can be found there http://jsfiddle.net/BckAe
You have specified your el as a jquery selector but because you are inside an object literal it evaluates immediately so before the DOM has been loaded.
So the el: $("#app"), won't select anything.
You can solve this by using one of the backbone features that you can initilaize the el as a string containing a selector.
So change your el declaration to:
el: "#app"
Your click event is not triggered because you instantiate your view before the DOM is loaded so backbone cannot do the event delegation your you.
So you need separate your view declaration and creation into two steps. And only instantiate your view when the DOM is loaded:
var AppView = Backbone.View.extend({
el: "#app",
//...
});
$(document).ready(function()
{
window.App = new AppView();
App.start()
});
Demo: JSFiddle.
Anybody figure out syntax to re-render a template on window resize, using Meteor.js? I tried doing a Meteor.flush(), but that doesn't seem to be the right approach.... :(
window.onresize = function(){
Meteor.flush();
};
Change some session value when resizing the window, and then just have the template listen for that change:
<template name="body">
{{touch}}
</template>
Template.body.touch = function() {
return Session.get("touch");
}
Meteor.startup(function() {
$(window).resize(function(evt) {
Session.set("touch", new Date());
});
});
Meteor docs provides a good example for this scenario, by the way of adding window dimensions as a Client-side global Reactive data source, which could be called on
Template->autorun()
https://guide.meteor.com/data-loading.html#stores