chrispepper1989 chrispepper1989 - 7 months ago
280 0

Output:

"Dialog add-button requested"
"uncaught TypeError: dialog.open is not a function

HTML

Dialog Problem

<!--- ---------------------------------------------my dialog button------------------------------------------------>


<!--
An element to display a page header block on a page.

Example:
    <thor-page-header icon="folder" title="Project">This is the description of the project page.</thor-page-header>
-->

<dom-module id="my-dialog-button">

    <template>

    <style>

       paper-fab.addbutton  {

            position: absolute;
            right: -27px;
            top: 34px;

        }

    </style>

  <paper-fab class="addbutton" icon="add" onclick="clickHandler(event)" ></paper-fab>

  </template>
    <script>
        Polymer({
      is: 'my-dialog-button',
      properties: {

        dialog_id: {
          type: String
        },

      }
    })


    function clickHandler(e) {

      var button = e.target;
      while (!button.hasAttribute('dialog_id') && button !== document.body) {
        button = button.parentElement;
      }

      if (!button.hasAttribute('dialog_id')) {
          console.log("you have no element with 'dialog_id' defined")
        return;
      }


      var id = button.getAttribute('dialog_id');
      console.log("dialog " + id + " requested")
      var dialog = document.getElementById(id);
      if (dialog) {

        dialog.open();
      }
      else
      {
          console.log("dialog " + id + " does not exist")
      }
    }

  </script>

</dom-module>

<!--- ---------------------------------------------my dialog------------------------------------------------>

<link rel="import" href="/static/ext/polymer/polymer.html">


<dom-module id="my-dialog">

<template>
  <paper-dialog id="dialog">
    <h2>"hello world"</h2>
      <p>"I am bob"</p>
  </paper-dialog>
</template>

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

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


</dom-module>

<!-----------------------------page--------------------------------------->
<my-dialog-button dialog_id="add-button"></my-dialog-button>
<my-dialog id="add-button"></my-dialog>
Comments