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

Question:

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.

        <html>
        <head>
        </head>
        <body>
          <dom-module id="example-stuff" >
          <style>
            :host {
              display: inline;
              margin-left: 15%;
              --paper-input-container-color:#727272;
              --paper-input-container-focus-color: #FFFFFF;
            }
            input{
             color:#FFFFFF !important;
           }
         </style>
         <template>
           <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}}">
            </paper-input-container>
          </div>
          <div style="width:20%;display:inline-block;margin-left: 200px;">
            <paper-icon-button icon="cloud-download" on-tap="handleClick"></paper-icon-button>
          </div>
        </div>


      </template>
    </dom-module>
    <script>
      (function () {
        Polymer({
          is: 'automated-project-number',
          properties: {
            actiontxt: {
              type: String
            }
          },
          handleClick: function(e){
            console.log('do stuff');
          }

        });
      })();
    </script>
  </body>
  </html>

Answer:

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

<dom-module is="keypress-test">
<template>
<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-container>
<paper-input label="Enter Won't Trigger"></paper-input>
</template>
</dom-module>

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

Related:


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


c#,multithreading,asynchronous,xamarin,event-handling
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...

Dart Polymer: Creating PaperDialog with CoreAnimatedPages displayed incorrectly in Firefox


firefox,dart,polymer
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"...

Polymer Data-Binding will not replace


javascript,polymer,web-component
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...

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


css,polymer
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...

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


javascript,jquery,events,javascript-events,event-handling
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:...

Using dom-if for conditionals in arrays


polymer,polymer-1.0
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?

Polymer 1.0 services issue


polymer,web-component
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...

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


javascript,html,templates,polymer,polymer-1.0
<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...

Show what the user typed in the body


javascript,jquery,events,event-handling
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...

Rails fullcalendar


javascript,jquery,ruby-on-rails,event-handling,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...

How to notify page transition with iron-pages


polymer,polymer-1.0
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...

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


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. <html> <head> </head> <body> <dom-module id="example-stuff" > <style> :host { display:...

Giving NumericUpDown Events in Flow Layout Panel (C#)


c#,event-handling,flowlayoutpanel
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...

How to style Polymer's toolbar background in 0.5?


polymer,toolbar
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...

Change style programmatically


polymer,polymer-1.0
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,...

Make input value depend on `select option` selection


javascript,php,jquery,event-handling
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" /> ...

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


javascript,html,polymer
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...

core-animated-pages in Polymer 1.0


polymer,web-component,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.

Set focus for paper-input via radio button


input,radio-button,focus,polymer,paper-elements
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> ...

Click event not firing in polymer paper-icon-button


javascript,polymer
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...

google-signin don't return user info


polymer,web-component,google-signin,google-web-component
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


java,swing,event-handling,awt
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...

Using Polymer iron-ajax in repeating template


polymer
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({...

If checkbox checked, instantly alert


javascript,html,event-handling
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...

Change google-map center using Polymer


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...

polymer 1.0 data binding not working as expected


javascript,php,arrays,json,polymer
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() {...

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


jquery,jquery-mobile,event-handling,radio-button,onchange
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"...

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


javascript,jquery,event-handling
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...

Binding imperatively


binding,polymer
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 1.0 in Ember-cli, wrong appearance


javascript,ember.js,polymer,frontend,ember-cli
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:...

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


javascript,json,polymer
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...

Java: Action Handler


java,button,event-handling
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...

Dropshadow from paper-toolbar overlays paper-dialog


css,polymer,polymer-1.0
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 can I access item in parent repeat template while in filter


javascript,html,templates,polymer
<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...

How to handle event from multiple buttons of same name


javascript,html,button,event-handling,elements
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...

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


javascript,html,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....

Inheritance of customized polymer element in version 1.0


polymer,polymer-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}}'>...

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


dart,polymer,dart-polymer
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...

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


events,webview,event-handling,windows-phone,handler
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.

Polymer 1.0: Two-way bindings with input elements


javascript,polymer,custom-element
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"...

Having trouble applying a mixin in Polymer


html,css,polymer,polymer-1.0
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:...

Should all Objects that register events be IDisposable


c#,events,event-handling,destructor,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...

How to make TDBCheckBox update its DataField immediately after click?


delphi,checkbox,event-handling,delphi-xe3,data-aware
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...

Stop fadin/fadeout event jquery


javascript,jquery,animation,event-handling
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...

Polymer 1.0 data binding not working


data,binding,polymer
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...

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


c#,winforms,event-handling
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 do I use dom-repeat in Polymer binding to a dictionary


polymer
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...

Icon list for Polymer


html,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>...

I cannot get the id of the span using jquery


javascript,jquery,html,event-handling
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...