# Panel widget script won't run after navigating away and back to dashboard

**URL:** <https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624>\
**Category:** Questions\
**Tags:** v2\
**Created:** [June 18, 2019, 2:01pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624 "2019-06-18T14:01:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lukehatfield](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukehatfield/32/386_2.png) [@lukehatfield](https://forum.getkirby.com/u/lukehatfield)\
**Post date:** [June 18, 2019, 2:01pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/1 "2019-06-18T14:01:51Z")

</div>

I have a custom panel widget that needs to run some javascript/jquery in order to upload a file while staying on the same page. It works just fine when I login to the panel then upload a file. But when I navigate to anywhere in the panel then come back to the dashboard, the script won’t run again until I reload the browser. I have the script wrapped in `$(document).ready(function() {...` in the widgits/widget-name/template.php file, but that doesn’t seem to help after panel navigation.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [June 18, 2019, 3:58pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/2 "2019-06-18T15:58:12Z")

</div>

How do you trigger the script? Is there an upload button with an event handler?

---

<div class="post-metadata">

**Author:** ![gearsdigital](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/gearsdigital/32/2099_2.png) [@gearsdigital](https://forum.getkirby.com/u/gearsdigital)\
**Post date:** [June 18, 2019, 6:19pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/3 "2019-06-18T18:19:29Z")

</div>

The issue here is that the JavaScript is only executed once after you loaded the panel. After then Kirby 2 does not make “hard” requests anymore and just loads the view via JSON which contains a string of html.

Depending on your knowledge and browser setup I’ld suggest to make use of a [mutation observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).

Using this API you can listen to added or removed DOM nodes, attribute changes and fire a callback to reinitiate your JS.

By the way I faced a similar issue in my [kirby-analytics-dashboard](https://github.com/gearsdigital/kirby-analytics-dashboard) Plugin. I found a [quite hacky way](https://github.com/gearsdigital/kirby-analytics-dashboard/blob/master/assets/js/Helper.js#L12) 🙈

---

<div class="post-metadata">

**Author:** ![lukehatfield](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukehatfield/32/386_2.png) [@lukehatfield](https://forum.getkirby.com/u/lukehatfield)\
**Post date:** [June 18, 2019, 7:37pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/4 "2019-06-18T19:37:33Z")

</div>

@texnixe that’s exactly right.

Edit: sorry the picture text is so small. Basically the form submits to my dummy url ("?") if the JS hasn’t been attached and run preventDefault() on the form.

 ![Screenshot_2019-06-18_15_23_36](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/bd924af79f1a75a856605a362fc2db43eff177a5.png)

@gearsdigital this makes total sense. I had no idea the Kirby 2 panel was an SPA. With the mutation observer, would I just look for the existence of a unique div#id that only appears in my widget on the Dashboard? Then re-attach the event handler if that div#id is present?

---

<div class="post-metadata">

**Author:** ![gearsdigital](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/gearsdigital/32/2099_2.png) [@gearsdigital](https://forum.getkirby.com/u/gearsdigital)\
**Post date:** [June 18, 2019, 8:33pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/5 "2019-06-18T20:33:01Z")

</div>

That is what I’ld do 🙂 A made a quick fiddle for you… [https://jsfiddle.net/e5hk8ma3/](https://jsfiddle.net/e5hk8ma3/)

---

<div class="post-metadata">

**Author:** ![lukehatfield](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukehatfield/32/386_2.png) [@lukehatfield](https://forum.getkirby.com/u/lukehatfield)\
**Post date:** [June 19, 2019, 12:31am UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/6 "2019-06-19T00:31:08Z")

</div>

Thanks so much @gearsdigital. I used the fiddle, added a flag to prevent multiple firings (because for some reason the mutation observer fired multiple times), and it works a beauty!

---

<div class="post-metadata">

**Author:** ![gearsdigital](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/gearsdigital/32/2099_2.png) [@gearsdigital](https://forum.getkirby.com/u/gearsdigital)\
**Post date:** [June 19, 2019, 5:03am UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/7 "2019-06-19T05:03:35Z")

</div>

🥳

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 5:22pm UTC](https://forum.getkirby.com/t/panel-widget-script-wont-run-after-navigating-away-and-back-to-dashboard/14624/8 "2025-02-06T17:22:48Z")

</div>


