CODEWITHSUNDEEP
javascriptpolymer
jimi dough10
jimi dough10

Reputation: 2016

close paper-dialog or paper-action-dialog with javascript

in my use case i have a paper-action-dialog that i use as a first run dialog so i can get server connection info from the user. i am using autoclosedisabled attribute cause i do not want the user to click off the dialog and close before i get the server details. when the user submits the details i would like the dialog to stay open until i get a return from the server telling the app the details are valid. then i would like to close the dialog with javascript and do the ajax call for data.

html 

<paper-action-dialog id="firstRun" autoclosedisabled transition="core-transition-center">
  <custom-form></custom-form>
</paper-action-dialog>

currently i am using document.querySelector('core-overlay-layer').classList.remove('core-opened'); it does close the dialog but it looks like that causes issues with any dialog you try to open after as well as causing issues with toasts. then you have to reload the app to correct the issues.

is there anyway to close a paper-dialog or paper-action-dialog with javascript?

i really am not a big fan of the idea of closing the dialog when the user clicks submit just to open again if for any reason the submission fails.

thanks in advance

Upvotes: 1

Views: 5112

Answers (3)

SethWhite
SethWhite

Reputation: 1977

In addition to the other answers, you can used the "opened" attribute on the tag:

<paper-action-dialog opened="{{dialogOpen}}"></paper-action-dialog>

then inside any of your Polymer function calls in your js, just say:

foo: function(){
   this.dialogOpen = true;
}

I like this method because to me it seems more "Polymerish" as it involves using attributes. Whatever works though.

Additionally, another way similar to a previous answer is to use Polymers magical $ stuff in any of your functions:

this.$.firstRun.toggle();

You can use this.$.id to access any polymer elements and their methods.

Upvotes: 1

tansu
tansu

Reputation: 106

Yes, just call close method like this.$.firstRun.close()

An example: https://github.com/Kalitte/polymer-router-demo/

Upvotes: 2

Ahmadreza
Ahmadreza

Reputation: 584

Have you tried .toggle() method of the element. You can access the element after polymer-ready event

var el = document.getElementById('yourdialogid');
el.toggle()

Upvotes: 0

Related Questions