Dialog
Docs & Examples
Source
Stimulus Actions
Controller is present directly on the dialog element, so you need to use Invoke action to invoke an action outside the controller.
show
Shows a dialog via showDialog method.
You can add any params from options via Invoke params.
Example
html
<body data-controller="invoke">
<button
class="x-button"
data-invoke-action="x-dialog#show"
data-invoke-target="#dialogElement"
>
Show Existing Dialog
</button>
<dialog class="x-dialog" data-controller="x-dialog">
<div class="x-dialog-content">
Dialog content
</div>
</dialog>
</body>Example Fetch
Fetches, appends and shows a dialog via showDialog method.
You can add any params from options via Invoke params.
html
<body data-controller="invoke">
<button
class="x-button"
data-invoke-action="x-dialog#show"
data-invoke-url="/dialog.json"
>
Show Dialog
</button>
</body>Example Naja
Fetches via Naja, appends and shows a dialog via showDialog method.
You can add any params from options via Invoke params.
- Use
data-naja="invoke once"if you want the dialog to be cached in the DOM.
html
<body data-controller="invoke">
<button
class="x-button"
data-naja="invoke once"
data-naja-url="/ajax-url"
data-invoke-action="x-dialog#show"
>
Show Dialog
</button>
</body>- Use
data-naja="invoke"if you want the dialog be fetched every time, be sure to remove the old dialog from DOM first!
html
<body data-controller="invoke">
<button
class="x-button"
data-naja="invoke"
data-naja-url="/ajax-url"
data-invoke-action="x-dialog#show"
data-invoke-remove-param="true"
>
Show Dialog
</button>
</body>close
Closes a dialog via closeDialog method.
You can add any params from options via Invoke params.
Example
html
<body>
<dialog class="x-dialog" data-controller="x-dialog">
<div class="x-dialog-content">
<button class="x-button" data-controller="x-dialog#close">
Close dialog
</button>
</div>
</dialog>
</body>Stimulus Values
params
You can add any params from options via data-x-dialog-params-value. This will override the params defined via actions.
html
<body>
<dialog
class="x-dialog"
data-controller="x-dialog"
data-x-dialog-params-value='{ "remove": true }'
>
<div class="x-dialog-content">
Dialog content
</div>
</dialog>
</body>Notes
- When you initially set
data-action="x-dialog:connect->x-dialog#showon the dialog, the dialog will open upon controller initialization. You can also add params via params value. - You can close the dialog upon successful
data-najaform submit, by addingdata-action="naja:form-success->x-dialog#close" - Check out official
<dialog>docs on MDN for more information about the element.