CODEWITHSUNDEEP
javascriptjquerygoogle-chromefirefoxpolymer
Joan Nadal Brotat
Joan Nadal Brotat

Reputation: 122

Polymer.js components on Firefox

I am having a problem on Firefox with Polymer.js.

This is my Polymer element.

<!-- Imports polymer -->
<link rel="import" href="../../bower_components/polymer/polymer.html">

<!-- Defines element markup -->
<dom-module id="scoreboard-bar">
    ...
    <script>
        Polymer({
            is: 'scoreboard-bar',
            properties: {
                totalCounter: {
                    type: Number,
                    value: 0
                },
            },
            getTotalCounter: function () {
                return this.totalCounter;
            },
            setTotalCounter: function (totalCounter) {
                this.totalCounter = totalCounter;
            },
        });
    </script>
</dom-module>

This is the import of the Polymer component into the main html file:

<head>
    <!-- Imports polyfill -->
    <script src="{% static "polymer/bower_components/webcomponentsjs/webcomponents-lite.min.js" %}">  </script>

    <!-- Imports custom elements -->
    <link rel="import" href="{% static "polymer/components/entity-vibeboard/scoreboard-bar.html" %}">
</head>

To set up the counter just on load the page I have:

<body>
    <div>
        <scoreboard-bar id="scoreboardBarFlag"></scoreboard-bar>
    </div>

    <script>
        $( document ).ready(function() {
            var scoreboardBarFlagPolymer = document.querySelector('#scoreboardBarFlag');
            scoreboardBarFlagPolymer.setTotalCounter(10);
        });
    </script>
</body>

This code is working perfectly on Google Chrome, but it's not working on Firefox. The error that I am receiving is:

TypeError: scoreboardBarFlagPolymer.setTotalCounter is not a function

If I add a breakpoint on the Firebug, doing a debug, the function is available on the Polymer component, but it's not available just after load the page.

I think the error it's because the javascript function is trying to set the counter before to load the Polymer component on the page.

Any idea how can I run the javascript function after load the all Polymer components on the page? The issue it's only on Firefox, on Chrome it's working fine.

Upvotes: 0

Views: 499

Answers (1)

Maria
Maria

Reputation: 5604

Try listening to the WebComponentsReady event as described in the documentation of webcomponents.js

window.addEventListener('WebComponentsReady', function(e) {
  // imports are loaded and elements have been registered
  console.log('Components are ready');
});

Upvotes: 2

Related Questions