CODEWITHSUNDEEP
javascripthtmlpolymerpolymer-1.0
Akh
Akh

Reputation: 6043

How to add a click listener to polymer custom element's child?

I am trying to add a click listener to one of the buttons inside a custom element in the "created" life cycle callback (even tried "ready" callback with same result).

I am thrown with the error "button element is undefined/null".

Note:

a. I cannot add a click listener for the whole custom component like this. 

   listeners: {
        'click': '_onClick'
    },

I just need to add a listener to the button. How to get this simple thing? Sorry I am sounding naive.

b. Cannot do inline script because of CSP restriction

<paper-button id='saveBtn' on-click="handleClick">
     Save
</paper-button>

Error Msg:

Uncaught TypeError: Cannot read property 'addEventListener' of null

Polymer.created @ elements-imports.csp.js:10596Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.createdCallback @ elements-imports.csp.js:97Polymer.Base._addFeature.instanceTemplate @ elements-imports.csp.js:535Polymer.Base._addFeature._stampTemplate @ elements-imports.csp.js:531Polymer.Base._addFeature._initFeatures @ elements-imports.csp.js:4627Polymer.attached @ elements-imports.csp.js:5612Polymer.Base._addFeature._invokeBehavior @ elements-imports.csp.js:267Polymer.Base._addFeature._doBehavior @ elements-imports.csp.js:262Polymer.Base.attachedCallback @ elements-imports.csp.js:102Polymer.Base._addFeature.attachedCallback @ elements-imports.csp.js:603Polymer.Base._addFeature._readySelf @ elements-imports.csp.js:591(anonymous function) @ elements-imports.csp.js:5554Polymer.ImportStatus._importsLoaded @ elements-imports.csp.js:5553(anonymous function) @ elements-imports.csp.js:5564checkDone @ webcomponents-lite.js:968watchImportsLoad @ webcomponents-lite.js:990(anonymous function) @ webcomponents-lite.js:939whenDocumentReady @ webcomponents-lite.js:957checkReady @ webcomponents-lite.js:952

Custom Element:

<dom-module id="my-form">
    <template>
        <div>
            <paper-input id="inputName" label="Name" required error-message="Required Input"> Name </paper-input>
            <paper-input id="inputServer" label="Server URL" required error-message="Required Input"> Server </paper-input>
            <paper-input id="inputUsername" label="Username" required error-message="Required Input">Username</paper-input>
            <paper-input id="inputPassword" label="Password" type="password" required error-message="Required Input" value="">Password</paper-input>
            <div class="rows layout horizontal right-justified certificate">
                <paper-button id='cancelBtn' tabindex="0">Cancel</paper-button>
                <paper-button id='saveBtn' tabindex="0">Save</paper-button>
            </div>
        </div>
    </template>
</dom-module>
<script>
Polymer({

    is: 'my-form',

    created: function() {
        var saveBtn = document.querySelector('#saveBtn');
        saveBtn.addEventListener('click', function() {
            document.getElementById('inputName').validate();
            document.getElementById('inputServer').validate();
            document.getElementById('inputUsername').validate();
            document.getElementById('inputPassword').validate();
        });
    },
});

Upvotes: 0

Views: 1552

Answers (1)

Scott Miles
Scott Miles

Reputation: 11027

on-click="handleClick"

Is not inline code, it's just an attribute, so it works just fine under CSP.

created()

Is too early, your elements are not made yet.

ready()

Your elements are made at this point, but they are not necessarily in document, so using document.querySelector (or document.getElement*) is a bad idea.

However, Polymer provides a map of elements in your template by id as a property called $, so you can write var saveBtn = this.$.saveBtn (but you should use on-click instead).

Upvotes: 2

Related Questions