event-handling,polymer,web-component , Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key


Tag: event-handling,polymer,web-component

I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this.

          <dom-module id="example-stuff" >
            :host {
              display: inline;
              margin-left: 15%;
              --paper-input-container-focus-color: #FFFFFF;
             color:#FFFFFF !important;
           <div style="width:100%;">
             <div style="width:50%;display:inline-block;position:absolute;">
              <paper-input-container style="display:inline-block;">
              <label>Actionable Text Here</label>
              <input is="iron-input" bind-value="{{actiontxt}}">
          <div style="width:20%;display:inline-block;margin-left: 200px;">
            <paper-icon-button icon="cloud-download" on-tap="handleClick"></paper-icon-button>

      (function () {
          is: 'automated-project-number',
          properties: {
            actiontxt: {
              type: String
          handleClick: function(e){
            console.log('do stuff');



Use iron-a11y-keys to listen for an enter keypress

<dom-module is="keypress-test">
<iron-a11y-keys target="[[_target]]" keys="enter" on-keys-pressed="_test"></iron-a11y-keys>
<paper-input-container id="input">
     <label>Enter Will Trigger</label>
     <input is="iron-input"></input>
<paper-input label="Enter Won't Trigger"></paper-input>

      is: "keypress-test",
      ready: function(){
           this.set('_target', this.$.input)
      _test: function(){
           console.log("Enter pressed")


Java: Action Handler

I am working on a problem for school and I am having an issue with the CalculateButtonHandler. I am also using an ExitButtonHandler but that is not giving me any issues. I have tried re-reading my textbook and have searched the web. After racking my brain over this issue I...

Polymer 1.0 app-theme only affecting index.html and not on custom elements

I'm using the Polymer Starter Kit, and I wanted to move the scaffold into it's own element <main-scaffold>. There are styles in app-theme.html that applied to it before I moved it into from index.html into it's own element, but now none of the styles apply. This is the case for...

polymer 1.0 data binding not working as expected

I'm trying to bind some data in a custom element but to no avail. I have a system-menu.html that has my custom element: system-menu.html <link rel="import" href="../../bower_components/polymer/polymer.html"> <link rel="import" href="../../bower_components/iron-menu-behavior/iron-menubar-behavior.html"> <dom-module id="system-menu"> <template> <template is="dom-repeat" items="{{data}}"> <li>{{item.name}}</li> </template> </template> </dom-module> <script> (function() {...

Windows Phone: how to handle an event from a web page in a WebView?

Which callback/delegate is the one to intercept the event of a user clicking on a link within a WebView? I'd want that URL. I just need to know if it is possible and how should I do in some way.

jQuery event.preventDefault() don't work unless debugging

I am trying to use this approach in order to convert GET parameters to POST. I also want the anchor to be properly handled even if the middle mouse button is clicked. This is how I did the the event handlers binding: $(document).ready(function () { $(".post").each(function(){ $(this).mousedown(function(evt){ switch(evt.which){ case 1:...

Change style programmatically

I'm attempting to follow the Custom property API for Polymer elements docs with regards to updating an element's CSS properties (and styles) programmatically but can't seem to get it working. Here is my current attempt: <link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html"> <dom-module id="my-namecard"> <style> :host { --color: green; } span { color: var(--color,...

How to handle event from multiple buttons of same name

I am working on a small practice program where I have 3 white boxes in a row. My goal is (using Javascript) for any of the boxes to change from white to red when the mouse is over the box, and then to turn yellow when the mouse comes off...

google-signin don't return user info

I am using google-signin element from Google Web Components, but I don't know how to return user info. <google-signin client-id="{{my-id}}" scopes="email profile" signed-in="{{signedIn}}"></google-signin> I tried to write some JS function but it didn't work. function (signedIn) { var profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile(); console.log('Name: ' + profile.getName()); console.log('Image: ' + profile.getImageUrl()); }...

addActionLister parameter

I am getting expected output when i am using "this" reference in addActionListener() call, how can I achieve it using the object call directly ? When i am using jb.addActionListener(new EventHandling1()); I am getting error -"Exception in thread "AWT-EventQueue-0" java.lang.NullPointerException". Also which object needs to be passed to this method...

Rails fullcalendar

So this is the thing when i add event click in my fullCalendar script in events.js.cofee it crashes with turbolink SyntaxError: [stdin]:7:24: reserved word 'function' <%=javascript_include_tag 'application', 'data-turbolinks-track' => true %> Now this is my orginal events.js.coffee without adding eventClick Note: with this it doesnt crash and works perfectly but...

Inheritance of customized polymer element in version 1.0

I have two polymer elements which have similar characteristics. I'm trying to "merge" those two to one element. What I see in the documentation is that custom elements can not be inherited in polymer 1.0. It starts here: <div title="{{tile.description}}" class="flex-item"> <template is='dom-if' if='{{typeIsSingle}}'> <single-item-tile tile='{{tile}}'></single-item-tile> </template> <template is='dom-if' if='{{typeIsGrouped}}'>...

How to make TDBCheckBox update its DataField immediately after click?

I have a form with several controls where the first one is a TDBCheckBox that is bound to DataField := 'enabled'. When the checkbox is clicked I want all the remaining controls to be enabled / disabled. procedure TMyAdapter.DataSourceDataChange(Sender: TObject; Field: TField); var Enabled: Boolean; begin Enabled := FModel.DataSet['enabled'].AsBoolean; FView.Label1.Enabled...

I cannot get the id of the span using jquery

Hi how can I get the id of my span using jquery. I tried some attempt but it's not working nothing is being log in console. $(function () { for (var id = 0; i < data.length; i++) { var dynamicli = '<li class="">' + '<img src="path/to/image" class="_xy">' + data[i].name...

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox

I use Dart Polymer PaperDialogs containing CoreAnimatedPages. The idea is to have popups in which you can click through multiple option views. Example repository available at: https://bitbucket.org/neogucky/polymer-dialog-problem/ DialogView: view.html <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="packages/paper_elements/paper_button.html"> <link rel="import" href="packages/paper_elements/paper_dialog.html"> <link rel="import"...

Change google-map center using Polymer

I'm working on a custom element using Polymer. I want to change its center after it was rendered. I can't found it on Polymer docs. Anyone could help me? <dom-module id="my-map"> <template> <google-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="15"> </google-map> </template> <script> Polymer({ is: "my-map" // I want to change map center here...

How to wait for a return value from an event handler without blocking main UI thread

So I have this method this uses a library to generate an external webpage to allow the user to enter their Facebook credentials for verification. Upon entering it we are creating a profile based on the that user's account and saving it to a database. Once we save it to...

Computed binding doesn't work with on-click (Polymer)

<template is="dom-repeat" items="{{myItems}}"> <div on-click="{{ComputedBindingFunction(item)}}">Foo</div> </template> This yields an error saying: listener method {{ComputedBindingFunction(item)}} not defined Shouldn't the function be executed, instead of literally trying to attach the function name with {{}}'s to on-click according to the docs? Note that ComputedBindingFunction returns a function....

If checkbox checked, instantly alert

So, my goal is this: if the checkbox is checked by the user, do something (let's say just an alert). Here's my code, that is not working: function validate() { if (document.getElementById('LetterNeed').checked) { alert("checked"); } else { alert("You didn't check it! Let me check it for you."); } } <input...

Icon list for Polymer

The polymer starter kit makes references to <iron-icon> to implement icons. For example: <iron-icon icon="home"></iron-icon> I've checked the iron-icons section on the Polymer Catalog website, but the demo which should show all the icons is which is missing. Is there any other reference of all the icons in the <iron-icon>...

Giving NumericUpDown Events in Flow Layout Panel (C#)

I'm using the following code to generate NumericUpDown's inside of a FlowLayoutPanel but I can't figure out how to add a Value Changed event handler. string numericUpDownText = "captchaNumericUpDown"; NumericUpDown newNumericUpDown = new NumericUpDown(); newNumericUpDown.Name = textboxID.ToString() + numericUpDownText; newNumericUpDown.Width = 50; itemFlowPanel.Controls.Add(newNumericUpDown); I want all of them to do...

Binding imperatively

Is there a way to set up bindings imperatively. An example use case: var el2 = new MyElement(); el2.myProp = this.$.anotherElement.anotherProp That won't setup a binding, it just assigns the value or object. I'd like to find a way to do something like: el2.myProp.bindTo(this.$.anotherElement.anotherProp) Possible?...

Polymer Data-Binding will not replace

I have a polymer element that refuses to bind, and I can't figure out why. The rendered output is just sending the raw {{varName}} rather than replacing it with the appropriate value. However, formulas (with the [[fn(arg)]] syntax) and binding to tags (with the $="{{varName}} syntax) works fine. Any idea...

Set focus for paper-input via radio button

In Polymer (1.0), how can I set the focus of the iron-input when (as example) radiobutton 'radio1' is selected. <div> <div>Title:</div> <paper-radio-group> <paper-radio-button name="radio1">Radio1Label</paper-radio-button> <paper-radio-button name="radio2">Radio2Label</paper-radio-button> </paper-radio-group> <paper-input-container> <input is="iron-input"> </paper-input-container> </div> ...

Show what the user typed in the body

I have a code and I want that after the user type something in the textfield and press enter, what he typed appears on the screen. But I'm not being able to do that, I'd like some help here guys. Thanks. <!DOCTYPE html> <html> <head> <title>Tasks for the day</title> <script...

Using dom-if for conditionals in arrays

In 0.5 I could use the expressions in the dom-if to select for certain things in arrays while looping through them. How could I achieve the same effect in 1.0?

core-animated-pages in Polymer 1.0

I noticed that there is no substitute for core-animated-pages in Polymer 1.0 (there is no iron-animated-pages). Am I missing something? Is there any other way to implement similar functionality? Any answer greatly appreciated.

Polymer dom-repeat and displaying result of iron-ajax call

I have a feed of GP Practice addresses the start of which is as follows (not the whole feed which is over 16000 entries - still got to figure out paging) [{"Address1":"73 UPPER WICKHAM LANE","Address2":"WELLING","Address3":"KENT","Address4":"","Address5":"","CloseDate":"\/Date(-62135596800000+0000)\/","ContactName":"","ContactTelephone":"020 88541910","EmailAddress":"","LastUpdatedDate":"\/Date(1434749040000+0100)\/","Name":"(GPSI) DR AC...

Push a Value of the Selected List in an Array and Calculate

here's my code at the moment. I wanted to push only or all the object that is selected in an array. $('.checkbox-wrapper').delegate('input:checkbox', 'change', function () { //Use this is if you want to uncheck other checkbox if another checkbox is checked //$('input').not(this).prop('checked', false); var $lis = $('.list > li').hide(); $('input:checked').each(function...

Polymer 1.0 data binding not working

I have the following polymer element: The value of navigator.currentStep is not updating after someMethod is called. <dom-module id="m"> <template> Navigator step = <span>{{navigator.currentStep}}</span> </template> </dom-module> Polymer({ is: 'm', ready: function() { this.navigator = new Navigator(1); console.log(this.navigator.currentStep); // 1 }, someMethod: function() { this.navigator.next(); console.log(this.navigator.currentStep); // 2 } }); Output...

Polymer 1.0: Two-way bindings with input elements

Code Consider the following Polymer custom element: <dom-module id="test-element"> <template> <input type="text" value="{{value}}"> <button>Reset</button> </template> <script> Polymer({ is: 'test-element', properties: { 'value': { type: String, reflectToAttribute: true, notify: true, value: null } } }); </script> </dom-module> I use this custom element in my index.html as follows: <html> <head> <script type="text/javascript"...

dom-if doesn't get updated in dom-repeat

<template is="dom-repeat" items="{{fruit_list}}" as="fruit"> <template is="dom-if" if="{{fruit.isOrange}}"> I'm an orange! </template> </template> Here I have a dom-if template inside a dom-repeat template. It works great if the value of fruit.isOrange has already been finalized. However if not, for example, it was true when before but now I change it to...

Having trouble applying a mixin in Polymer

I'm having problems getting a mixin to work in polymer. I've created --test-theme but it's not applying the style inside the element. Any ideas where I'm going wrong? story-card.html <dom-module id="story-card"> <style> :host { display: block; box-sizing: border-box; } #story-card { min-height: 5em; max-width: 45%; margin-left: auto; margin-right: auto; padding:...

How do I use dom-repeat in Polymer binding to a dictionary

I am trying to bind to data below which is a dictionary <template is="dom-repeat" items="{{data}}"> </template> I have found a similar question here Polymer: How to loop and render HTML to screen <template repeat="{{customer, i in customers}}"> <div>{{i}}, {{customer.name}}</div> </template> but I am not sure if this applies to Polymer...

Polymer 1.0 in Ember-cli, wrong appearance

I have managed to integrate Polymer 1.0 to my Ember-cli project. This my Brocfile var vulcanize = require('broccoli-vulcanize'); var pickFiles = require('broccoli-static-compiler'); var mergeTrees = require('broccoli-merge-trees'); var EmberApp = require('ember-cli/lib/broccoli/ember-app'); var app = new EmberApp({ compassOptions: { sassDir: "app/styles/main", outputStyle: 'expanded' } }); //app.import("./bower_components/webcomponentsjs/webcomponents-lite.min.js"); var polymerVulcanize = vulcanize('app', { input:...

Using Polymer iron-ajax in repeating template

How do I load a json file and use the data in a repeating template? This code doesn't produce anything: <dom-module id="name-list"> <template> <iron-ajax auto url="names.json" handleAs="json" lastResponse="{{data}}"></iron-ajax> <template is="dom-repeat" items="{{data}}"> <div>First name: <span>{{item.firstName}}</span></div> <div>Last name: <span>{{item.lastName}}</span></div> </template> </template> </dom-module> <script> Polymer({...

Make input value depend on `select option` selection

Basically if male is selected, make the input named pronoun have a value of his. Else, make the input named pronoun have a value of her. <select name="sex"> <option value="male">Male</option> <option value="female">Female</option> </select> <input type="text" name="pronoun" value="" placeholder="pronoun" /> ...

Polymer 1.0 how to call a paper-icon-button's tap when a coupled paper-input-container receives the enter key

I have a paper-input-container next to a paper-icon-button and want to trigger the same function that is wired to the paper-icon-button's on-tap handler when a user hit's enter while the input has focus... anyone know how to do this. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...

jQuery mobile radio button changed event always fires even if already checked

I'm using a radio button group containing two radio buttons to dynamically change the content of my page depending on which radio button is checked. The content should be updated, when the selected radio button changes. Therefor i added an event handler to the radio buttons. html: <fieldset data-role="controlgroup" data-type="horizontal"...

Dart - Polymer Unit Testing. Not able to reference dom elements after click event

Not able to reference dom elements. Most of the test case works except for the last expectation in ClickSignInButton when I want to make sure I can evaluate error message div when form is submitted without any data. expect(document.querySelector('qme-header').shadowRoot .querySelector('#headerErrorDiv'), isNotNull); always fails and headerErrorDiv is null even though its...

Stop fadin/fadeout event jquery

I have a dive that flashs once on click. If you press the button multiple times it will keep flashing until the click count has been executed. I would like to so then if the user was to click the button multiple times, it would stop flashing after the last...

Why does the polymer property binding need a tag in my template?

I am trying to understand how Polymer renders properties in the template of a custom element. I'm seeing some behavior that I can't explain, where some properties are being rendered in one case (when surrounded by tags), but not in another (when tags are not present in the template). To...

How can I access item in parent repeat template while in filter

<iron-pages> <template is="dom-repeat" items="{{fruit_categories}}" as="category"> <div> <template is="dom-repeat" items="{{all_fruits}}" as="fruit" filter="isThisFruitInTheRightCategory"> <!-- Some more stuff --> <span>{{fruit.weight}}</span> <span>{{fruit.age}}</span> <!-- ... --> </template> </div> </template> </iron-pages> isThisFruitInTheRightCategory: function(fruit){ return fruit.category === /* Q: How do I get the current category? */ } Suppose I...

Click event not firing in polymer paper-icon-button

I have the following page defined <!DOCTYPE html> <html> <head> <title>Practice List</title> <link rel="import" href="elements/elements.html" /> <link rel="stylesheet" type="text/css" href="Styles/styles.css" /> <!-- google fonts definitions --> <link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> </head> <body unresolved...

Dropshadow from paper-toolbar overlays paper-dialog

I have basic drawer app with a dialog box. When the dialog box opens the dropshadow from the toolbar(I assume) is bleeding over the box. Is there a fix for this? <paper-drawer-panel> <paper-header-panel drawer> </... <paper-header-panel main> <paper-toolbar> <paper-dialog>...</paper-dialog> </paper-toolbar> </paper-header-panel> </paper-drawer-panel> Some things I have tried includes moving the...

How do I prevent any button click events from queuing until the event handle is finished with the first call

I want to prevent a button click from queuing. In testing I have a Form, a Button and in the Code-Behind I have the event handler: private void button1_Click(object sender, EventArgs e) { if (_codeRunning) return; _codeRunning = true; //Application.DoEvents(); //button1.Enabled = false; _click ++; Debug.WriteLine("Click Number: " + _click);...

How to notify page transition with iron-pages

I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the...

How to style Polymer's toolbar background in 0.5?

I'm having issues trying to set the full background color of the toolbar in Polymer 0.5 when using core-scaffold. What I've tried so far on Stackoverflow only sets the left menu side, but not the right content side. How does one set the background color for the full toolbar? Below...

Should all Objects that register events be IDisposable

As per my understanding when an Object is no longer required it is best practice to unsubscribe all event handlers in any Objects that subscribes to events. This is done to avoid handling an event within an Object when the given Object may reside in a invalid state (no doubt...

Polymer 1.0 services issue

I'm working on a reddit client using polymer to check out web compoments technologies. I started with the 0.5 version and got back on this project recently. That when I found out that polymer had the 1.0 released so I started over (as it wasn't that advanced anyway). I have...