CODEWITHSUNDEEP
javascriptjquerypolymer
Heisenberg
Heisenberg

Reputation: 1508

How to create a method for custom polymer element and call it in a main App?

I am writing my custom polymer element. I need to define a method toggle for that element. Whenever I create that element in my main HTML, I should be able to call that method. The following code isn't working. What am I doing wrong?

loader.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<script type="text/javascript" src="../../javascripts/jquery.js"></script>
<polymer-element name="loader">
    <template>
        <paper-dialog opened id="loadingPage">"{{message}}"</paper-dialog>
    </template>
    <script>
        Polymer({
            message: "Activating",
            toggle: function() {
                //jQ("#loadingPage").toggle();
                console.log("Internal toggle");
            }
        });
    </script>
</polymer-element>

Index.html

<loader id="activationLoading">
        </loader>
<paper-button id="act-submit" raised>
                        Continue
                    </paper-button>

index.js

jQ('#act-submit').click(function () {
            console.log("toggled");
            jQ('#activationLoading').toggle();
        });

P.S. - If I change the method name from toggle to foo, it throws a javascript error.

Upvotes: 0

Views: 1822

Answers (1)

jimi dough10
jimi dough10

Reputation: 2016

i think this is what you are looking for 

button = document.querySelector("#act-submit");
button.addEventListener('click', function () {
    document.querySelector("#activationLoading").toggle();
});

edit:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<script type="text/javascript" src="../../javascripts/jquery.js"></script>
<polymer-element name="loader-element">
    <template>
        <paper-dialog opened id="loadingPage">"{{message}}"</paper-dialog>
    </template>
    <script>
      Polymer('loader-element', {
        message: "Activating",
        toggle: function() {
            //jQ("#loadingPage").toggle();
            console.log("Internal toggle");
        }
      });
  </script>
</polymer-element>

after looking back over your element i see that you named it "loader" all polymer elements have to have a - in the name so i renamed "loader-element" second in your script section you didn't call the name of the element you are assigning the script to. if you change that section to match the code below the element should function as expected. 

      Polymer('loader-element', {
        message: "Activating",
        toggle: function() {
            //jQ("#loadingPage").toggle();
            console.log("Internal toggle");
        }
      });

just as a observation i am not sure but i don't think jquery works in polymer elements.

Upvotes: 1

Related Questions