This Meteor code does not print to console the event.which so as to use tab key event when tabbing out of an editable div.
Why editable div? Because I can style part of the string which is not allowed in input element.
BTW: Where do I find a list of the events types for Meteor Blaze. There site only lists a very limited events. Other DOM events are available as well, but...
I tried some blur and onblur for no avail.
How can I fire a tab key event on an editable div? Thanks
//client/main.js template evnet
'onblur #vin'(e){
console.log(e.which) //prints nothing
let vin = e.target.value
}
<div class="body">
<div id="vin" class="editable" contenteditable="true">{{vehicle.vin_a}}<span id="vinb">{{vehicle.vin_b}}</span><span id="vin4">{{vehicle.vin4}}</span></div>
<input type="text" placeholder="make, modle, date">
</div>
It works for me!
Here is a minimal, reproducible example:
main.html:
<head>
<title>b</title>
</head>
<body>
{{> info}}
</body>
<template name="info">
<div id="vin" class="editable" contenteditable="true">
Edit me
</div>
</template>
main.js:
import { Template } from 'meteor/templating';
import './main.html';
Template.info.events({
'blur #vin'(event, instance) {
console.log('blur!', event);
}
});
Maybe you defined the event on the wrong template?
Related
I am using Vuejs - Vuikit components and have the following setup:
<template>
<div class="uk-scope">
<vk-modal :show="isShow" v-if="config">
<vk-modal-close #click="alert('hello!')" large></vk-modal-close>
<vk-notification :messages.sync="messages"></vk-notification>
<app-breadcrumb :current-view="currentView" />
<!-- render the currently active component/page here -->
<component v-bind:is="currentView"/>
</vk-modal>
</div>
</template>
My issue is that, the close modal does not see to fire the #click function.
The parent component, does emit an event, but I would prefer to fire something directly from the close button.
I have tried to use #click.native="someFunction()", but this has not helped!
Hey I've not used vuikit before but from their documents they show this is how to close a modal. I would also remove that v-if="config" as that might be confusing Vue
<template>
<div class="uk-scope">
<vk-modal :show.sync="isShow">
<vk-modal-close #click="isShow = false" large></vk-modal-close>
<vk-notification :messages.sync="messages"></vk-notification>
<app-breadcrumb :current-view="currentView" />
<!-- render the currently active component/page here -->
<component v-bind:is="currentView"/>
</vk-modal>
</div>
</template>
Have you tried using #click.native="someFunction" note that this does not have ().
I am creating chatbox, and that chat box is dynamically generated on click of contact.
In dynamically generated HTML I have a textarea to enter some text, here is the HTML
<div class="chatboxinput">
<textarea id="chatboxtextareaankur" class="chatboxtextarea" keydown.delegate="checkChatBoxInputKey($event, 'id', 'name')"></textarea>
</div>
But the method "checkChatBoxInputKey" is not executing on any key down event.
Please let me know how to solve this.
It doesn't work because Aurelia's view compiler doesn't have an opportunity to compile dynamically generated markup to find the bindings, etc.
Use the if binding to add/remove an element from the DOM. Here's an example:
http://plnkr.co/edit/kBUz94?p=preview
<template>
<button click.delegate="showChatBox = true">Show Chat Box</button>
<div if.bind="showChatBox" class="chatboxinput">
<textarea id="chatboxtextareaankur" class="chatboxtextarea" keydown.delegate="checkChatBoxInputKey($event)"></textarea>
</div>
</template>
export class App {
checkChatBoxInputKey(e) {
console.log(e.which);
return true;
}
}
I use IronRouter to structure my app into controllers (routers), on which I started attaching my events. So far so good.
I then started using the {{#contentFor ...}} feature and since then, my events don't fire anymore, because the region I render the relevant element, is part of a different DOM tree.
Is there any approach to still listen to these events? I considered simply adding a global listener, but that would remove a lot of flexibility from the events.
CoffeeScript:
MyRouter = RouteController.extend(...)
MyRouter.events(
'click .inside': (event) ->
alert("inside") # works
'click .outside': (event) ->
alert("outside") # does not work
)
HTML:
<button type="button" class="inside">
inside
</button>
{{#contentFor 'anotherDomRegion'}}
<button type="button" class="outside">
outside
</button>
{{/contentFor}}
And layout file:
<h1>event demo</h1>
<div>
{{> yield}}
</div>
<div>
{{> yield 'anotherDomRegion'}}
</div>
I've run into the same problem myself. The only way I've been able to work around it is to set the contentFor to a template so you can assign your events to that template.
{{> contentFor region="anotherDomRegion" template="anotherDomRegion"}}
then;
<template name="anotherDomRegion"> ... </template>
and;
Template.anotherDomRegion.events({ ... });
Good luck!
I've managed to setup a simple registration form with Polymer:
<polymer-element name="app-registration">
<template>
<style>
...
</style>
<section>
<paper-input class="username" .... ></paper-input>
<paper-input class="password" .... ></paper-input>
<paper-button label="Submit" on-tap="{{handleSubmit}}"></paper-button>
</section>
</template>
<script>
Polymer({
handleSubmit: function (event, detail, sender) {
alert(this.querySelector('.username').value);
}
});
</script>
</polymer-element>
It works fine, however, within the handleSubmit callback I'm not able to query the values from the other input fields. Whatever I query paper-input or by classname I receive null. Any suggestion how to do this ?
Those elements are in your shadow dom, so you need this.shadowRoot. this.querySelector() will give you light dom nodes.
this.shadowRoot.querySelector('.username').value
Better yet, would be to add an id:
<section id="container">
<paper-input class="username" .... ></paper-input>
...
</section>
and use node finding: this.$.container.querySelector('.username').value.
Not sure if it was already available in 0.5, but in 1.0 you can do
this.$$(selector)
your example:
this.$$('.username').value
-> same but shorter, and works on dynamically created nodes
https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#work-with-local-dom
I'm trying to get something very basic to work in Meteor, where when the user clicks a button a Session.set() is called and then a div is shown. The problem is that if I don't call the Session.set() the behaviour is as expected where the div is shown upon clicking the button. But once I include the Session.set() i need to click twice before the message is actually show. To make sure the behaviour can be reproduced make sure the page is a clean load and not a Meteor refresh!
The code for the HTML is:
<head>
<title>test</title>
</head>
<body>
{{> home}}
</body>
<template name="home">
<div>
<input type="button" id="addButton" value="add">
</div>
{{> popup}}
</template>
<template name="popup">
{{#with messageHelper}}
<div id="messageDiv" style="display: none">
message is {{message}}
</div>
{{/with}}
</template>
And here is the Javascript that makes it tick.
Template.home.events({
'click #addButton': function(){
// **** if this line is commented out, it will work
Session.set("messageHelper", {message: 'HERE'});
// ****
$('#messageDiv').show();
}
});
Template.popup.helpers({
messageHelper: function(){
return Session.get("messageHelper");
}
});
I think the changed session variable rerenders your template in its original state which sets style="display: none". The problem is discussed here. The solution there is to reorganise your template so the reactivity is not in the template where display is being toggled.
An easier solution might be just to use handlebars #if helper to display your template whenever there is a message:
<template name="popup">
{{#with messageHelper}}
{{#if message}}
<div id="messageDiv">
message is {{message}}
</div>
{{/if}}
{{/with}}
</template>
No need for .show() in the event handler then.