Search code examples
polymerpolymer-1.0paper-elements

polymer paper-dialog within paper-dialog

I am trying to make the confirmation dialog show up after I tap on affirmative button on "base" dialog. This confirmation dialog never appears. Instead, the "base" dialog closes immediately when I tap on its affirmative button.

How do I fix the problem? Thanks in advance!

file confirm-dialog.html:

<link rel="import" href="https://polygit.org/components/PolymerElements/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="https://polygit.org/components/PolymerElements/paper-button/paper-button.html">
<dom-module id="confirm-dialog">
    <template>
        <paper-dialog>
            <h2>[[msgHeader]]</h2>
            <content></content>
            <div class="buttons">
                <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
                <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
Polymer({
    is:'confirm-dialog'
    ,behaviors:[Polymer.PaperDialogBehavior]
    ,properties:{
        msgHeader:String
        ,msgDismiss:String
        ,msgConfirm:String
    }
    ,show:function(){
        this.$$("paper-dialog").open();
    }
});
</script>

file index.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/PolymerElements/paper-dialog/paper-dialog.html">
    <link rel="import" href="https://polygit.org/components/PolymerElements/paper-button/paper-button.html">
    <link rel="import" href="confirm-dialog.html">
</head>
<body>
<dom-module id="dialog-in-dialog">
    <template>
        <button on-tap="Button1Clicked">Open Base Dialog</button>
        <paper-dialog id="base">
            <h2>Base Dialog</h2>
            <p>This is base dialog.</p>
            <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
            <div class="buttons">
                <paper-button dialog-dismiss>Cancel</paper-button>
                <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
    var init=function(){
        Polymer({
            is:"dialog-in-dialog"
            ,Button1Clicked:function(){
                this.$.base.open();
            }
            ,OpenDialog2:function(){
                this.$$("confirm-dialog").show();
            }
        });
    };
    if(HTMLImports.ready)
        init();
    else
        HTMLImports.whenReady(init);
</script>
<dialog-in-dialog></dialog-in-dialog>
</body>
</html>


<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/paper-dialog/paper-dialog.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">


<dom-module id="confirm-dialog">
  <template>
    <paper-dialog>
      <h2>[[msgHeader]]</h2>
      <content></content>
      <div class="buttons">
        <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
        <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
      </div>
    </paper-dialog>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'confirm-dialog',
    behaviors: [Polymer.PaperDialogBehavior],
    properties: {
      msgHeader: String,
      msgDismiss: String,
      msgConfirm: String
    },
    show: function() {
      this.$$("paper-dialog").open();
    }
  });
</script>



<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <dom-module id="dialog-in-dialog">
    <template>
      <button on-tap="Button1Clicked">Open Base Dialog</button>
      <paper-dialog id="base">
        <h2>Base Dialog</h2>
        <p>This is base dialog.</p>
        <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
        </div>
      </paper-dialog>
    </template>
  </dom-module>
  <script>
    var init = function() {
      Polymer({
        is: "dialog-in-dialog",
        Button1Clicked: function() {
          this.$.base.open();
        },
        OpenDialog2: function() {
          this.$$("confirm-dialog").show();
        }
      });
    };
    if (HTMLImports.ready)
      init();
    else
      HTMLImports.whenReady(init);
  </script>
  <dialog-in-dialog></dialog-in-dialog>
</body>

</html>

[edit] I want the parent paper-dialog keep opened after its child paper-dialog is opened. According to the helps from the kind guru, I remove paper-button from the parent paper-dialog as shown in this revision:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../bc/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../bc/polymer/polymer.html">
    <link rel="import" href="../bc/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bc/paper-button/paper-button.html">
    <link rel="import" href="confirm-dialog.html">
</head>
<body>
    <dom-module id="dialog-in-dialog">
        <template>
            <button on-tap="Button1Clicked">Open Base Dialog</button>
            <paper-dialog id="base">
                <h2>Base Dialog</h2>
                <p>This is base dialog.</p>
                <button on-tap="OpenDialog2">Break the window</button>
                <div class="buttons">
                    <paper-button dialog-dismiss>Exit</paper-button>
                </div>
            </paper-dialog>
            <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
        </template>
    </dom-module>
    <script>
        var init=function(){
            Polymer({
                is:"dialog-in-dialog"
                ,Button1Clicked:function(){
                    this.$.base.open();
                }
                ,OpenDialog2:function(){
                    this.$$("confirm-dialog").show();
                }
            });
        };
        if(HTMLImports.ready)
            init();
        else
            HTMLImports.whenReady(init);
    </script>
    <dialog-in-dialog></dialog-in-dialog>
</body>
</html>
Solution

  • You need to make two changes to your current code to make it work

      1. You need to remove behavior from your confirm-dialog item. As your element in itself is not going to open and is just gonna call paper-dialog's open function internally there is no need to import PaperDialogBehavior in your custom element.
      1. You need to remove dialog-confirm from the button which you are going to use to open the nested dialog. Adding that will close your parent dialog and thus your attempt to open nested dialog will fail.

    or

      1. If you want to close your first dialog and open the second dialog you can instead of removing dialog-confirm can move your custom-dialog element out of the paper-dialog. This will on click of the button close the parent dialog and open the child dialog as depicted in the code here

    <html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="https://polygit.org/components/polymer/polymer.html">
  <link rel="import" href="https://polygit.org/components/paper-dialog/paper-dialog.html">
  <link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">
</head>

<body>
  <dom-module id="confirm-dialog">
    <template>
      <paper-dialog>
        <h2>[[msgHeader]]</h2>
        <content></content>
        <div class="buttons">
          <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
          <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
        </div>
      </paper-dialog>
    </template>
  </dom-module>
  <script>
    Polymer({
      is: 'confirm-dialog',
      properties: {
        msgHeader: String,
        msgDismiss: String,
        msgConfirm: String
      },
      show: function() {
        this.$$("paper-dialog").open();
      }
    });
  </script>

  <dom-module id="dialog-in-dialog">
    <template>
      <button on-tap="Button1Clicked">Open Base Dialog</button>
      <paper-dialog id="base">
        <h2>Base Dialog</h2>
        <p>This is base dialog.</p>

        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
        </div>
      </paper-dialog>
      <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
    </template>
  </dom-module>
  <script>
    var init = function() {
      Polymer({
        is: "dialog-in-dialog",
        Button1Clicked: function() {
          this.$.base.open();
        },
        OpenDialog2: function() {
          this.$$("confirm-dialog").show();
        }
      });
    };
    if (HTMLImports.ready)
      init();
    else
      HTMLImports.whenReady(init);
  </script>
  <dialog-in-dialog></dialog-in-dialog>
</body>

</html>