# Run a code a display a dialog in UI fragments

**URL:** <https://forum.library.adaptavist.com/t/run-a-code-a-display-a-dialog-in-ui-fragments/562>\
**Category:** ScriptRunner\
**Tags:** data-center, jira\
**Created:** [March 7, 2025, 7:23am UTC](https://forum.library.adaptavist.com/t/run-a-code-a-display-a-dialog-in-ui-fragments/562 "2025-03-07T07:23:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![testusername](https://avatars.discourse-cdn.com/v4/letter/t/8491ac/32.png) [@testusername](https://forum.library.adaptavist.com/u/testusername)\
**Post date:** [March 7, 2025, 7:23am UTC](https://forum.library.adaptavist.com/t/run-a-code-a-display-a-dialog-in-ui-fragments/562/1 "2025-03-07T07:23:13Z")

</div>

We need to create a button that, when clicked, prompts a dialog to enter a message. Upon submitting the message, it should send an email with the entered content. Currently, I am testing the dialog available in the script runner. I wrote the dialog script under ‘rest endpoints’ and referenced the path in the URL within ‘UI fragments’ where the button is created. However, when the button is clicked, it redirects to another page displaying the dialog content instead of showing the prompt. This is not the desired behavior. How can I modify this setup to display the prompt correctly without redirecting to a new page?

---

<div class="post-metadata">

**Author:** ![nikolayr](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.library.adaptavist.com/nikolayr/32/254_2.png) [@nikolayr](https://forum.library.adaptavist.com/u/nikolayr)\
**Post date:** [March 10, 2025, 2:53pm UTC](https://forum.library.adaptavist.com/t/run-a-code-a-display-a-dialog-in-ui-fragments/562/2 "2025-03-10T14:53:14Z")

</div>

Hi “testusername”,  
I’d like to suggest you to try out HTMX. 🙂 It does not need a lot of changes.  
Add htmx load into UI Fragments and modify you button accordingly.

```auto
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<a hx-get="/rest/scriptrunner/latest/custom/mydialoghtml" hx-target="#navigator-sidebar" hx-swap="innerHTML">Summon D.Alog!</a>

```

Adding to your button hx-get instead of href and proper hx-target would allow htmx to run AJAX request and then add your dialog HTML code into the current page.  
You can read more on how htmx works here: [\</\> htmx ~ hx-get Attribute](https://htmx.org/attributes/hx-get/)

---

<div class="post-metadata">

**Author:** ![testusername](https://avatars.discourse-cdn.com/v4/letter/t/8491ac/32.png) [@testusername](https://forum.library.adaptavist.com/u/testusername)\
**Post date:** [March 11, 2025, 6:02am UTC](https://forum.library.adaptavist.com/t/run-a-code-a-display-a-dialog-in-ui-fragments/562/3 "2025-03-11T06:02:46Z")

</div>

@nikolayr Thank you for the reply. But where should I include the code?

 ![image](https://us1.discourse-cdn.com/flex019/uploads/adaptavistlibrary/original/1X/47971fa34a243c965ee6893c161d94e63eb8d989.png)  
This is the only option I see

---

<div class="post-metadata">

**Author:** ![nikolayr](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.library.adaptavist.com/nikolayr/32/254_2.png) [@nikolayr](https://forum.library.adaptavist.com/u/nikolayr)\
**Post date:** [March 11, 2025, 8:34pm UTC](https://forum.library.adaptavist.com/t/run-a-code-a-display-a-dialog-in-ui-fragments/562/4 "2025-03-11T20:34:45Z")

</div>

Ah you have “Custom web item”. I thought you have UI Fragment type “Show Web Panel”. It can add elements into UI with conditions.

With “Web Panel” you can add the following script into field “Provider class/script”:

```auto
writer.write('''\
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<a hx-get="/rest/scriptrunner/latest/custom/mydialoghtml" hx-target="#navigator-sidebar" hx-swap="innerHTML">Summon D.Alog!</a>""");

```