Polymer paper-dialog not showing up on click in chrome

Question

I'm using the newest polymer starter kit 2.0, I have this code down below, and trying to open the dialog but nothing happens in chrome (it's working in Firefox just fine):

<paper-fab icon="zoom-in" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
   <h3>text</h3>
   <div class="buttons">
     <paper-button dialog-confirm>Close</paper-button>
   </div>
</paper-dialog>

I've imported

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">

In "my-app.html"

And installed:

bower install --save PolymerElements/paper-dialog
bower install --save PolymerElements/paper-dialog-behavior

Any ideas on how to fix this problem?

Left - Firefox | Right - Chrome/opera

UPDATE:

I have the default polymer starter kit 2.0 project with some elements added to the pages.

I'm using polymer serve to cast the pages to localhost:8080

I've just created another page: src/my-testpage.html

And added <my-testpage name="testpage"></my-testpage> to iron pages in "my-app.html"

Initial code:

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-testpage">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10%;
        padding-left: 20%;
        padding-right: 20%;
      }
    </style>

    <paper-fab icon="zoom-in" onclick="dialog.open()"></paper-fab>
    <paper-dialog id="dialog">
       <h3>text</h3>
       <div class="buttons">
         <paper-button dialog-confirm>Close</paper-button>
       </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: 'my-testpage'
    });
  </script>
</dom-module>

RESULT: Works in Firefox and EDGE, doesn't work in chromium based browsers - Chrome/Opera:

Console shows:

testpage:1 
Uncaught ReferenceError: dialog is not defined
  onclick @ testpage:1

Suggested solution 1:

Use this instead: onclick="document.getElementById('dialog').open()

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-testpage">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10%;
        padding-left: 20%;
        padding-right: 20%;
      }
    </style>

    <paper-fab icon="zoom-in" onclick="document.getElementById('dialog').open()"></paper-fab>
    <paper-dialog id="dialog">
       <h3>text</h3>
       <div class="buttons">
         <paper-button dialog-confirm>Close</paper-button>
       </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: 'my-testpage'
    });
  </script>
</dom-module>

RESULT: Works in Firefox and EDGE, doesn't work in chromium based browsers - Chrome/Opera: Console shows:

testpage:1 
Uncaught TypeError: Cannot read property 'open' of null
  onclick @

Suggested solution 2:

<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-testpage">
  <template is="dom-bind" id="t">
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10%;
        padding-left: 20%;
        padding-right: 20%;
      }
    </style>
       <paper-fab icon="zoom-in" on-tap="openDialog"></paper-fab>
       <paper-dialog id="dialog">
          <h3>text</h3>
          <div class="buttons">
            <paper-button dialog-confirm>Close</paper-button>
          </div>
       </paper-dialog>
    <script>
       var t = document.getElementById('t');
       t.openDialog = function() {
         t.$.dialog.open();
       };
    </script>

  </template>

  <script>
    Polymer({
      is: 'my-testpage'
    });
  </script>
</dom-module>

result:

    .polymer-micro.html.js:265:1
    [my-testpage::_createEventHandler]: listener method `openDialog` not defined

tony19 · Accepted Answer · 2017-09-14T16:24:17.887

1

It looks like you might be relying on named access on the Window object, which should be avoided.

Instead, use document.getElementById('dialog') as shown in this snippet:

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-fab/paper-fab.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
  <paper-fab icon="zoom-in" onclick="document.getElementById('dialog').open()"></paper-fab>
  <paper-dialog id="dialog">
     <h3>text</h3>
     <div class="buttons">
       <paper-button dialog-confirm>Close</paper-button>
     </div>
  </paper-dialog>
</body>

codepen

Alternatively, you could use a tap-handler as shown in this snippet:

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-fab/paper-fab.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body unresolved>
  <template is="dom-bind" id="t">
    <paper-fab icon="zoom-in" on-tap="openDialog"></paper-fab>
    <paper-dialog id="dialog">
       <h3>text</h3>
       <div class="buttons">
         <paper-button dialog-confirm>Close</paper-button>
       </div>
    </paper-dialog>
  </template>
  <script>
    var t = document.getElementById('t');
    t.openDialog = function() {
      t.$.dialog.open();
    };
  </script>
</body>

codepen

UPDATE Your Polymer element code should look like this:

<dom-module id="my-testpage">
  <template>
    ...
    <paper-fab icon="zoom-in" on-tap="openDialog"></paper-fab>
    <paper-dialog id="dialog">
        <h3>text</h3>
        <div class="buttons">
          <paper-button dialog-confirm>Close</paper-button>
        </div>
    </paper-dialog>
  </template>

  <script>
    Polymer({
      is: 'my-testpage',

      openDialog: function() {
        this.$.dialog.open();
      }
    });
  </script>
</dom-module>

edited Sep 14 '17 at 16:24

answered Sep 20 '16 at 12:58

tony19

125,647
18
229
307

1

I replaced `dialog.open()` with `document.getElementById('dialog').open()` Now the console shows me this: `Uncaught TypeError: Cannot read property 'open' of null` and it's still not opening up. Do I suppose to add some ` – Un1 Sep 20 '16 at 13:13
Hmm. What browser (and its version) and OS are you using? What's the difference between the provided code snippet and your actual code? – tony19 Sep 20 '16 at 13:16
1

Oh, wow, I just tried to open it in Firefox and both `dialog.open()` and `document.getElementById('dialog').open()` are working in Firefox, but nothing happens in chrome. I'm using win10. Is there a way to fix it so it would work in chrome too? Your snippet does work in chrome though – Un1 Sep 20 '16 at 13:26
I verified my code snippet in Chrome 52, Firefox 48, and Safari 9, running in OS X El Capitan. – tony19 Sep 20 '16 at 13:32
Well, yes, your snippet and my code are both working in edge and firefox. But for some reason it shows me `Uncaught TypeError: Cannot read property 'open' of null` when I open that dialog in chrome or opera (I'm using `polymer serve` to test the code). – Un1 Sep 20 '16 at 13:38
Well, I added the id="t" and the – Un1 Sep 20 '16 at 14:24
The error implies you're not adding the template code properly. It would help to see exactly what you're trying. Try uploading your entire project into GitHub, and share the link here. What happens when you click the "Run code snippet" buttons above in Chrome? – tony19 Sep 20 '16 at 14:28
I pretty much have the default polymer 2.0 starter kit code, I added some elements to the pages, like paper-cards etc, changes some css styles, but that's pretty much it, I didn't change the default code of the **my-app.html** or any other page. I don't know how to upload it to the github though, I've updated the question here (at the bottom of the main question) – Un1 Sep 20 '16 at 15:24
The `dom-bind` template is intended for data binding in `index.html` (exactly as shown in my example code snippet). You don't need that in `dom-module`, so remove it. Then, move the `openDialog` function into your Polymer element's constructor object. – tony19 Sep 20 '16 at 15:43
Thank you so much, that fixed the problem! It's a shame that the default "on-click" doesn't work, but your solution works just fine! Thanks again, good to know that there are people that care to help – Un1 Sep 20 '16 at 15:59

Polymer paper-dialog not showing up on click in chrome

1 Answers1