Un1 Un1 - 2 months ago 6
Javascript Question

Polymer paper-dialog not showing up on click in chrome

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


enter image description here

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

Answer

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.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.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.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.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>
Comments