Apologies in advanced, but I'm a plete noob at Polymer.
So far I've done an HTML file (treated as external dialog box), with some stuff in it.
First off, the user clicks a button from the main page, which then displays a dialog box. From the dialog box, the user will type in text (at this point, anything), and then click on the submit button. At which point, either it succeeds, or if the textbox is empty, an error is thrown, the textbox is selected, and (if possible) turns red / displays an error message.
Unfortunately, even getting the polymer event down escapes me.
Here's my code so far:
The main page (works fine):
<!DOCTYPE HTML>
<html>
<head>
<link rel="import" href="elements/accountability-ticket.html"/>
</head>
<body>
<section>
<paper-button raised label="Buy Now" id="ticket" onclick="clickHandler('diagTicket')">Buy Now</paper-button>
</section>
<section><accountability-ticket></accountability-ticket></section>
<script>
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
console.log('Components are ready');
});
function clickHandler(e) {
var dialog = document.getElementById(e);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html>
There's a button there, "Buy Now", which calls the below code as a pop-up dialog form:
<dom-module id="accountability-ticket">
<template>
<paper-dialog with-backdrop entry-animation="scale-up-animation"
exit-animation="fade-out-animation" id="diagTicket">
<h2>I Own It Ticket </h2>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Submit</paper-button>
</div>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "accountability-ticket"
});
</script>
According to my searches online, to get the button to check if the textbox is empty on click, I'll need an eventHandler first and foremost. I understand I'm supposed to put something like this:
on-click="confirmClick"
in the <paper-button dialog-confirm>Submit</paper-button>.
And presumably in the <script> part, this:
Polymer('my-element', {
confirmClick: function() {
alert('Click event triggered');
});
But given that I already have this:
Polymer({
is: "accountability-ticket"
});
above, and so far my attempts at putting confimClick in it results in the entire dialog box not appearing when the user clicks the "Buy Now", I'm not sure what to do.
For now, how do I setup the click event? Thanks.
Apologies in advanced, but I'm a plete noob at Polymer.
So far I've done an HTML file (treated as external dialog box), with some stuff in it.
First off, the user clicks a button from the main page, which then displays a dialog box. From the dialog box, the user will type in text (at this point, anything), and then click on the submit button. At which point, either it succeeds, or if the textbox is empty, an error is thrown, the textbox is selected, and (if possible) turns red / displays an error message.
Unfortunately, even getting the polymer event down escapes me.
Here's my code so far:
The main page (works fine):
<!DOCTYPE HTML>
<html>
<head>
<link rel="import" href="elements/accountability-ticket.html"/>
</head>
<body>
<section>
<paper-button raised label="Buy Now" id="ticket" onclick="clickHandler('diagTicket')">Buy Now</paper-button>
</section>
<section><accountability-ticket></accountability-ticket></section>
<script>
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
console.log('Components are ready');
});
function clickHandler(e) {
var dialog = document.getElementById(e);
if (dialog) {
dialog.open();
}
}
</script>
</body>
</html>
There's a button there, "Buy Now", which calls the below code as a pop-up dialog form:
<dom-module id="accountability-ticket">
<template>
<paper-dialog with-backdrop entry-animation="scale-up-animation"
exit-animation="fade-out-animation" id="diagTicket">
<h2>I Own It Ticket </h2>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Submit</paper-button>
</div>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "accountability-ticket"
});
</script>
According to my searches online, to get the button to check if the textbox is empty on click, I'll need an eventHandler first and foremost. I understand I'm supposed to put something like this:
on-click="confirmClick"
in the <paper-button dialog-confirm>Submit</paper-button>.
And presumably in the <script> part, this:
Polymer('my-element', {
confirmClick: function() {
alert('Click event triggered');
});
But given that I already have this:
Polymer({
is: "accountability-ticket"
});
above, and so far my attempts at putting confimClick in it results in the entire dialog box not appearing when the user clicks the "Buy Now", I'm not sure what to do.
For now, how do I setup the click event? Thanks.
Share Improve this question edited Jan 20, 2016 at 14:51 Michał Perłakowski 92.7k30 gold badges163 silver badges187 bronze badges asked Aug 26, 2015 at 10:11 zack_falconzack_falcon 4,38623 gold badges68 silver badges111 bronze badges2 Answers
Reset to default 5To register event handlers, remove the double braces.
<paper-button on-click="confirmClick">Confirm</paper-button>
Update
Thanks for the update. I now realise that you are trying to set up the click handler on your main page outside of a Polymer element. The syntax above only works inside <dom-module>. You can however use the "traditional" approach for setting up event handlers.
window.addEventListener('WebComponentsReady', function(e) {
// imports are loaded and elements have been registered
document.querySelector("#ticket").addEventListener("click", clickHandler);
});
function clickHandler(e) {
// your code here
}
Update
If on the other hand you are inside a Polymer element, you can add the event handler to the prototype. The id in the dom-module where the handler is registered must match the is property in the prototype (in this case accountability-ticket). So assuming that your module looks like this:
<dom-module id="accountability-ticket">
<template>
<paper-button on-click="confirmClick">Confirm</paper-button>
</template>
</dom-module>
You add the handler to the prototype in the following way:
<script>
Polymer({
is: "accountability-ticket",
confirmClick: function(event){
console.log(event);
}
});
</script>>
Outside of a ponent, you can do this declaratively using standard Javascript.
- Use onclick instead of on-click. That will register a standard dom listener.
- Use standard inline javascript to call your method.
<paper-button onclick="confirmClick()">Confirm</paper-button>
<script>
function confirmClick(e) {}
</script>You can also inline your code instead of calling a global method if that suits your needs.
<paper-button onclick="document.getElementById('drawer').open()">Open Drawer</paper-button>